It seems like there’s no shortage of online platforms that you can use to support your business, be it Shopify, Later, TikTok, Google Ads, etc.
But with each new platform comes the ever-evolving list of things that you need to keep up to date on, like image sizes.
That’s why we’ve created this helpful guide for our fellow Shopify users, so you can optimize your store images for mobile and desktop and stay up-to-date.
Why is it important to optimize images?
Optimizing images on your website creates better user experiences.
Remember, people are viewing your site from different devices.
You don’t want mobile users to be accosted by an oversized image that keeps them from seeing other content, or for desktop users to be met with teeny-tiny product photos.
You want a seamless experience that keeps ‘em shopping without interruption.
It’s also important to optimize Shopify store images to reduce the load time of your pages.
Someone visiting your site will decide very quickly if they’re going to stay. So if your page takes too long to load from oversized images, you’re going to have people saying adios pretty fast.
Lastly, it keeps the search engines happy, and we all know that a happy search engine = a happy life.
Shopify Image Guidelines
Here’s a breakdown of each type of photo you’ll need on your Shopify site and the recommended image sizes:
Background Images
Background images will be the biggest image on your website.
Max width: 2500 pixels
Max height: 1406 pixels
Max file size: 20 MB
Ratio: 16:9
This is perfect to fill or stretch across the entire screen. If you go any smaller, the image may be too blurry or fail to fill the screen.
Hero Images
A hero image is an image at the top of your page. While still large like your background image, they’ll only be a portion of the height.
Max width: 1280 pixels
Max height: 720 pixels
Max file size: 10 MB
Ratio: 16:9
Blog Images
Your blog images can vary depending on the design of your site. But we recommend using a uniform size for your main header blog image.
Max width: 2240 pixels
Max height: 1260 pixels
Max file size: 3 MB
Ratio: 16:9
Logos
Logos are usually the easiest to format and the smallest image that you’ll need. The ratio you use will depend on the layout of your logo. A vertical logo can use a square ratio or 2:3, whereas a horizontal logo will usually have a 4:1 ratio.
Max width: 250 pixels
Max height: 250 pixels
Max file size: 1 MB
Ratio: 1:1, 2:3, 4:1
Tips from our Shopify Pros
Here are some extra tips from the Good Commerce pros to help you optimize your images:
#1 Resize images to fit using your fave design software like Canva, Adobe or Affinity. Set the canvas up in your preferred file size, import an image, and crop or resize it to fit the canvas.
#2 If your template uses a different image size than the ones listed, you can find it quickly using the inspect tool in your browser. Go to your website, right-click on your mouse, select ‘Inspect’ from the menu, then hover over the area you need sizing for. A blue overlay will appear and a code box will pop up with the dimensions.
#3 If your image size is still too large for your website, use an online file compressor like tinyjpg.com. They’re free and quick, and do a decent job of preserving the quality of images.
#4 If at any point you’re feeling loss-t (image pun) consider working with a Shopify expert like Good Commerce. Seriously, we live for this stuff. Plus, we’ll have your store up and running in a gif! (Sorry, we love our image puns).