The Turbo Shopify theme can accommodate high res images that will load and display quickly thanks to some built-in optimization and JavaScript goodness we’ve implemented!
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
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.
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.
Image type | Width (px) | Height (px) | File type | Upload this in: |
---|---|---|---|---|
Favicon | 32 | 32 | PNG | Settings > Header |
Logo - Main Menu | 400 | 100 | JPG or PNG24 | Settings > Header |
Logo - Mobile | 150 | 50 | JPG or PNG24 | Settings > Header |
Logo - Footer | 250 | 200 | JPG or PNG24 | Settings > Footer |
Home Page Banners | 1800 | 1000 | JPG | Settings > Home page - Banner images |
Featured Promotions | 840 | 840 | JPG | Settings > Home page - Featured promotions |
Product Images | 1024 | 1024 | JPG | Online Store > Products > Products |
Collection Images (used for Featured Links) | 1024 | 1024 | JPG | Online Store > Products > Collections |
Home Page Slideshow Banners | 1800 | 850 | JPG | Settings > Home page - Slideshow |
Video placeholder image | 1600 | 900 | JPG | Settings > Home page - video |
Blog page top banner | 1800 | 800 | JPG | Settings > Blog page > Banner image |
Blog article featured image | 1800 | 1000 | JPG | Online Store > Blog Posts > Featured Image |
Contact page top banner | 1800 | 800 | JPG | Settings > Contact page > Banner image |
Newsletter popup image | 425 | 575 | JPG | Settings > Newsletter > Popup |
Newsletter section image | 1600 | 300 | JPG | Settings > Newsletter > Banner |
Checkout page top banner | 1800 | 300 | JPG | Settings > Checkout > Banner |
Full shop background image | 1800 | 1000 | JPG | Settings > Colors > Backgrounds |
Footer background image | 1800 | 600 | JPG | Settings > Colors > Backgrounds |
Password page background image | 1600 | 1000 | JPG | Settings > Colors > Backgrounds |