Updated 8 September 2026
Shopify Product Images: Sizes, Responsive Images and POD Mockups
A practical guide to the files you upload, the image set shoppers see, and the responsive theme markup that keeps those images sharp without making mobile visitors download an oversized desktop asset.
Jump to the answer you need
Current Shopify product image limits
- Product and collection images: up to 5000 × 5000 pixels or 25 megapixels.
- File size: less than 20 MB per product or collection image.
- Square images: Shopify says 2048 × 2048 pixels usually displays best.
- Formats: Shopify accepts common formats including PNG, JPEG, GIF, SVG, HEIC and WebP, plus several source formats that it converts.
Keep the source quality
Shopify's CDN can compress images and deliver a browser-appropriate format. Avoid arbitrary targets such as “every image under 200 KB” if they visibly damage artwork or garment detail. Start with a clean source inside the upload limits, then test what your theme actually serves.
Source: Shopify Help Center, Product media types.
Choose dimensions for the layout, not a universal table
Use one consistent aspect ratio so collection cards do not jump or crop unpredictably.
Keep enough resolution for detail and zoom, then preview the crop your theme uses.
Create a separate intentional crop when the same square composition cannot work in a wide slot.
Simple starting point for POD stores
Use a 2048 × 2048 square for the main product set when your theme uses square cards. Keep the product scale and placement consistent across colours. Create a separate wide or portrait crop only for a slot that genuinely needs it.
How Shopify responsive images work
If you edit a Shopify theme, use Shopify's image_url and image_tag Liquid filters. Give the browser a useful list of widths and a sizes rule that matches the CSS layout. The browser can then select a smaller source for a phone or product-grid card.
{{ product.featured_image
| image_url: width: 800
| image_tag:
widths: '300, 400, 600, 800',
sizes: '(min-width: 768px) calc(50vw - 2rem), calc(100vw - 2rem)'
}}- Match
sizesto the real breakpoints and container width. - Do not lazy-load the image that is likely to be the page's largest visible content.
- Lazy-load below-the-fold images and use
sizes: 'auto'where appropriate. - Keep width and height attributes so the browser can reserve space and reduce layout shift.
Sources: Shopify.dev, responsive layout guidance and theme performance best practices.
Write useful product image alt text
Describe the image briefly and in context. Shopify supports up to 512 characters and recommends 125 characters or fewer. Do not stuff keywords or repeat identical alt text for views that show different information.
Too vague
blue-shirt.jpgMore useful
Front view of navy crewneck T-shirt with white botanical printSource: Shopify Help Center, Adding alt text to media.
A practical POD product image sequence
Show the product and artwork at a useful scale with a simple crop.
Help shoppers understand the item beyond the front-facing view.
Show print placement, texture and small details without exaggerating them.
Use consistent placement and label colours clearly; do not imply an exact screen-to-fabric match.
Use a size reference, dimensions or a genuine model view when available.
Show how the finished product could look in use, and keep mockups distinguishable from manufactured-item photography.
Pre-publish image checklist
- Choose one aspect ratio that works with your current theme's product grid.
- Export a clean main image with the product easy to identify at thumbnail size.
- Add useful secondary views: another angle, detail, scale, colour and lifestyle context.
- Write brief, descriptive alt text for each informative image.
- Preview the product page and collection card on a real phone before publishing.