Let's face it: visuals can make or break your website. Get them right, and you have your audience's attention. Get them wrong, and they might just jump ship.
Navigate to a website for branding masters like Apple, and check out how the images grab you from the start. That's your goal post. The right images drive your audience down the funnel, generating leads, and customers almost on their own.
So let's get it right together. In this post, we'll focus specifically on Shopify image sizes, and how you can optimize your visuals on this e-commerce platform to convince and convert your audience.
Shopify Image Size Guidelines
You want to go big, but you can't go too far. So let's start there. The biggest possible image size Shopify allows is 4,472 by 4,472 pixels, with a size no larger than 20 megabytes (20 mb).
That's a maximum number for Shopify images sizes. No one forces you to go that far, and we'll recommend that you don't. Remember: extra-large images slow your site's load times and hinder your UX. A fast Shopify website is paramount for conversions. Instead, the key is to find the best compromise between image size and picture quality.
Building a Retina Image for Shopify
It's 2020. That means your images need to look good not just on a regular or traditional computer screen. They need to display in high quality everywhere. Technologies like Apple's retina display and other high DPI devices demand high resolution images.
Starting in 2011 with the iPhone 4S, smartphones, in general, have continued to add to their display quality. To make sure your image is just as sharp on that new Pixel or Galaxy as it is on a desktop, you need high resolution images (aka Retina images).
How to Create Retina Ready Product Images
Creating a retina-ready image is quite simple actually. You'll need to start by understanding what the native display for an image on your website may be. I suggest you start by installing a ruler tool for your web browser like Page Ruler Redux for Google Chrome.
Next, turn on the page ruler tool and measure the image you'd like to convert to a retina Shopify image. For our example, the display size is 489x340.
Retina image sizes will be 2x the native image display. So using our example, we'll need to save out an image at 604x680 to maintain the right aspect ratio.
How to Create Retina Ready Icons and Logos
You could use the same approach we've outlined above for other images for icons and logos. However, we'd actually suggest approaching it a little differently.
SVGs (Scalable Vector Graphics) is a lossless image file format that you can use for icons and logos instead of something like JPGs or PNGs.
Due to the fact that these are lossless, they're natively retina friendly because they're designed to scale. Even better, SVGs file size tend to be smaller than JPGs or PNGs on average.
So if you're purchasing a pack of icons, first check if they offer SVG versions of those icons. Same goes for obtaining press or partner logos, try to find an SVG variant if you could.
If you already have a batch of icons and logos in PNG or JPG format without an option for SVG you could use a service like this one to easily convert the files to SVG.
Source - Missionstonetile.com
Best Sizes for Hero Images and Banners
Your hero banner tends to be the biggest visual on your website. It's where you get to show off your brand and products in a visually engaging way. Use it.
According to Stat Counter, the most common desktop screen sizes worldwide are:
- 1366x768 (23.27%)
- 1920x1080 (20.53%)
- 1536x864 (8.47%)
- 1440x900 (6.55%)
- 1280x720 (4.73%)
- 1600x900 (4.19%)
We suggest optimizing for the largest screen size here (1920x1080).
Best Picture Sizes for Product Pages and Thumbnails
You need an image for each of your products. You might think that image doesn't need to be big because it's just a thumbnail. But that's a little too simplistic.
Shopify actually recommends square images for products that are about 2,048 pixels in width and height. Personally, we feel this is overkill in most cases.
Most Shopify websites will display their images in a square format at around 300x300-600x600px. Using the benchmarks we notated above for retina images, this means you'd want your product thumbnails to be about 600x600-1200x1200px.
The only exception to this rule would be if you chose to use a zoom feature for products to focus on product details. If you choose to implement a feature like that because it aligns with your products (think fashion, leather goods, ornate goods etc.) than the suggested size of 2,040px will be appropriate.
Best Picture Sizes for Shopify Sliders
You might want a slideshow. If you do, you have to be careful about the images. Sliders should stand out, capturing your audience's attention much like single hero banners. However, it's easy to overload these banners with too many images.
Sliders Used For Hero Banners
If you're choosing to use a slider for the hero section of your homepage, or other key pages on your website we'd encourage you to limit the number of slides you use to 3. This should strike a nice balance between optionality but also manage the overall weight of the page.
From a dimensions perspective, we'd suggest sticking to the 1920x1080 figure referenced above for hero banners.
Slider Used For Products
It's not uncommon to want to use a slider for your product pages. These could be used to highlight a combination of product photos from multiple angles or lifestyle shots of the product. Similar to the hero banners, you do need to be mindful of how many slides you choose to include. Since these images tend to be smaller, we'd suggest a maximum of 6 images per slide.
From a dimensions perspective, we'd suggest sticking to the 600-1200px figure referenced above for product images.
Best Practices for Category Header Sizes
Shopify calls categories collections, but they're the same thing: a group of products that belong together in some shape. Many audiences will visit that collection to see the breadth of products you offer.
That collection, ideally, needs a header. As with the slideshow, that header should be at least 1,600 pixels wide to stretch across the screen. But a short height is just as vital; the more panoramic the image, the less it will be in the way of actual product depictions.
Best Practices in Using Shopify Images
With basic dimensions out of the way, let's talk about some basic best practices getting the right visuals on your Shopify page.
That starts with consistency. All photos on your website should be "of a piece," so it might make sense to bring in a photographer who can take care of that for you.
If your business depends on online sales, avoid the urge to take the photography yourself unless you're professionally qualified. The investment in a professional tends to pay off.
If you don't already know one, a product photographer is relatively easy to source. Online marketplaces like Thumbtack and Upwork are great places to find freelancers. Just make sure you ask for samples of past work to gauge their quality. Your web developer may also have photographers they trust.
Beyond your products, you'll want to think about some more esoteric photography as well. Your homepage heroes, sliders, and category headers all deserve some special attention here.
Lifestyle imagery, as long as it fits your brand, could be a good match for these. Done right, they should your product in action and give your target audience an easy reference point of seeing themselves. Just make sure it's relevant to the message you're trying to convey.
Depending on your web design, you might also be tempted by a background image. But be careful: it only makes sense if the visual is simple, and doesn't take away from the core message you're trying to convey.
The best background image means little if it's too busy or distracts from the main content. And you definitely want to make sure that your text remains easily readable.
Speaking of text: avoid adding text to images when you can. Instead, use HTML or CSS coding to overlay that text, which makes it accessible and improves UX. It also makes the text easier to manipulate and update with the image in place.
Here’s a common mistake: people skip image optimization completely.
You upload images that are so huge your user’s browser has to scale them down when it loads the page.
This is a huge drag on your load time. (Especially for mobile devices.)
In fact, you want smaller images and smaller file sizes.
First, know that Shopify recommends using 2048 x 2048 pixels for product photos. If your images are larger than that, they’re prime candidates for dimension reduction.
The good news is that resizing them is a cinch.
Here’s how to do that:
Option #1: Use Shopify’s Image Resizer
Shopify's image optimization tool is an amazing option.
First, navigate to Shopify’s Image Resizer tool.
Upload the photo you want to resize.
Then click "Submit."
If it was successful, you can download the resized image.
Now all you have to do is replace them on your Shopify store.
Option #2: Photoshop
Of course, if you’re using Photoshop to edit your product photos, you can also ensure they’re the proper dimensions before sending them off.
First, open your image in Photoshop.
Then to go to File --> Export --> Save for Web (Legacy)
A new modal will pop up where you can specify dimensions, among other things for image optimization.
Then click "Save." All done!
Over to you: how do you use images on Shopify and other ecommerce websites? Have you discovered some image sizes that work particularly well in showcasing your product and brand? Share your thoughts in the comments, or shoot us a note.