A product photo can be sharp in your asset folder and still look wrong on the website. The subject might be cropped, neighboring products might appear at different scales, or a desktop banner might become unreadable on a phone. Choosing the right Shopify image sizes starts with the space the image needs to fill.
This guide explains the dimensions, aspect ratios, and preparation decisions we would work through before uploading a store's imagery. For the wider build process, start with our complete Shopify website design guide.
Understand dimensions, aspect ratio, and file size
These describe different things. Dimensions are the image's width and height in pixels. Aspect ratio is its shape. File size is the amount of data in the file, usually measured in KB or MB.
A 2,048 × 2,048 pixel photograph and a 1,024 × 1,024 pixel photograph share a 1:1 aspect ratio. The larger image gives the theme more detail to work with, but its exported file size also depends on the format, compression, and content. A detailed fabric photograph usually needs more data than a simple shape on a plain background.
There is also a difference between the source you upload and the image a visitor downloads. Shopify can deliver resized images in efficient formats. The theme's implementation determines which sizes it requests. Uploading a high-quality source does not mean every phone should download that original file.
Practical starting sizes for common Shopify images
Use this table as a starting brief for your photographer or designer. Except for Shopify's square product image recommendation, these are our working recommendations, not mandatory Shopify dimensions. Your theme's image settings and the intended composition take priority.
| Placement | Starting dimensions | Aspect ratio | What to check |
|---|---|---|---|
| Square product photograph | 2,048 × 2,048 px | 1:1 | Subject scale stays consistent across the collection grid. |
| Portrait product photograph | 1,600 × 2,000 px | 4:5 | The theme supports portrait cards without awkward cropping. |
| Square collection image | 1,600 × 1,600 px | 1:1 | The photograph communicates the category at small sizes. |
| Desktop hero | 2,400 × 1,350 px | 16:9 | The subject and any text area survive the actual section height. |
| Mobile hero | 1,200 × 1,500 px | 4:5 | The section supports a separate mobile image or suitable crop. |
| Article featured image | 1,600 × 900 px | 16:9 | The composition works in both the article and smaller blog cards. |
Shopify recommends 2,048 × 2,048 pixels for square product images in its product media documentation. The same document lists product and collection image limits of up to 5,000 × 5,000 pixels or 25 megapixels, with files smaller than 20 MB. These are upload limits, not performance targets.
Do not assume one limit applies to every upload location. Shopify's theme image guide lists separate upload requirements. All the starting dimensions above are comfortably below those limits.
Keep product photography consistent without making it repetitive
Choose one primary ratio for each product grid. Then agree on the framing: background, camera angle, distance, shadow, and how much space surrounds the subject. A candle should not fill almost its entire card while an equally sized candle next to it looks tiny.
For a hypothetical ceramics brand, the first image might be a clean front or three-quarter view. The remaining gallery images can show the handle, glaze, underside, product in a hand, and a styled table. Each photograph answers a different question. Six nearly identical angles add less value than three useful views.
Do not crop away important details just to enforce a ratio. If a tall vase and a wide serving platter share a collection, build a consistent canvas around them and check how both appear at the actual card size. Product representation matters more than a mathematically neat grid.
Our product page optimization guide covers how to choose gallery content around purchase questions.
Image preparation should support a buying decision. Our Shopify CRO guide explains how product assets can answer questions about scale, fit, materials, and use.
Art-direct desktop and mobile banners separately
A wide photograph with a person on one side and empty space on the other can work beautifully behind a desktop heading. On mobile, that same image may crop the person out or put the heading across their face.
If your theme supports separate mobile imagery, prepare a deliberate portrait crop. If it does not, choose a photograph that tolerates the available crop or select a layout with text outside the image. Review the actual section, rather than approving the image in isolation.
Keep essential headings and buttons as real page elements where possible. Text baked into a photograph is harder to resize, translate, and make accessible. It can also become too small when a wide banner is squeezed into a narrow screen.
Shopify supports focal points in compatible theme sections. They help direct cropping, but they cannot rescue every composition, and changing an image's focal point can affect other places that use that image. Preview those placements before signing it off.
Establish these decisions while working on your homepage design, then carry the system through collection and supporting pages.
Choose formats and check delivered file weight
For ordinary photography, a high-quality JPEG is a practical source format. PNG is useful when transparency or crisp graphic detail requires it. Use an appropriate vector logo when the placement supports it, and keep the original master artwork outside the theme.
Shopify's image delivery can serve formats such as WebP or AVIF to compatible browsers. Its theme image guidance recommends high-quality uploads and explains that manual compression before upload is not required. Avoid repeatedly exporting and recompressing the same image until it visibly deteriorates.
There is no useful universal rule that every store image must be below one tiny file-size threshold. A full-width editorial photograph and a small thumbnail have different jobs. Check what the browser actually downloads at desktop and mobile widths, whether the image looks sharp, and whether it contributes to a slow page.
If a small card downloads an enormous image, the theme's requested size may need attention. If the first screen contains several heavy videos, changing a JPEG export will not solve the whole problem. Use our Shopify speed optimization guide to investigate the page as a complete experience.
Prepare an asset handoff your team can use
- Name files so people can identify the product, angle, and intended placement.
- Keep the high-resolution originals and approved web exports in separate folders.
- Document the chosen ratios and subject framing for each template.
- Supply mobile crops where the design requires them.
- Write useful alt text for meaningful images. Describe what helps the visitor understand the product or content.
- Record image rights and usage restrictions with the source files.
- Review actual pages on a phone before approving the asset set.
Alt text is not a place to repeat every keyword. “Blue stoneware mug with a large curved handle” tells someone more than a string of product-category terms. Decorative imagery may need an empty alternative instead, depending on its purpose and implementation.
Plan the imagery with the design
Photography, layout, and content work best when they are planned together. A clear asset brief helps a DIY merchant avoid repeated exports and gives a photographer a concrete target. A studio can handle the art direction and implementation while your team supplies product knowledge and approved assets.
Sugoi Digital builds Shopify websites with the brand, catalog, and shopping experience considered together. Work With Us to discuss your store.
