Shopify Image Size and Format: What to Upload for Fast Stores

Your collection page takes four seconds to paint, half your product photos are 4000 px tall and the other half are 900 px wide, and the thumbnails all crop differently. The fix is not a new theme or another app — it's deciding on one Shopify image size and one source format, then preparing every file the same way before it ever touches the admin.

Good news: Shopify's CDN does a lot of the heavy lifting. Bad news: it cannot undo a 12 MB PNG screenshot of a product photo. Here's what to upload and how to batch-prepare it in about two minutes.

Shopify already converts your images to WebP and AVIF

When you upload a product photo, Shopify stores the original and serves resized, re-encoded copies from its CDN. Modern browsers that advertise support get WebP (and AVIF where available); older ones fall back to your original format. You do not need to upload .webp files yourself, and you do not need an app to "convert images to WebP for Shopify".

The CDN also resizes on demand. A theme that requests a 400 px thumbnail gets a 400 px file, not your 2048 px master scaled down in the browser. That is why the single most useful thing you control is the source file: its dimensions, its format and whether it contains junk the CDN has to carry forward.

• You control: dimensions, aspect ratio, format, compression of the master, colour profile, file name.
• Shopify controls: the delivered format (WebP/AVIF), the delivered size, caching and global distribution.

The best image size for Shopify: 2048 × 2048 square

Shopify's own recommendation for product photography is 2048 × 2048 pixels, square. That is the sweet spot for three reasons:

1. It is large enough for the zoom feature on most themes without looking soft on a Retina display.
2. Square means every thumbnail, grid tile and cart line item crops identically — no more floating products or chopped-off shoes.
3. It is small enough that uploads are fast and your originals stay manageable.

Hard limits worth knowing: Shopify accepts images up to 20 MP and 20 MB, but you should never get close. A clean 2048 px JPEG at quality 85 is typically 200–500 KB. If your files are over 1 MB, something is wrong with the format or the compression, not the dimensions.

For other slots, keep the same discipline: hero/slideshow banners around 2000–2400 px wide, collection banners around 1600–2000 px wide, and logos as SVG or a 2× PNG of the rendered size.

Why uploading huge PNGs still makes Shopify images slow

"Shopify converts everything anyway" is half true. Three things still bite you:

• PNG is a lossless format built for flat graphics. A 24-bit PNG of a photographed sweater can be 8–12 MB where the equivalent JPEG is 350 KB. The CDN's derivative is generated from that original, and photographic PNGs transcode worse than photographic JPEGs.
• Oversized masters waste the first render. A 6000 px original uploaded to a theme that requests a 1200 px image is pure overhead in storage, upload time and bulk-edit operations — and if any template ever requests the full-size URL, you ship a huge file to a phone.
• Inconsistent aspect ratios break layout. Mixed 4:5 and 16:9 sources force the theme to letterbox or crop, which is the real cause of "my product images look different sizes". Cumulative layout shift gets worse too.

Keep PNG only where you genuinely need transparency — logos, badges, packshots on a transparent background for a dark theme. Everything photographic should be JPEG.

Batch-prepare your product photos with ImageMagick

Say you have a folder of camera files: sweater-front.png at 4480 × 6720 and 14 MB, sweater-back.png, sweater-detail.png. This one command turns the whole folder into upload-ready 2048 px squares on a white background:

magick mogrify -path ./ready -format jpg \
  -resize 2048x2048 \
  -background white -gravity center -extent 2048x2048 \
  -quality 85 -strip -colorspace sRGB \
  *.png

What each flag earns you: -resize fits the longest edge to 2048 without distortion; -extent pads the rest to a perfect square so every crop matches; -quality 85 is visually indistinguishable from 100 at a fraction of the weight; -strip removes EXIF and thumbnails; -colorspace sRGB stops the washed-out look you get when an Adobe RGB file hits a browser.

Check the result before uploading:

magick identify -format "%f %wx%h %[size]\n" ready/*.jpg
# sweater-front.jpg 2048x2048 312KB
# sweater-back.jpg  2048x2048 287KB

Want to see what Shopify's CDN will roughly produce? Encode one file yourself with cwebp and compare:

cwebp -q 80 ready/sweater-front.jpg -o test.webp

Upload the JPEG, not the WebP — this is only a sanity check that your source compresses well.

No command line? Convert and resize in the browser

If installing ImageMagick isn't happening today, drop the files into our PNG to JPG converter, grab the JPEGs and upload those. It handles the format change and flattens transparency to white, which is exactly what you want for photos going into a white-background product grid — then square them in your theme's crop settings or your photo editor.

For HEIC phone shots, TIFF files from a photographer or anything else that Shopify won't accept cleanly, the wider image converter hub covers the other directions.

One last habit that costs nothing: name files descriptively before upload. wool-crew-sweater-navy-front.jpg becomes part of the image URL and feeds your alt text workflow; IMG_4471.jpg does not.

Your upload checklist in four lines

• Product photos: 2048 × 2048 JPEG, quality 85, sRGB, stripped, under ~500 KB.
• Transparency needed: PNG, same dimensions, only for logos and badges.
• Never upload WebP or AVIF — Shopify generates those for you.
• Keep one aspect ratio across the entire catalogue; that alone fixes most "inconsistent crop" complaints.

Re-export your twenty worst offenders first — the heaviest files on your best-selling collection page. That's usually where the measurable speed win lives.

FAQ

Should I upload WebP to Shopify? No. Shopify serves WebP and AVIF automatically from its CDN based on browser support. Upload JPEG (or PNG for transparency) and let the platform handle delivery formats.

What is the maximum image size Shopify allows? Up to 20 megapixels and 20 MB per file. Practically, stay at 2048 px and a few hundred kilobytes.

Does replacing images break my product URLs? Product and collection URLs are unaffected. The image CDN URL changes when you replace a file, so re-check any hard-coded image links in custom pages or email templates.

Will JPEG quality 85 look worse than my originals? On product photography, no — the difference is invisible at screen sizes while the file is often 10× smaller. For flat graphics with hard edges and text, use PNG instead.

Do I still need an image optimization app? Usually not for format conversion. Apps can help with bulk alt text and re-cropping legacy catalogues, but the CDN already does the WebP/AVIF work.

What size should Shopify banner images be? Around 2000–2400 px wide for full-width hero slides, saved as JPEG. Keep the focal point centred, because themes crop banners aggressively on mobile.