How Shopify handles images
Whenever you upload an image, Shopify creates different sizes of that image and will automatically serve up the most appropriate size in different scenarios to ensure better performance. However, we still recommend that you compress your images first so they’re not unnecessarily large to begin with.
Read more: Image optimization tips from Shopify
Image Aspect Ratios
When sizing your own images, keep this rule of thumb in mind: bigger, square-ish images will require a width:height ratio close to 1:1 but narrower, more rectangular images will need something closer to a 3:1 width to height ratio.
Size Recommendations
The table below shows recommended image sizes based on the dimensions we’ve used for the photos in this demo shop. We suggest sticking to the recommended image widths but feel free to vary the height as per the rule of thumb noted above.
Product Images
While we have a recommended size listed below, it's also dependent on the product type (for example, if the product image is of a model wearing a dress, this will most likely be a portrait orientation instead).
A general tip here is to upload product images with the same image aspect ratio with the highest pixel dimension, and let Shopify's CDN handle the resizing.
Resolution
For all images, 72 dpi is recommended. Although other resolutions can be uploaded, subject to Shopify's file size limitations, uploading higher resolution images will not improve image quality.
On all of the latest versions of Out of the Sandbox themes, high-resolution devices such as iPhones and MacBook Airs, the theme code will load 2x resolution images automatically.
| Image type | Width (px) | Height (px) | File type | Upload this in: |
|---|---|---|---|---|
| Favicon | 32 | 32 | PNG | Customize > Theme Settings > Favicon or Meta Info |
| Logo - Main menu | 400 | 100 | JPG or PNG24 | Customize > Header |
| Logo - Mobile | 100 | 50 | JPG or PNG24 | Customize > Header |
| Logo - Footer | 250 | 200 | JPG or PNG24 |
Customize > Footer |
| Mega menu images | 360 | 360 | JPG | Customize > Mega Menu > Content |
| Image with text overlay banner images | 1800 | 1000 | JPG | Customize > Add section > Image with text overlay |
| Featured promotions | 840 | 840 | JPG | Customize > Add section > Featured promotions |
| Image with text | 1024 | 1024 | JPG | Customize > Add section > Image with text |
| Gallery (classic layout) | 800 | 800 | JPG | Customize > Add section > Gallery |
| Logo list | 400 | 300 | JPG or PNG | Customize > Add section > Logo list |
| Product Images | 1024 | 1024 | JPG | Online Store > Products > Products |
| Collection images (used for Collection list) | 1024 | 1024 | JPG | Online Store > Add Section > Collection list |
| Slideshow banner images | 1600 | 1000 | JPG | Customize > Add section > Slideshow |
| Video placeholder image | 1600 | 900 | JPG | Customize > Add section > Video |
| Testimonials images | 1600 | 1000 | JPG | Customize > Add section > Testimonials |
| Blog page top banner | 1800 | 800 | JPG | Customize > Blog page > Banner image |
| Blog article featured image | 1800 | 1000 | JPG | Online Store > Blog Posts > Featured Image |
| Contact page top banner | 1800 | 800 | JPG | Customize > Contact page > Banner image |
| Newsletter popup image | 425 | 575 | JPG | Customize > Theme settings > Popup |
| Newsletter section image | 1600 | 300 | JPG | Customize > Newsletter > Banner |
| Checkout page top banner | 1800 | 300 | JPG | Customize > Checkout > Banner |
| Full shop background image | 1800 | 1000 | JPG | Customize > Theme settings > Colors > Backgrounds |
| Password page background image | 1600 | 1000 | JPG | Customize > Theme settings > Colors > Backgrounds |