Recommended Image Sizes for Turbo
Turbo loves images!
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!
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 imagewidths but feel free to vary the height as per the rule of thumb noted above.
Touch and drag to view full table width
Image type |
Width (px) |
Height (px) |
File type |
Upload this in: |
|---|---|---|---|---|
| Favicon | 32 | 32 | PNG | General settings > Favicon |
| Logo - Main Menu | 400 | 100 | JPG or PNG24 | Sections > Header |
| Logo - Mobile | 150 | 50 | JPG or PNG24 | Sections > Header |
| Logo - Footer | 250 | 200 | JPG or PNG24 | Sections > Footer |
| Home Page Slideshow Banners | 1800 | 850 | JPG | Sections > Slideshow |
| Home Page Banners | 1800 | 1000 | JPG | Sections > Image with text overlay |
| Featured Promotions | 840 | 840 | JPG | Sections > Featured promotions |
| Customer testimonials | 1280 | 600 | JPG | Sections > Testimonials |
| Logo list | 400 | 300 | JPG | Sections > Logo list |
| Image gallery | 800 | 800 | JPG | Sections > Gallery (size recommendation is for Classic style only) |
| Product Images | 1024 | 1024 | JPG | Online Store > Products > Products |
| Collection page top banner | 1024 | 1024 | JPG |
In the Theme Editor, navigate to a collections page then Sections > Collection > Banner Image; |
| Video placeholder image | 1600 | 900 | JPG | Sections > Featured video |
| Blog page top banner | 1800 | 800 | JPG | Navigate to the main Blog page then Sections > Blog |
| Blog article top banner | 1800 | 1000 | JPG |
Navigate to a blog post page then Sections > Blog and check "Enable blog post banner image"; |
| Contact page top banner | 1800 | 800 | JPG | Navigate to your contact page in the Theme Editor, then Settings > Contact page |
| Newsletter popup image | 425 | 575 | JPG | General settings > Popup |
| Newsletter section image | 1600 | 300 | JPG | Sections > Newsletter |
| Checkout page top banner | 1800 | 300 | JPG | General settings > Checkout |
| Background image for whole shop | 1800 | 1000 | JPG | General settings > Colors > Backgrounds |
| Footer background image | 1800 | 600 | JPG | General settings > Colors > Backgrounds |
| Password page background image | 1600 | 1000 | JPG | Settings > Colors > Password page |
