Mobile Image Best Practices for Shopify: Size, Format and Load Time

The Silent Conversion Killer: Unoptimized Mobile Images

Images are the single largest contributor to page weight on most Shopify stores — and page weight is the primary driver of mobile load speed. A store that loads beautifully on a wired desktop connection can be painfully slow on a 4G phone signal, and a store that’s painfully slow loses customers before they see the first product image in full.

The irony is that most of the damage is self-inflicted. Store owners upload their best, highest-resolution product photos — often 3MB+ JPEGs straight from a camera or photographer delivery — because they want the images to look great. And they do look great. On desktop. On mobile, those same images get served at full resolution to a device that can only display them at one-third the size, creating a massive waste of bandwidth that translates directly into loading time and lost sales.

This guide covers everything you need to know about handling images correctly for mobile on Shopify: the right formats, the right sizes, how Shopify’s CDN works, and how to fix the most common mistakes.

How Shopify’s Image CDN Works (And What It Doesn’t Do Automatically)

Shopify’s CDN automatically converts images to WebP format when served to browsers that support it — which is essentially all modern browsers. It also enables automatic compression. This is genuinely helpful, but it only works when your theme uses the correct image URL syntax. If your theme uses raw media URLs without the Shopify image filter, you get the original unprocessed file. If it uses Shopify’s | image_url: width: 800 filter syntax, you get a CDN-optimized, width-constrained, WebP-converted image.

Check your theme code. In Liquid templates, images should be referenced via the image_url filter with explicit width parameters, like: {{ product.featured_image | image_url: width: 800 }}. If you see raw media URLs being constructed manually in your theme, those images are not being CDN-optimized.

The Right Image Dimensions for Every Shopify Template

Different areas of your store need different image dimensions. Serving a 2400px-wide image to fill a 400px-wide collection thumbnail is the single most common image optimization mistake on Shopify. Here are the correct dimensions for each context:

• Collection grid thumbnails (2-column mobile grid): Serve at 400–500px wide. The display size on a 375px phone in a 2-column grid is approximately 175–185px, but serving at 400px gives proper retina density.
• Product gallery main image: Serve at 800–1000px wide for mobile. On a 375px phone, even accounting for 3x retina density, 800px is more than sufficient. The original upload can be 2000px+ for desktop zoom functionality, but the mobile-served version should be constrained.
• Hero/banner images: These span the full width, so serve at 750px for mobile. Use the srcset attribute or Shopify’s responsive image approach to serve different sizes at different breakpoints.
• Cart thumbnail images: 100–150px. These are small visual references — there’s no reason to serve anything larger.
• Blog post featured images: 750px for mobile display. Full-width blog header images don’t need to be wider than the mobile viewport.

Image Format: WebP, AVIF, and When to Use Each

Shopify’s CDN handles WebP conversion automatically, which is the most important format optimization. WebP typically reduces file size by 25–35% versus JPEG at equivalent visual quality, which translates directly to faster load times on mobile. As mentioned above, this only works if your theme is using the correct Liquid filter syntax.

AVIF is the next-generation format that reduces file size by another 20–30% versus WebP, but browser and CDN support varies. Shopify’s CDN does not currently serve AVIF automatically. If you want AVIF optimization today, you’d need to pre-convert images before uploading to Shopify and manage the format conversion workflow manually — which is generally not worth the operational overhead for most stores given how much WebP already helps.

For transparent images (product shots with no backgrounds), use PNG uploaded to Shopify — the CDN will convert these to WebP with transparency preserved. Do not use JPEG for transparent product images; the transparency will be lost and your product images will have white or black backgrounds.

Lazy Loading: Only Load What’s Visible

Lazy loading means images below the fold don’t load until the user scrolls toward them. This is critical for mobile performance because it means a user visiting a collection page with 48 products doesn’t download all 48 product images on arrival — they only download the first 6–8 that are visible in the viewport, and the rest load as they scroll.

Shopify’s Dawn theme and most modern themes implement lazy loading via the HTML loading="lazy" attribute, which has broad browser support. Check your theme’s image tags to verify this attribute is present. The exception: your hero image and above-the-fold product image should NOT be lazy loaded — these should use loading="eager" and ideally a <link rel="preload"> tag to prioritize their loading in the browser’s resource queue.

Responsive Images with srcset: Serving the Right Size for Every Screen

The srcset attribute lets you specify multiple image sizes and let the browser choose the right one based on screen width and pixel density. Instead of serving a 2000px image to both a desktop and a phone, you serve 2000px to the desktop and 750px to the phone.

Shopify’s Liquid makes this straightforward with the image_url filter. A properly implemented responsive image in Shopify Liquid looks like this:

<img src="{{ image | image_url: width: 800 }}" srcset="{{ image | image_url: width: 400 }} 400w, {{ image | image_url: width: 800 }} 800w, {{ image | image_url: width: 1200 }} 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="{{ image.alt }}">

The sizes attribute tells the browser how wide the image will actually be displayed at different viewport widths — this is crucial because without it, the browser makes conservative assumptions and often downloads a larger image than needed.

Image Aspect Ratios and Layout Shift

When images load without explicit width and height attributes, the browser doesn’t know how much space to reserve for them. As images load in, the page layout shifts — a phenomenon measured by Google as Cumulative Layout Shift (CLS). On mobile, layout shift means buttons move while you’re trying to tap them, text reflows while you’re reading it, and the whole experience feels broken.

Fix this by always specifying width and height attributes on <img> tags, even if CSS then overrides the actual display size. The browser uses these to calculate the aspect ratio and reserve space in advance. Alternatively, use the CSS aspect-ratio property on image containers. Shopify’s built-in theme sections typically handle this correctly — the issues arise most often in custom sections and blog templates.

Practical Steps: Audit and Fix Your Shopify Images This Week

Run Google PageSpeed Insights on your homepage and top three product pages. Look for “Serve images in next-gen formats,” “Properly size images,” and “Use lazy loading” in the Opportunities section. These are the three most common image-related findings.

Then check your theme’s Liquid files for image rendering. Search for img src= in your theme code — every instance should be using the image_url filter with an explicit width, not a raw media URL. Instances using raw media URLs are serving unoptimized, full-resolution images.

For the technical implementation of srcset, lazy loading, and CDN optimization, the OneOnic Shopify team handles this as part of our performance optimization service. Book a free performance audit to get a specific report on your store’s image optimization status. You can also see our portfolio of performance-optimized Shopify stores for reference.