Storefront Hero Images: Desktop vs. Mobile Versions

Yes, storefront hero images generally need separate desktop and mobile versions. While a single image can technically be responsive, serving distinct versions ensures optimal visual impact, faster load times, and a better user experience on both device types.

Why One Image Rarely Fits All

The core problem is aspect ratio. Desktop hero images are typically wide and short (like 1920×600 pixels) to fit landscape monitors. Mobile screens, on the other hand, are tall and narrow (like 390×844 pixels). If you use the same image, you have two poor choices: crop it to fit mobile (losing important content on the sides) or show the entire image scaled down (making text unreadable and subjects tiny). Separate versions let you tailor composition, focus, and text placement for each screen.

How Responsive Images Work

Web browsers have built-in support for this via the srcset and sizes attributes in HTML, or the picture element with media queries. These allow you to specify different image files for different viewport widths. The browser then picks the most appropriate file based on the user’s screen size and device pixel ratio. This is standard practice, supported by all modern browsers, and does not require JavaScript.

How to Choose Breakpoints

There is no universal breakpoint, but a common approach is to use a mobile version for screens under 768 pixels wide (which covers most phones and small tablets) and a desktop version for anything larger. Some sites add a tablet version for 768–1024 pixels. The key is to test your actual layout: where does the text wrap awkwardly? Where does the image start to look cropped? Use browser developer tools to simulate different devices and adjust breakpoints accordingly.

Common Problems and Mistakes

Only scaling down: Simply resizing the same image for mobile makes text tiny and subjects distant. Always re-compose for the narrower frame.
Ignoring file size: A 2MB desktop image served to mobile users slows page load. Optimize each version separately; mobile files should be significantly smaller.
Hiding content: If you use CSS to hide parts of an image, you still load the full file. Use picture or srcset to load only the needed file.
Forgetting text: Hero text should be part of the HTML, not baked into the image. This keeps it crisp on all screens and accessible to screen readers.

Costs and Performance Trade-offs

Creating two versions adds design and production time. You need to export, optimize, and maintain multiple files. However, the performance benefit is significant: a mobile-optimized hero can be 50–70% smaller than a desktop one, directly improving load times on cellular networks. Faster pages also tend to rank better in search results and reduce bounce rates.

Alternatives to Separate Files

If maintaining multiple files is not feasible, consider these alternatives:

SVG with responsive text: For simple graphics, an SVG scales perfectly and text can reflow.
CSS background images: Use background-image with background-size: cover and set different images via media queries. This works well but has accessibility downsides (no alt text).
Art-directed cropping with a single file: Use object-fit and object-position in CSS to crop a single image differently for mobile. This saves file management but still loads the full image.

Frequently Asked Questions

Can I just use one image and let CSS crop it?

Yes, you can use CSS object-fit: cover to crop a single image, but you will still load the full desktop file on mobile, which hurts performance. Also, the crop may cut off important parts of the image. Separate files are the better practice for speed and control.

What is the ideal hero image size for mobile?

There is no single ideal size, but a common recommendation is 750×1334 pixels (or similar aspect ratio) for high-DPI phones. The file size should be under 200KB for a typical hero, ideally under 100KB for mobile. Always compress images.

Do I need a tablet version too?

Not always. Many sites work fine with just desktop and mobile versions, letting the mobile version serve tablets up to 768px. If your analytics show significant tablet traffic and the layout looks awkward, add a tablet breakpoint.

How do I test if my hero images are loading correctly?

Open your browser’s developer tools (F12), go to the Network tab, and reload the page while simulating a mobile device. Check that the mobile image file is requested, not the desktop one. Also use the device toolbar to visually inspect the layout.

Will using separate images hurt my SEO?

No, it can help. Search engines like Google consider page speed as a ranking factor, and serving optimized images improves speed. Just ensure each image has descriptive alt text and that you use proper markup like srcset.

What if my hero is a video instead of an image?

Videos have the same issue. Serve different video files (or at least different poster images) for mobile and desktop. Use the video element with multiple source elements and consider using preload="none" for mobile to avoid downloading large files.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →