Shopify Image Sizes: Product Photos, Banners, and Mobile Cropping Explained

Key takeaways

• Shopify documents product image sizes, not banner sizes. Product images can be up to 5000 x 5000 px and must be under 20 MB, with 2048 x 2048 px suggested for square photos.¹ Banner dimensions depend on your theme.
• For a full-width desktop banner, 3840 x 1600 px is a safe upload. Dawn never requests a banner wider than 3840 px.²
• Banners crop on mobile because the box changes shape. The proper fix is a separate mobile image, which Horizon supports and Dawn does not.³
• Blurry images are almost always a width problem. Either the file is too small for the space at 2x, or the theme asks the CDN for too small a version.

A table of Shopify image sizes answers half the question. The other half is why a banner exported at the right size still gets cut off on a phone. This guide gives you the table first, then explains what Shopify does with the file after upload, why banners crop, and how to fix blur.

Every number is labelled documented (Shopify publishes it) or recommended (we derived it from theme code), so you know which are rules and which are judgment.

Why you can trust us

We have been in the Shopify space for over four years and have worked with hundreds of Shopify brands on their storefronts. Jacques has over 15 years of development experience. We build Fudge, an AI storefront editor with a 4.9 rating on the Shopify App Store and Built for Shopify status. The numbers here were read from Shopify’s documentation and the Dawn and Horizon theme source on the day of writing.

What are the right Shopify image sizes in 2026?

The hard upload limits

• Product and collection images: up to 5000 x 5000 px or 25 megapixels, and under 20 MB.¹
• Images uploaded for your theme: Shopify’s theme image page lists 20 megapixels and 20 MB as its upload limits.⁶ The two figures disagree, but nothing in the table passes 7 megapixels, so both are far above what you need.
• What the CDN serves: the image_url filter accepts a width or height up to 5760 px and never enlarges an image beyond its original dimensions.⁷

Shopify image sizes versus what shoppers download

The file you upload is not the file a shopper downloads. Shopify’s CDN generates smaller versions on request, in whatever modern format the browser supports, including WebP and AVIF.⁶

The theme decides which version is requested. It lists several widths of the same image in a srcset attribute, and a sizes attribute tells the browser how wide the image appears on screen. The browser picks the smallest version that fills that space on that device.

Shopify’s image_tag filter writes this markup, including the width and height attributes that stop the page jumping as images load.⁷ For how the built-in CDN compares with third-party options, see our Shopify image CDN comparison.

Why a 2x image matters and a 6000 px one does not

Phones and many laptops pack two or three device pixels into every CSS pixel. A product card that is 400 px wide on screen needs an 800 px image to look sharp at 2x.

Going beyond 2x buys nothing, because the theme sets the ceiling. Dawn’s banner tops out at a 3840 px request and its product gallery at 1946 px.² A 6000 x 3375 px banner is also 20.25 megapixels, which is over the theme image limit.

Shopify banner size: why does my banner crop on mobile?

Shopify publishes no banner size because the banner is a box whose shape is set by the theme section, not by your image. The section scales your image to cover the box and trims what does not fit.⁶

Dawn makes the arithmetic easy to see. With Height on Medium and default settings, its Image banner is at least 560 px tall on desktop and the image area is 340 px tall on mobile.²

• On a 1440 px wide laptop, the box is 1440 x 560 px, roughly 2.6:1.
• On a 390 px wide phone, the box is 390 x 340 px, roughly 1.15:1.

A 2.4:1 desktop banner covering that phone box shows only about the middle 48% of its width. A 16:9 image shows about 65%, but loses around 30% of its height on the laptop.

No single file fits both boxes. There are four ways to deal with that. If the banner is not set up yet, start with how to change the homepage banner in Shopify.

Fix 1: set a focal point

A focal point tells the theme which part of the image must stay in frame. Click the image in Content → Files, in the theme editor, or in a product’s Media section, click the important area or drag the blue dot, and save.⁶

Each image has one focal point, and it applies everywhere the image is used. It works on Dawn 7.0.0 and later and on every Horizon theme.

A focal point chooses what survives the crop. It does not stop the crop.

Fix 2: let the section adapt to the image

In Dawn, set the banner’s Height to Adapt to first image. The section takes the image’s own aspect ratio, so nothing is trimmed.

The trade-off shows on mobile: a 2.4:1 banner on a 390 px phone becomes a strip about 160 px tall.

Fix 3: keep text out of the image

Text baked into the artwork is cropped along with everything else and shrinks to unreadable on a phone. Shopify’s guidance is to leave text out of slideshow and background images and add it in the theme editor.⁶

Live text stays the right size at every width, wraps on its own, and is readable by search engines and screen readers. If you must bake text in, keep it inside the middle 40% of the width.

Sale artwork is the usual offender. Our guide to the Black Friday homepage covers what else to change that week.

Fix 4: use a separate mobile image

This is the proper fix: a wide image for desktop and a 4:5 portrait image for phones, each composed for its own box.

Horizon supports this natively. Its Hero section has a Show different media on mobile checkbox that reveals mobile image pickers, and the theme outputs a picture element that swaps the source below 750 px.³

Dawn does not. Its Image banner has two pickers, but Image 2 sits beside Image 1 on desktop and stacks on mobile. It is not a mobile alternative.²

A common workaround is two banner sections with CSS hiding one per screen size. Shopify’s performance guidance recommends a picture element instead, so the browser downloads only the matching image.⁸

The Fudge route. Fudge adds the missing setting and the responsive markup to your theme’s banner section, so you only supply the two image files. Tell Fudge:

