Shopify image sizes for products, banners, logos and favicons

The short answer: upload one large image

Shopify doesn't want a different file for every screen. Your theme asks Shopify's CDN for the image at several widths and the browser downloads the one that fits the screen. So the job at upload time is to give the theme a source big enough for its largest request, in the aspect ratio the section shows, and inside Shopify's limits. Shopify says it plainly: "Always upload the best quality images that you can provide"².

The one documented pixel size is for products: "For square product images, a size of 2048 x 2048 px usually displays best"¹. Everything else on this page comes from Shopify's help pages or from reading the source of Shopify's two reference themes, Dawn 16.0.0 and Horizon 4.1.5¹¹¹². Third-party themes set their own sizes. If you use one, its documentation wins.

Shopify's upload limits

The pages disagree on megapixels. Product media and Files allow 25 MP. The "Uploading images" page says images "can't exceed" 20 MP or 20 MB, and its own example shrinks a 5,000 × 5,000 px (25 MP) image to 4,000 × 4,000 (16 MP)². Staying under 20 MP clears every page. A 4,000 × 4,000 square or a 5,000 × 4,000 photo does. None of the sizes recommended here come close.

Sizes by image type

"Upload" is what we recommend you give Shopify. "What the theme requests" is the largest width Dawn or Horizon asks the CDN for, read from the theme code. Where a theme leaves the ratio to you, the table says so.

Every row is a preset in the Shopify image resizer, which crops or pads to these sizes in your browser.

Shopify banner size: why there's no single number

Banner height is a theme setting, not an image property. Dawn's image banner has four heights: "Adapt to first image", Small, Medium and Large. With Adapt, the section takes your image's own aspect ratio, so a 3:1 image makes a 3:1 banner and nothing is cropped. With the fixed heights, the section has a minimum height of 420, 560 or 720 px on screens 750 px and wider (42, 56 and 72rem at Dawn's default type scale), and the image fills the box with object-fit: cover, centred¹¹.

That's where banner images get their edges cut off. On a 1,440 px-wide laptop, Dawn's Medium banner is a 1,440 × 560 box, about 2.6:1. A 16:9 image fills the width, and only 69% of its height shows. Large (1,440 × 720) shows 89%. A 3:1 image in the same Medium box keeps its full height and loses a little at the sides: 86% of the width shows. On phones the box gets taller relative to its width, so the sides go instead.

Horizon sizes its hero by screen height instead: Medium is 55% of the viewport height from 640 px wide and 65% from 960 px. It can also take a separate mobile image¹². The practical rules for both themes:

• Keep text and faces away from the edges. Shopify's advice is that slideshow and background images "shouldn't have text in them", because the theme may move or crop it². Put the headline in the section's text settings instead.
• Set a focal point on the image in the admin. Shopify keeps focal points in frame on Dawn 7.0.0 and later and on the Horizon family of themes².
• If you want exact control, use "Adapt to first image" and crop the image to the ratio you want before uploading.

Product images: one ratio for the whole catalog

Shopify's advice is to use the same aspect ratio for every product image so they display at the same size¹. That matters most in collection grids. Dawn's product cards default to "adapt", so each card takes its image's shape and a mixed catalog gives a ragged grid. Horizon's product cards default to portrait, a 4:5 frame¹¹¹².

Square at 2,048 × 2,048 is the safe default, and it's the size Shopify names for product grids too⁶. If your theme shows portrait cards, 2,048 × 2,560 (4:5) fills them without cropping. For products that aren't the right shape, pad them onto a plain background rather than cropping the product. The resizer's "fit" mode does exactly that.

Logo and favicon

Shopify's theme settings page says "Logo images have a maximum width of 300 px"⁵. That's Dawn: its logo width slider runs from 50 to 300 px (default 100), and the header asks for the logo at 1x, 1.5x and 2x that width, so a 600 px-wide file stays sharp at the largest setting on high-density screens¹¹. Horizon works the other way. It sets logo height, 12 to 100 px (default 36 on desktop, 28 on mobile), and requests 1x, 2x and 3x, so give it a file at least 300 px tall¹². Use a PNG with a transparent background so the logo sits on any header colour.

For the favicon, Shopify calls 16 × 16 or 32 × 32 px ideal and reduces larger images to 32 × 32⁴. Dawn and Horizon both request it at 32 × 32. Start from a simple square mark; a full wordmark is unreadable at that size. The favicon setting isn't available on the Starter plan⁴.

How Shopify resizes and serves images

Themes don't link to your original file. They call the image_url filter with a width, and Shopify generates that size on its CDN, up to 5,760 px⁸. Dawn's product gallery, for example, asks for twelve widths between 246 and 1,946 px:

{{
  media.preview_image
  | image_url: width: 1946
  | image_tag:
    class: image_class,
    loading: lazy,
    sizes: sizes,
    widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
}}

image_tag turns that into a srcset, and the sizes attribute tells the browser how wide the image will display⁹. The browser then downloads one width, not your 2,048 px original. Shopify's own theme guidance is that four to six widths are usually enough, and that without sizes the browser downloads the largest image¹⁰.

The format is negotiated too. Shopify "automatically detects which image formats are supported by the client (e.g. WebP, AVIF, etc.)" and picks one per request⁸. You don't need to upload WebP to get WebP. The full picture, including when to force a format, is in WebP, AVIF and Shopify's image pipeline.

So a large source doesn't slow the page. What slows it is a theme that requests too wide an image or leaves out sizes, and a hero image that loads late. If your homepage banner is the slowest thing on the page, the LCP guide covers preloading and fetchpriority.

Which format to upload

Shopify's own pages point different ways. Product media names PNG as "the best file type for most product images", followed by JPEG¹. "Uploading images" says to use JPEG for product images and slideshows², and the blog help recommends JPEG for post images⁷. Because Shopify re-encodes on delivery, the upload format mostly affects the upload itself. Our rule: JPEG at high quality for photos, PNG for logos, graphics and anything that needs transparency. A photo saved as PNG is usually several times the size of the same photo as a high-quality JPEG, which matters once you're near the 20 MB limit.

Alt text and file names

Name files before you upload them. Google says the file name gives it "very light clues" about the image, and its own example prefers my-new-black-kitten.jpg to IMG00023.JPG¹³. For a product that means something like linen-shirt-navy-front.jpg. The resizer names its output from your original file plus the new size, so rename first. Alt text matters more: describe what the photo shows, and don't stuff keywords into it, which Google says "may cause your site to be seen as spam"¹³. The Shopify side of both is in alt text and image file naming.

FAQ