A wide hero image can look excellent on desktop but fail completely on mobile. The main subject may become too small, important details may disappear, become cropped, or text within the image may become unreadable.
The solution is to serve images suited to different screen layouts. WordPress already handles different sizes of the same image using srcset. But when you need a different crop, aspect ratio, composition, or a completely different image file on mobile, you need the HTML <picture> element for art direction.
This guide explains both approaches and shows you how to add different Desktop, Tablet, and Mobile images in the WordPress Block Editor without writing code.
TL;DR (Quick Answer)
- Need different sizes of the same image? Use WordPress’s built-in responsive images with
srcset. - Need different crops or compositions? Use the
<picture>element for art direction. - Want the easiest no-code method? Use the free Responsive Picture Block.
For most Block Editor users who need art direction, Responsive Picture Block provides the simplest visual workflow.
Responsive Images versus Art Direction
Responsive images and art direction solve related but different problems.
Resolution switching with srcset
WordPress may generate several sizes of an uploaded image, such as 480px, 768px, 1024px, and 1600px versions. The browser can then choose a suitable version based on:
- The width at which the image appears.
- The visitor’s viewport size.
- The screen’s pixel density.
- The available image candidates.
The crop and composition remain the same. Native responsive image support has been built into WordPress since version 4.4.
Art direction with <picture>
Art direction lets you deliver genuinely different images at different breakpoints:
- Desktop: a wide landscape photograph.
- Tablet: a tighter crop.
- Mobile: a portrait version focused on the subject.
This is the intended use case for the <picture> element.
| Method | What changes? | Code needed? | Best for |
|---|---|---|---|
| WordPress Image block | Resolution of the same image | No | Standard responsive images |
| Manual <picture> | Crop, composition, ratio, or file | Yes | Developers and custom themes |
| Responsive Picture Block | Crop, composition, ratio, or file | No | Block Editor users needing art direction |
Does WordPress Already Create Responsive Images?
Yes. WordPress automatically adds srcset and sizes when it generates responsive image markup.
A simplified example might look like this:
<img
src="landscape-1024.jpg"
srcset="
landscape-480.jpg 480w,
landscape-768.jpg 768w,
landscape-1024.jpg 1024w,
landscape-1600.jpg 1600w
"
sizes="(max-width: 1024px) 100vw, 1024px"
width="1600"
height="900"
alt="A footpath running through a wooded landscape"
>The browser uses srcset and sizes to choose an appropriate file. It does not download every candidate listed.
This works well for resolution switching, but every version still shows the same composition. WordPress does not automatically know that your mobile layout needs a closer crop, portrait image, or completely different composition. That is where art direction comes in.
Method 1: Use the Standard WordPress Image Block
Use a normal Image block when the same composition works across all screen sizes. This is usually the right method when:
- The subject remains clear on smaller screens.
- The image does not contain text that becomes unreadable.
- You only need smaller files on smaller devices.
- You do not need a separate mobile crop.
How to use it
- Add a standard Image block.
- Select a suitably large source image from the Media Library.
- Configure its alignment, width, aspect ratio, and other design settings.
- Add meaningful alternative text if the image communicates useful information.
- Publish the page.
WordPress normally handles the responsive resolution selection automatically.
For theme developers
When outputting a Media Library image in a PHP template, use WordPress image functions rather than constructing an <img> element from a plain attachment URL.
<?php
$image_id = get_post_thumbnail_id();
if ( $image_id ) {
echo wp_get_attachment_image(
$image_id,
'large',
false,
array(
'class' => 'hero-image',
'sizes' => '(max-width: 767px) 100vw, 1200px',
)
);
}
?>wp_get_attachment_image() returns complete image markup and integrates with WordPress’s responsive image system. The sizes value should describe how wide the image actually appears in your layout.
Method 2: Add a <picture> Element Manually
Use a manually coded <picture> element when you need complete control and are comfortable editing HTML or theme templates.
Here is a basic mobile and desktop example:
<picture>
<source media="(max-width: 767px)" srcset="/images/hero-mobile.webp">
<img src="/images/hero-desktop.webp" width="1600" height="900" alt="A ceramic artist shaping a bowl at a workshop table">
</picture>Adding tablet and smaller mobile images
You can provide several responsive sources:
<source
media="(max-width: 767px)"
srcset="/images/hero-mobile.webp"
>
<source
media="(max-width: 1024px)"
srcset="/images/hero-tablet.webp"
>
<img
src="/images/hero-desktop.webp"
width="1600"
height="900"
alt="A ceramic artist shaping a bowl at a workshop table"
>
The browser examines the elements in order and uses the first suitable match.
When using overlapping max-width conditions, place the narrowest and most specific conditions first. The desktop image can remain as the final fallback.
Manual markup gives developers full control, but it can become cumbersome when editors need to replace images regularly, the layout appears across many pages, or non-technical users manage the content.
For theme developers
When outputting a <picture> element you can use the below assuming you are using custom fields. Please note wp_get_attachment_image() only outputs a single URL, if you want art directionn and resolution witching you can swap out the get image calls with wp_get_attachment_image_srcset()
<?php
$desktop_id = get_field( 'hero_desktop' ); // ACF or similar
$mobile_id = get_field( 'hero_mobile' );
if ( $desktop_id && $mobile_id ) {
$desktop = wp_get_attachment_image_src( $desktop_id, 'large' );
$mobile = wp_get_attachment_image_src( $mobile_id, 'medium' );
$alt = get_post_meta( $desktop_id, '_wp_attachment_image_alt', true );
?>
<picture>
<source media="(max-width: 767px)" srcset="<?php echo esc_url( $mobile[0] ); ?>">
<img src="<?php echo esc_url( $desktop[0] ); ?>"
width="<?php echo esc_attr( $desktop[1] ); ?>"
height="<?php echo esc_attr( $desktop[2] ); ?>"
alt="<?php echo esc_attr( $alt ); ?>">
</picture>
<?php } ?>Method 3: Responsive Picture Block, Best No-Code Option for Block Editor Users
The free Responsive Picture Block brings visual image art direction directly into the WordPress Block Editor.
Instead of writing <picture> markup manually, you add standard WordPress Image blocks inside a Responsive Picture wrapper and assign each one to Desktop, Tablet, Mobile, or a custom breakpoint. The plugin then outputs a single semantic <picture> element on the frontend.
Key features
- Visual editing with standard WordPress Image blocks.
- Separate Desktop, Tablet, Mobile, and Custom images.
- Different crops, dimensions, aspect ratios, and formats.
- Optional custom media queries.
- Native WordPress
srcsetwithin each image source. - Optional
sizesoverrides for advanced control. - Support for Synced Patterns with Overrides.
- Automatic ordering of custom media queries.
- Existing Image block controls such as aspect ratio and object fit.
- No frontend JavaScript.
It is particularly useful for hero images, product photography, campaign graphics, editorial layouts, images containing text, reusable patterns, and client-editable websites.
How to show a different image on mobile
- Install and activate Responsive Picture Block from the WordPress plugin directory.
- Open a page, post, template, or pattern in the Block Editor.
- Add a Responsive Picture block.
- Add a standard Image block for the Desktop image.
- Add another Image block for the Mobile image.
- Select the mobile Image block.
- Open the Responsive: Breakpoint panel in the block sidebar.
- Assign the image to the Mobile viewport.
- Add a Tablet or Custom image if the design requires one.
- Preview the assigned sources using the editor’s device controls.
- Publish the page.
- Check the finished result on the frontend.
Example frontend output
A completed block may produce markup similar to this:
<picture>
<source
media="(max-width: 767px)"
srcset="
hero-mobile-480.webp 480w,
hero-mobile-768.webp 768w
"
sizes="100vw"
>
<source
media="(max-width: 1024px)"
srcset="
hero-tablet-768.webp 768w,
hero-tablet-1024.webp 1024w
"
sizes="100vw"
>
<img
src="hero-desktop-1200.webp"
srcset="
hero-desktop-768.webp 768w,
hero-desktop-1200.webp 1200w,
hero-desktop-1600.webp 1600w
"
sizes="(max-width: 1200px) 100vw, 1200px"
width="1600"
height="900"
alt="A ceramic artist shaping a bowl at a workshop table"
>
</picture>Two types of responsive image selection are happening: <picture> selects the composition, and srcset selects the resolution within that composition.
Ready to try it?
Install Responsive Picture Block free from the WordPress plugin directory →
Why not hide separate images with CSS?
A common workaround is to add separate desktop and mobile Image blocks, then use responsive visibility settings to hide one at each breakpoint.
This may appear correct visually, but it has several disadvantages:
- The page contains duplicate image elements.
- The markup does not identify the files as alternative versions of the same image.
- Some implementations may request image files that are subsequently hidden.
- Editors must keep several visibility settings synchronised.
- Captions, links, spacing, and alignment can become inconsistent.
- Reusing the layout safely becomes more difficult.
Changing an image source with JavaScript after the page begins loading can also be problematic because the original source may already have been requested.
A <picture> element gives the browser a structured set of alternatives and lets it select a suitable source during resource discovery.
How to choose image breakpoints
Breakpoints should follow the design rather than a particular phone or tablet model.
Add a new source at the point where the current image composition stops working.
For example:
- The subject becomes too small below 900px.
- Text inside the image becomes unreadable below 700px.
- A landscape banner becomes too shallow on a phone.
- A person positioned near the edge becomes cropped out.
- A product becomes difficult to distinguish at smaller widths.
Responsive Picture Block includes Desktop, Tablet, and Mobile options, but it also supports custom media conditions.
Examples include:
(max-width: 640px)or:
(min-width: 641px) and (max-width: 900px)Custom breakpoints are useful when your theme’s layout does not match generic mobile and tablet widths.
Responsive image performance best practices
Responsive images can reduce unnecessary image transfer, but the source files and loading behaviour still need to be configured carefully.
Upload images at sensible dimensions
Avoid uploading a 5000px-wide image when it will never be displayed above 1200px.
The source should be large enough for its maximum rendered size and higher-density screens, but not dramatically larger than required.
There is no universal ideal file size. A photograph, illustration, transparent graphic, and image containing text will compress differently.
Use the browser Network panel to measure the file that is actually transferred.
Use efficient image formats
WebP and AVIF can often produce smaller files than JPEG or PNG, although the best format depends on the image.
The <picture> element can also provide alternative file formats, but format selection and art direction are separate concerns.
Responsive Picture Block can use appropriate WebP, AVIF, JPEG, PNG, and other files available through the WordPress Media Library. It does not itself convert existing images into modern formats.
Do not lazy-load an important hero image
Lazy loading is useful for images further down a page.
Warning
Do not force loading="lazy" onto an above-the-fold hero image or another image likely to be the page’s Largest Contentful Paint element.
Lazy-loading an LCP image delays its request and can make the LCP result worse.
For an important hero image, immediate browser discovery is normally preferable.
Include image dimensions
Width and height attributes let the browser reserve space before an image loads, reducing unexpected layout movement.
When mobile and desktop sources use different aspect ratios, test each layout carefully to ensure the surrounding content behaves as expected.
Use accurate sizes values
srcset describes the image widths available to the browser.
sizes describes approximately how wide the image will appear in the layout.
For example:
sizes="(max-width: 767px) 100vw, 1200px"This says that the image occupies approximately the full viewport width on smaller screens and no more than 1200px on larger screens.
An inaccurate sizes value can cause the browser to choose an unnecessarily large source.
Most users will not need to customise this manually. Responsive Picture Block makes its per-source sizes override optional.
How to test responsive images
Do not rely only on dragging the edge of your browser window.
Browsers cache images and may retain a larger source that has already been downloaded. Test the page with a fresh reload at each target viewport.
Test with browser DevTools
- Open the published page.
- Open Developer Tools.
- Enable a mobile or tablet viewport.
- Open the Network panel.
- Filter requests to images.
- Disable the cache while Developer Tools is open.
- Reload the page.
- Confirm that the expected image file was requested.
Check the selected source with currentSrc
You can inspect the exact image URL selected by the browser.
For the first responsive picture on the page, run:
document.querySelector('picture img').currentSrcIf you have selected the fallback <img> in the Elements panel, you can usually run:
$0.currentSrcThe result shows the complete URL of the source selected by the browser.
Test on real devices
Browser emulation is useful, but it does not reproduce every real-world layout or browser behaviour.
Where possible, check:
- A phone.
- A tablet.
- A laptop.
- A larger desktop monitor.
- Portrait and landscape orientations.
Common mistakes to avoid
Using <picture> when srcset is sufficient
Do not create separate compositions when the same photograph works everywhere.
If only the resolution needs to change, the standard WordPress Image block is normally sufficient.
Serving one large desktop image everywhere
A wide desktop source may contain large areas that are irrelevant on mobile. It can also make the main subject too small to understand.
Hiding duplicate images with CSS
Responsive visibility settings affect presentation, but they are not equivalent to structured responsive image selection.
Forgetting the fallback <img>
The fallback image is required inside <picture> and carries important attributes such as alt, width, height, classes, and loading behaviour.
Putting sources in the wrong order
The browser examines the available <source> elements in order.
Overlapping media conditions must therefore be arranged carefully. Responsive Picture Block handles this source ordering automatically.
Correct source order for min and max-width
The browser stops at the first <source> whose media condition is a match and ignores everything after it.
Using max-width? Smallest first.
Using min-width? Largest first.
Using inaccurate sizes
Incorrect information about the image’s displayed width can cause the browser to download a source much larger than required.
Lazy-loading the main hero image
Do not delay an image that is likely to be the largest visible element when the page first loads.
Omitting width and height
Missing intrinsic dimensions can contribute to layout movement while the image loads.
Using unrelated images inside one <picture>
The responsive alternatives should communicate the same essential information.
A wide photograph and a close crop of the same subject can normally share one appropriate alternative-text description.
Do not use <picture> to switch between unrelated images that require different accessible descriptions.
Keyword-stuffing alternative text
Alternative text should explain the meaningful content or purpose of an image in its context.
It should not be a list of target search phrases.
Decorative images should normally use an empty alt attribute:
alt=""Treating editor preview as the final test
The Block Editor preview helps confirm which image has been assigned to each viewport.
Your theme’s frontend styles, content widths, and breakpoints may behave differently, so always test the published page.
Frequently asked questions
Can WordPress show a different image on mobile without a plugin?
Yes.
You can manually add a <picture> element or customise a theme template.
Responsive visibility controls are another possible workaround, but <picture> provides the most appropriate HTML structure when the files are alternative versions of the same image.
Does WordPress automatically resize images for mobile?
WordPress normally creates several sizes of an uploaded image and adds responsive srcset and sizes information to image markup it generates.
This lets the browser choose an appropriate resolution.
It does not automatically design or select a different mobile crop.
Does <picture> replace srcset?
No.
<picture> chooses between image sources, crops, compositions, or formats.
Each source can still contain its own srcset, allowing the browser to select an appropriate resolution within that source.
Can mobile and desktop images have different aspect ratios?
Yes.
A desktop image can be wide while the mobile source is square or portrait.
Responsive Picture Block preserves the individual dimensions, aspect ratio, and object-fit settings of each assigned image.
Can I add custom responsive breakpoints?
Yes.
Responsive Picture Block supports Custom images with individual media queries alongside its Desktop, Tablet, and Mobile options.
Can I add more than one custom source?
Yes.
You can add multiple Custom Image blocks and assign a different media condition to each one. The plugin automatically sorts the sources into the appropriate order.
Does Responsive Picture Block add frontend JavaScript?
No.
Its published output uses semantic HTML and CSS without frontend JavaScript.
Does it work with Synced Patterns?
Yes.
Responsive Picture Block supports Synced Patterns with Overrides. This lets you reuse the same responsive image structure while replacing the Desktop, Tablet, and Mobile images on individual pages.
Where does the alt text come from?
The fallback Desktop Image supplies the alternative text used by the final <img> element inside the <picture>.
The alternative sources should represent the same essential subject or information.
Is Responsive Picture Block free?
Yes.
Responsive Picture Block is available free from the official WordPress plugin directory.
Final Recommendation
Use the standard WordPress Image block when the same composition works at every screen width and you only need different resolutions.
Use manually coded <picture> markup when you are developing a custom theme and want complete control over the output.
For Block Editor users who want genuinely different mobile, tablet, and desktop images without writing code, Responsive Picture Block offers the simplest and most maintainable solution.
It removes the need for repetitive custom markup, makes responsive art direction accessible to content editors, and preserves WordPress’s native responsive image capabilities.
Install Responsive Picture Block free → and create your first art-directed image directly in the WordPress Block Editor.