“Add a separate mobile image setting to my homepage banner so phones show a 4:5 portrait crop and desktop keeps the wide version. Keep the heading as live text over the image.”

You get native theme code as a draft you can preview on both screen sizes before publishing.

The code, if you are adding it yourself

Duplicate your theme first, then go to Online Store → Themes → ⋯ → Edit code and open the banner section. Add an image picker to the section schema:

{
    "type": "image_picker",
    "id": "mobile_image",
    "label": "Mobile image (4:5)"
}

Then output both images inside one picture element:

{%- assign desktop_image = section.settings.image -%}
{%- assign mobile_image = section.settings.mobile_image -%}

<picture>
  {%- if mobile_image != blank -%}
    <source
      media="(max-width: 749px)"
      srcset="
        {{ mobile_image | image_url: width: 800 }} 800w,
        {{ mobile_image | image_url: width: 1200 }} 1200w,
        {{ mobile_image | image_url: width: 1600 }} 1600w
      "
      sizes="100vw"
      width="{{ mobile_image.width }}"
      height="{{ mobile_image.height }}"
    >
  {%- endif -%}
  {{
    desktop_image
    | image_url: width: 3840
    | image_tag:
      widths: '750, 1100, 1500, 2000, 3000, 3840',
      sizes: '100vw',
      loading: 'eager',
      fetchpriority: 'high'
  }}
</picture>

Four things to know:

• loading: 'eager' and fetchpriority: 'high' belong only on the first banner on the page. Further down, use loading: 'lazy' and drop the priority hint. See our hero banner eager loading fix.
• The focal point comes from the desktop image. image_tag writes it as an inline object-position style, so frame the mobile file by cropping it yourself.
• Check the CSS still reaches the image. Dawn styles the image as a direct child of its media wrapper, so those rules need to target the image inside the picture element.
• In Dawn, the box needs updating too. With Adapt to first image selected, the rule at the top of image-banner.liquid reads the desktop image’s aspect ratio for both screen sizes. Point the mobile rule at the mobile image.

Shopify product image size: keeping grids consistent

A collection grid looks tidy when every featured image shares one aspect ratio. Shopify’s documentation makes the same point: mixed ratios display at different sizes side by side.¹

Pick one ratio and export everything to it: 2048 x 2048 px for square, or 2048 x 2560 px for 4:5 portrait, which suits apparel and tall products.

The theme can enforce the ratio. In Dawn, the Product grid, Featured collection and Collection list sections each have an Image ratio setting with three options: Adapt to image, Portrait and Square. Portrait is 4:5 in the code.²

Portrait and Square crop to fill the card, from the centre unless a focal point is set. Adapt to image shows each photo uncropped, which is where uneven rows come from.

Dawn has no 2:3 option. A 2:3 photo in a Portrait card loses about 17% of its height, so check that heads and hems survive. For swapping files, see how to update product images in Shopify.

The Fudge route. If your theme’s card setting does not offer the ratio you want, Fudge changes the card markup and CSS. Tell Fudge:

“Make all product card images on collection pages a 4:5 portrait ratio, cropped from the centre, without stretching.”

You get the change as a draft to review. The photos still need enough room around the product to survive that crop.

Why do my Shopify images look blurry?

Blur means the browser was given fewer pixels than the screen needed. Work through this list in order:

1. Is it only blurry for a moment? Shopify notes that images can appear soft and then sharpen as the full version loads. That is expected.⁶
2. Is the source file big enough? Take the widest the image appears on screen and double it. A 1200 px file in a full-width banner falls short on any laptop.
3. What did the browser load? Right-click the image, choose Inspect, and hover over the image URL. Chrome shows the rendered size and the intrinsic size. On a 2x screen, if intrinsic is smaller than rendered times two, that is the blur.
4. What width did the theme ask for? Shopify CDN URLs carry a width= value. If your file is 3000 px wide and the URL says width=1100, the theme’s srcset or sizes is the cause.
5. Was the file enlarged or heavily compressed before upload? Scaling a small image up adds pixels, not detail, and the CDN never enlarges it either.⁷
6. Is there text in the image? Baked-in text softens whenever the image is scaled.

Cases 2, 5 and 6 are fixed by exporting a better file. Case 4 is a theme fix.

The Fudge route. A wrong sizes value or a srcset that stops too low is a code change inside the section. Tell Fudge:

“My hero image looks blurry on desktop. Check what widths the section requests and fix the srcset so large screens get a sharp image.”

Fudge edits how the section requests the image and returns it as a draft. The image files still have to be exported at the right size by you - Fudge fixes how the theme requests and crops them. The Shopify store editor page shows what else it edits.

Which file format and weight should you upload?

Upload JPEG for photographs and PNG for logos, icons and flat graphics with transparency. That is Shopify’s guidance for theme images.⁶ Its product media page ranks PNG first for product photos, so either works there.¹ WebP and HEIC uploads are accepted too.

The upload format matters less than it used to, because the CDN converts on delivery to WebP or AVIF where the browser supports them.

On weight, Shopify’s position is that images do not need compressing before upload and that you should upload the best quality you can.⁶ Shoppers download the CDN’s resized version, not your original.

So the sensible target is dimensions, not kilobytes. Export at the pixel sizes in the table at high quality, stay under the 20 MB cap, and let the CDN compress. Squeezing a JPEG hard first only means it gets compressed twice.

If you still want smaller originals, our guide to compressing images in Shopify covers the tools.

FAQ