Most Shopify sizing advice you will find online talks only about product photos. But a storefront is full of images that are not products: the slideshow at the top of your homepage, collection tiles, your logo, the favicon in the browser tab, blog headers, and background images behind text. Get those wrong and your store looks amateurish long before a shopper reaches a product page.
This is a complete 2026 reference for every image slot in a Shopify store, including the two upload limits that trip sellers up and the megapixel maths that almost every other guide gets wrong.
The two hard limits every Shopify upload must pass
Shopify enforces two ceilings on every image you upload, and your file must clear both:
- 20 megapixels maximum resolution
- 20 megabytes maximum file size
Megapixels are calculated as width multiplied by height, divided by 1,000,000. This matters more than it sounds, because a lot of guides repeat the advice that "Shopify accepts up to 5000 x 5000 pixels". Do the arithmetic: 5000 x 5000 is 25,000,000 pixels, or 25 megapixels. That is over the limit and the upload will fail.
The largest square image that actually passes is roughly 4472 x 4472 px (19.99 MP). A wide banner has more room: 5760 x 3240 px is 18.7 MP and uploads fine. So check the megapixel total, not just one dimension.
In practice you should be nowhere near either ceiling. A 20 MB homepage banner will destroy your mobile load times regardless of whether Shopify accepts it.
The 2026 Shopify image size cheat sheet
These are the working dimensions for Dawn and most modern Online Store 2.0 themes. Individual themes vary, so treat these as a strong default rather than gospel.
| Image slot | Recommended size | Aspect ratio | Target file size |
|---|---|---|---|
| Product photo | 2048 x 2048 px | 1:1 | Under 300 KB |
| Slideshow / hero slide | 1920 x 1080 px | 16:9 | Under 500 KB |
| Image banner (Dawn) | 1600 x 1050 px | ~3:2 | Under 400 KB |
| Narrow promo banner | 1200 x 400 px | 3:1 | Under 200 KB |
| Collection tile / header | 1024 x 1024 px | 1:1 | Under 200 KB |
| Background image | 2560 x 1400 px | 16:9 | Under 500 KB |
| Blog / article header | 1200 x 800 px | 3:2 | Under 250 KB |
| Horizontal logo | 400 x 100 px (upload at 2x) | 4:1 | Under 100 KB |
| Square logo | 200 x 200 px (upload at 2x) | 1:1 | Under 100 KB |
| Favicon | 32 x 32 px | 1:1 | Under 10 KB |
Section-by-section notes
Slideshow and hero images
The single most common Shopify slideshow error is mixing dimensions between slides. If slide one is 1920 x 1080 and slide two is 1800 x 900, the section height will jump as the carousel rotates, and the page will visibly shift. Every slide in a slideshow must be exactly the same pixel dimensions.
The second most common error is placing your headline text inside the image itself. Do not. Shopify's slideshow sections have separate text overlay fields for a reason: baked-in text becomes unreadably small on a 390 px-wide phone, cannot be translated, and cannot be read by search engines. Keep the image purely visual and let the theme render the words.
Image banners and the mobile crop trap
Shopify themes crop banners from the centre outwards on narrow screens. A 16:9 desktop banner shown on a phone loses roughly the outer third from each side. If your product sits at the left edge of the frame, mobile shoppers see empty background.
Compose banners with the important content inside a central "safe zone" of about 60 percent of the width. Better still, use the separate mobile image field that most 2.0 themes now offer and upload a dedicated 800 x 1000 px portrait version.
Collection images
Collection images are almost always displayed as squares or in a uniform grid, so 1024 x 1024 px at a 1:1 ratio is the safe choice. The critical rule is consistency: if six collection tiles sit side by side and one is a different ratio, the grid looks broken even though nothing is technically wrong. Crop them all to the same shape before uploading.
Logo
Upload your logo as a transparent PNG, or an SVG if your theme accepts it. A JPEG logo carries a white box that will show against any coloured header.
Themes let you set a display width in the theme editor, commonly 100 to 250 px. Upload at roughly double that width so the logo stays crisp on retina and high-density displays. A logo intended to display at 200 px should be uploaded at 400 px wide. Any larger is wasted bytes on every single page view.
Favicon
Shopify reduces any favicon you upload to 32 x 32 px. That is 1,024 pixels in total, which is not enough for a wordmark, a tagline, or fine detail. Use a single letter, a simplified mark, or a bold symbol with strong contrast. Test it against both light and dark browser themes. Note that favicons require the Basic plan or higher; they are not available on Starter.
Product photos
2048 x 2048 px is the practical sweet spot. It is large enough to drive Shopify's zoom feature comfortably, small enough to compress well, and square, which is what almost every theme grid expects. Going to 4000 px adds file weight without a visible quality gain for the overwhelming majority of products.
File formats: what Shopify accepts and what it serves
Shopify accepts JPEG, progressive JPEG, PNG, GIF, HEIC and WebP. PSD, TIFF and BMP files are accepted but converted to JPEG or PNG on upload, which means you lose control over the conversion quality. Convert them yourself first.
Here is the part many sellers do not realise: Shopify does not compress your images on upload, but it does optimise them on delivery. The Shopify CDN automatically picks the best format for each visitor's browser, serving WebP or AVIF where supported, and it generates responsive size variants automatically. Animated GIFs are converted to WebP for performance.
That automatic delivery layer is genuinely good, but it does not rescue a badly prepared source file. If you upload a 6 MB, 4000 px-wide JPEG for a banner that displays at 1600 px, Shopify will serve a smaller variant, but the stored original still bloats your admin, slows your uploads, and gives the CDN a poor starting point. Right-sizing before upload remains worth doing.
Preparing everything in one pass
The awkward reality of a Shopify launch or refresh is that you are not resizing one image to one size. You are producing squares for products and collections, 16:9 slides for the homepage, 3:2 blog headers, a transparent logo at 2x, and a 32 px favicon, all from a mixed folder of camera files and supplier assets.
Batch tools are the sane answer. PixelPrep lets you drop a whole folder in, resize to each target dimension, and export web-ready files without opening a photo editor for every asset. Prepare each set once, upload, and the theme does the rest.
Common mistakes that cost you
- Uploading straight from a phone. iPhone HEIC files are accepted by Shopify, but a 12 MP portrait photo used as a desktop banner will look soft and crop badly.
- Ignoring the megapixel limit. If an upload silently fails, check width x height before blaming your connection.
- Inconsistent ratios within a grid. Mixed shapes in a collection or product grid read as carelessness to a first-time visitor.
- Text baked into images. Unreadable on mobile, invisible to search, impossible to edit.
- 10 MB "high quality" hero images. Largest Contentful Paint is usually your hero image. It is the single biggest lever on perceived store speed.
Your pre-launch image checklist
- Every upload is under 20 megapixels and 20 MB, with the megapixel maths actually checked.
- Products exported at 2048 x 2048 px, square, under 300 KB each.
- All slideshow slides at identical dimensions, 1920 x 1080 px.
- Banner subjects composed inside the central 60 percent safe zone, with mobile variants uploaded where the theme supports them.
- Collection images all cropped to the same 1:1 ratio at 1024 x 1024 px.
- Logo saved as a transparent PNG at twice its display width.
- Favicon simplified to a single bold mark at 32 x 32 px, checked in both light and dark browser themes.
- No headline text baked into any image file.
- Hero image under 500 KB, verified on a real phone rather than a desktop preview.
Spend an hour preparing these properly once and your storefront will look deliberate on every screen size, load faster, and stop shifting around while shoppers try to read it.