Image sizes
Image guide
Last updated
Was this helpful?
Image guide
Last updated
Was this helpful?
Theme retirement | Context is no longer available on the Shopify theme store. Theme support and updates for current users will end after May 18, 2024. .
When it comes to image size, there are really two questions: how many pixels wide and how many megabytes? Answering these questions will help make sure that your images look great and load fast.
But the answer isn't about exact measurements: what matters is that your images are above a minimum pixel width and below a maximum file size. Shopify and Context will handle the rest and automatically optimize and re-size your images for your visitor's screen or device.
For optimal image sizes, you can follow these two simple guidelines:
Use a minimum pixel width of 2500 px for optimal quality on all screens.
You don't need very large pixel widths for high quality images. In fact, larger pixel widths rarely makes a noticeable difference in quality.
Use a maximum file size of around 2 mb for optimal loading speed.
You don't need to worry if images are a bit over or under the maximum file size.
The best image size, shape, and orientation will depend on how it's used: background and hero images will need different dimensions than a logo or icon.
In general, Context handles all image orientations and will adapt accordingly, whether your images are Square (1:1) (equal width and height), Landscape (3:2) (width greater than height), or Portrait (2:3) (height greater than width).
That said, here's a few recommendations for your uploaded images:
For product images, often the best orientation to use is square (1:1) or portrait (2:3). But above all else, consistency is key: select one orientation or shape for your product photography to keep product grids looking uniform and professional.
For feature images, often the best images are landscape (3:2) or square (1:1). We recommend avoiding portrait images for sections that span across the page, such as the Slideshow and Full width image sections. Portrait images in these areas may look stretched, oversized, and force customers scroll down to see the whole image.
With exception, you will find recommended orientations for the following features:
Collage
Landscape (3:2) for Small blockPortrait (2:3) for Large block
Full width image
Landscape (3:2)
Slideshow
Landscape (3:2) or Square (1:1)
Popup background
Landscape (3:2)
Video featured image
Landscape (3:2)
Related links
