help1
shopify image sizesshopifypage speedhorizon

The Shopify Image Sizes Advice You Should Ignore

Most Shopify image sizes advice ignores what the CDN already does for you. Here is what is actually worth worrying about, and what is not.

help1 Team
The Shopify Image Sizes Advice You Should Ignore

Most of the Shopify image sizes advice on community threads is solving a problem the CDN already solved. What is worth your attention is the image_tag Liquid filter, the missing width and height attributes that cause layout shift, and the 20-megapixel upload ceiling. The pixel count of your source file is usually fourth on that list.

The most-asked Shopify Community question about product image dimensions gets answers between 500x500 and 2048x2048. That is a 16x range in pixel area, and both numbers come from people who sound confident. We pulled a dozen of these threads and they were not from different decades. In a March 2025 thread on photo sizing, "use square 500px as per your theme" sits one reply above "2048 x 2048 is what I see as most often recommended." That gap is not a rounding error.

Neither answer is wrong, exactly. They are both responding to a question that has stopped mattering for most merchants since Shopify's CDN started resizing on delivery. We see merchants spend a Saturday afternoon re-cropping every product photo to hit some recommended pixel target, then watch the speed score not move. The pre-resize work itself is fine. The assumption that the resize has to live on the merchant's hard drive is what has gone stale.

So we are going to take a position. Stop using "what size should I upload" as your starting question. It is the wrong frame, and three things actually worth fixing are sitting behind it.

Everyone has a different number, and that has been true for four years

A December 2023 Shopify Community thread on Dawn theme image dimensions got two responses the same day. PageFly-Theodor laid out a careful table: banners 1600x1050, products 700x700, collections 550x550, blog posts 720x1080, general optimization 2048x2048. PaulNewton said dimensions "vary wildly for different parts of the theme" and that "there's no central code location for size constants." Both are technically right. PageFly-Theodor's numbers are defensible defaults. PaulNewton's point is that Shopify does not publish those numbers.

You can find a Shopify Staff post from 2021 recommending 1500px or less on desktop and 960px or less on mobile. You can find community threads from 2022 with the 500px answer. You can find threads from April 2026 with the 2048px answer. None of these is dishonest. They are people answering at different times for different page zones with no central source of truth, and most do not say which page zone they have in mind. The Shopify image sizes debate has been recycling on the same loop since 2022.

If you want a starting target without the history lesson, anywhere between 1500 and 2048 on the long edge for product photos is fine. The bigger story is that the number is not really what moves your speed score.

Shopify's CDN is doing the resize the community is telling you to do by hand

Every image on the Shopify CDN responds to a ?width=N URL parameter. Append ?width=400 to a CDN image URL and the CDN serves a 400px-wide version. The full source file is not downloaded. A merchant who uploads a 2048px hero image will see it served at 750 or 800px on mobile, because the theme's Liquid code asks for that width through the image_url filter.

We watched a thread in May 2025 where one member warned that 2048x2048 product images "require downloading a 1-2MB file per visitor." Three other members in the same thread corrected that. The theme resizes; the visitor does not pay the source-file cost. The three were right. But the warning version is the one that gets repeated, and it is the version that pushes merchants to spend their afternoon batch-resizing in Photoshop instead of fixing the things that actually slow their pages down.

There is one wrinkle worth knowing. The CDN generates each new size on demand at first request and caches it after that. That is why a brand-new image or a freshly published theme can feel slow on the first request and snap to normal a day later. If you run PageSpeed Insights five minutes after publishing a theme, you are testing the cold cache. Wait a day and run it again. We have caught ourselves chasing a ghost regression here more than once before remembering to do that.

What we tell merchants to actually fix instead

When a merchant asks us to look at image performance, four things show up before "your source file is too big." Most of what people call Shopify image sizes problems are really one of these:

  1. Missing width and height attributes on <img> tags. This is what causes layout shift when an image loads. Browsers need the dimensions in the markup so they can reserve space before the bytes arrive. A March 2023 Dawn merchant reported a CLS of 0.72 across 782 pages with 90% mobile traffic, well above the 0.1 "Good" threshold, and the leading cause was missing dimension attributes, not file size. Recent Dawn writes them for you through image_tag. On older themes or custom Liquid, you have to add them.

  2. Custom Liquid still using the older img_url filter. If your theme has {{ image.src | img_url: '800x' }} patterns, swap them for {{ image | image_url: width: 800 | image_tag: widths: '400, 800' }}. That single call produces a srcset, adds lazy loading where appropriate, and writes width and height attributes. It does the three jobs the community arguments are usually about. Shopify's own performance blog explicitly warns against adding more than a couple of widths entries because too many srcset candidates hurt CDN cache hit rates. The instinct to add five breakpoints is the opposite of what the platform wants.

  3. The HTML editor silently breaking your CDN resize URLs. If you have ever hand-pasted a URL like ?width=700&crop=center into a page or blog post, the admin editor likely re-encoded the ampersand to &amp; on save. The CDN reads the malformed URL, ignores the parameters, and serves the original full-size image. The page still loads. You see nothing wrong. The image is just enormous. The cleanest workaround is to use a single-parameter URL in content pages, or reference images through Liquid in a theme file instead of pasting CDN URLs into the editor.

  4. The megapixel ceiling, which is separate from the file size ceiling. Shopify accepts up to 20MB and up to 20 megapixels, and these are independent caps. A 1MB image at 6000x4000 is 24 megapixels and will fail to upload, even though the file is well under 20MB. If a merchant tells you their image upload just doesn't work with no error message and the file is small, this is usually it.

If you want a second pair of eyes on what your store is actually serving rather than what it stores, help1's expert chat is free for the first fifteen minutes, and a network-tab walkthrough fits inside that window.

When pre-sizing your source files does still matter

We owe the conventional advice this much. It is not always wrong. It is narrower than the threads make it sound.

Pre-sizing helps when the source file is larger than the maximum delivered width by an order of magnitude. A 4472x4472px source for a thumbnail that never displays above 600px is wasted upload storage and slows down your admin. A 2048px source for a hero that can display at 1600px on a 4K monitor is fine. The check is in DevTools: open the Network tab, filter to images, and compare the served width to the source width. If the gap is 4x or more across the board, resizing your sources is worth doing. If it is 2x or less, you are fine.

Pre-sizing also matters for Horizon's hero image block, but for a different reason. Horizon uses CSS object-fit to fill the hero container, and a portrait crop shoved into a wide hero will visibly clip from the top and bottom. We have seen merchants follow the 2048x2048 advice, upload square images into a 16:9 hero, and end up with their product cropped off-center on every desktop browser. The fix is framing. Keep important visual content inside the central 50% of the frame, and upload landscape (around 1920x1080) for desktop with a separate portrait file for mobile if your theme supports it.

If you are migrating to Horizon and your hero looks correct in the theme editor but wrong in the live browser, that is the same problem, and a 4000-pixel source will not save you. Our breakdown of how hero images break Shopify mobile LCP covers the LCP side of that story. The cropping side is theme CSS behavior, and Shopify image sizes guidance has nothing to say about it.

The hot take, then: the "what size should my Shopify images be" question is the wrong starting point because the people asking it have already accepted that Shopify image sizes are a problem they have to solve at upload time. The CDN handles the resize. What the merchant actually owns is the image_tag call, the layout-shift fix, the megapixel cap, and the editor's ampersand bug. Fix those and the file size question stops mattering for almost everyone.

Still stuck? Talk to an expert.

Our vetted Shopify experts can fix this issue for you in a live session. $39 per session. Your first 15 minutes are free.