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 | 64 | 64 | PNG | Customize >Theme Settings > Favicon |
| Logo (Main Menu) | 600 | 200 | PNG or JPG | Customize > Sections > Header |
| Overlay Logo | 600 | 200 | PNG or JPG | Customize > Sections > Header |
| Mobile Logo | 600 | 200 | PNG or JPG | Customize > Theme Settings > Mobile |
| Logo (Footer) | 500 | 200 | PNG or JPG | Customize > Section > Footer |
| Mega Menu Images | 600 | 600 | JPG | Customize > Mega Menu > Add content |
| Image with Text Overlay | 1800 | 900 | JPG | Customize > Sections > Add Section > Image with Text Overlay |
| Image with Text | 1024 | 1024 | JPG | Customize > Sections > Add Section > Image with Text |
| Featured Promotions | 800 | 600 | JPG | Customize > Sections > Add Section > Featured Promotions |
| Gallery | 800 | 800 | JPG | Customize > Sections > Add Section > Gallery |
| Logo List | 800 | 800 | JPG or PNG | Customize > Sections > Add Section > Logo List |
| Slideshow with Text | 1600 | 1000 | JPG | Customize > Sections > Add Section > Slideshow with Text |
| Contact Form | 1000 | 1000 | JPG | Customize > Sections > Add Section > Contact Form |
| Testimonials | 500 | 500 | JPG | Customize > Sections > Add Section > Testimonials |
| Newsletter (background image) | 1600 | 300 | JPG | Customize > Sections > Add Section > Newsletter |
| Newsletter (feature image) | 1024 | 1024 | JPG | Customize > Sections > Add Section > Newsletter |
| Video (placeholder image) | 1600 | 900 | JPG | Customize > Sections > Add Section > Video |
| Popup (feature image) | 600 | 875 | JPG | Customize > Sections > Popup |
| Product images | 1024 | 1024 | JPG | Online store > Products > Product |
| Collection (banner) | 1800 | 800 | JPG | Customize > Collection Page > Sections > Collection Banner |
| Collection (promotional banner) | 1800 | 800 | JPG | Customize > Collection Page > Sections > Collection |
| Sidebar (featured promotion) | 600 | 600 | JPG | Customize > Collection Page/Blog Page > Collection Sidebar/Blog Sidebar > Add content |
| Blog (banner) | 1800 | 800 | JPG | Customize > Blog > Sections > Blog Banner |
| Cart (banner) | 1800 | 800 | JPG | Customize > Cart > Sections > Cart Banner |
| Checkout (banner) | 1000 | 400 | JPG | Customize > Theme Settings > Checkout |
| 404 Page (banner) | 1800 | 800 | JPG | Customize > 404 Page > Sections > Page not found banner |
| Contact Page (banner) | 1800 | 800 | JPG | Customize > Contact Page (once added in Shopify admin) > Sections > Contact banner |
| Contact Page (content image, beside form) | 1000 | 1000 | JPG | Customize > Contact Page (once added in Shopify admin) > Sections > Contact |
| FAQ Page (banner) | 1800 | 800 | JPG | Customize > Contact Page (once added in Shopify admin) > Sections > FAQ Banner |
| FAQ Page (column image) | 1000 | 1000 | JPG | Customize > Contact Page (once added in Shopify admin) > Sections > FAQ Column 1/2 > Add content |
| Customer Login Page | 1000 | 700 | JPG | Customize > Customer Login (once customer accounts are enabled in Shopify Admin) > Sections > Login |
| Search (banner) | 1800 | 800 | JPG | Customize > Search (once enabled under Sections > Header) > Sections > Search Banner |