Image Sizes: A Guide

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 1800 1000 JPG

In the Theme Editor, navigate to a collections page then Sections > Collection > Banner Image;
to use the SAME banner image on ALL collection pages, upload an image banner here;
for different images per collection, enable "show featured collection image" and then upload those pix in Online Store > Products > Collections

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";
then upload those pix in Online Store > Blog posts > (individual post > Featured 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

Sign up for our Newsletter