Shopify Image Sizes: Why Under 500 KB Matters

Use 2048 by 2048 pixels as your Shopify master and keep each delivered file under 500 KB. Shopify permits images up to 20 MB and 4472 pixels square, but those numbers describe what the platform tolerates rather than what a fast storefront needs.

The 20 MB figure is the number most guides quote, and it is the wrong one to design around. What Shopify permits and what Shopify rewards are different things. A product page carrying 8 images at 3 MB each is a 24 MB page, and mobile shoppers leave before it finishes loading.

Shopify image sizes by placement

Product images should be square at 2048 pixels, while banners, collection tiles and logos each need their own dimensions. Using one size everywhere produces stretched banners and cropped collection images.

Themes crop images differently, and a banner that looks correct on a desktop preview is frequently cut through the middle on a phone. Keep the important part of a banner in the central 60 percent so no theme can crop it away.

Why 500 KB is the number that matters

Page weight decides how fast a storefront loads, and images account for most of that weight on a typical product page. A page under 2 MB in total loads comfortably on mobile data, while a 24 MB page does not.

Shoppers on phones make up the majority of traffic for most stores, and mobile connections vary far more than office broadband. Every second of load time costs conversions, which makes image weight a revenue question rather than a technical one. Reducing 8 product images from 3 MB to 300 KB removes 21 MB from the page and changes nothing a shopper can see.

Does Shopify compress images for you

Shopify serves resized variants through its content delivery network (CDN) and converts to WebP automatically for supporting browsers. The platform does a reasonable job, and it works from whatever you upload.

That last point is the limitation. Shopify generates smaller variants from your original, so a poorly compressed 5 MB upload produces larger variants than a well prepared 400 KB upload would. Compressing before upload also reduces your own storage use and makes bulk imports far faster, since a 500 product import moves 200 MB instead of 2.5 GB.

How to prepare images for Shopify

To produce a fast product page, follow these 6 steps.

1. Export a square master at 2048 by 2048 pixels from your photo editor.
2. Resize any banner or lifestyle image to its actual display width, doubled for high density screens.
3. Convert photographs to WebP, or keep JPG if your workflow depends on it, since Shopify converts either way.
4. Compress to a target size, using 300 KB for product photographs and 400 KB for banners.
5. Name files by product code and view so a bulk CSV import maps images to the right products.
6. Upload and check the product page on a phone rather than only on a desktop preview.

WebP on Shopify

Shopify has served WebP natively for years and converts uploaded JPG and PNG files automatically for browsers that support it. Uploading WebP directly is accepted and gives you control over the compression rather than leaving it to the platform.

WebP reaches the same visual quality as JPG at 25 to 35 percent smaller file sizes, which is worth having on a page carrying 8 photographs. The one case to avoid is uploading WebP where the file will later be downloaded by a supplier or sent to a print shop, since those destinations still expect JPG.

Fixing a slow product page

Start with the largest image on the page, because the biggest single file usually accounts for most of the delay. On a Shopify storefront that is normally the homepage banner or the first product photograph.

• Resize before compressing. A 4000 pixel banner in a 1920 pixel slot wastes 75 percent of its data.
• Reduce the number of images above the fold. A 12 image gallery loading at once delays everything else.
• Check that lazy loading is on for images below the fold, which most modern themes handle by default.
• Replace animated GIF files with video, since a short GIF frequently weighs more than the entire rest of the page.
• Audit the apps. Review widgets, popups and trust badges often load their own images and scripts.

Alt text and image file names

Write alt text describing the product for shoppers using screen readers, and name files after the product rather than after the camera. A file called IMG_4821.jpg tells search engines and shoppers nothing.

Use a pattern such as navy-linen-shirt-front.jpg, which stays readable in a bulk import, sorts predictably in a folder and describes the image in search results. Alt text should say what the photograph shows, including colour, material and view, without repeating the product title word for word. Both fields take seconds per product and improve how a store appears in image search.

Testing changes before rolling them out

Process 5 products first, publish them, and check the pages on a real phone before running the full catalogue. A settings mistake applied to 500 products costs far more time to undo than to prevent.

Check 3 things on the test products. Confirm the images look sharp at full zoom, since shoppers use zoom heavily on clothing and jewellery. Confirm the collection grid shows consistent crops. Confirm the page loads quickly on mobile data rather than on office broadband. Only then apply the same settings to everything else.

Image apps versus doing it before upload

Compression apps charge monthly to solve a problem you can solve once before uploading. The apps are useful when a store receives constant new images from many people and nobody controls what gets uploaded.

A store with a stable catalogue and one person managing images does not need a recurring fee. Compressing the library once and compressing new photographs as they arrive achieves the same result. Reconsider when the catalogue grows past what you can process by hand, or when several staff upload images without following a specification.

Common Shopify image mistakes

Uploading straight from the camera is the most expensive mistake, because a 24 megapixel photograph carries 10 times the data a storefront can display. The platform accepts the file, and the page pays for it.

Two other mistakes appear regularly. Mixing image shapes across a collection produces a ragged grid, since themes crop to square and a portrait photograph loses its top and bottom. Using PNG for product photographs inflates file sizes by 3 to 5 times with no visible benefit, because PNG stores every pixel exactly and a photograph has no flat areas to exploit.

Keeping a consistent catalogue

Process the whole catalogue in one batch so every product photograph shares the same dimensions, compression and framing. Shoppers comparing products notice inconsistency even when they cannot name it.

Consistency also helps the collection grid, where images of matching shape and brightness read as a designed page rather than an assembled one. Set the dimensions and the size target once, then apply them to every file rather than adjusting each product individually.

Processing a catalogue in one pass

Drop up to 500 images in at once, or drag a ZIP archive straight from your photographer, and every file comes back resized and compressed to the same specification. A catalogue that took an afternoon in desktop software finishes in a few minutes.

Everything runs inside your browser on your own processor, so unreleased products, seasonal campaign shots and supplier photography never reach a server. For a store preparing a launch under embargo, keeping the files local is the difference between a controlled announcement and a leak, and it costs nothing extra.