Shopify Image Optimization: Compression, SEO and Tips
It's common knowledge amongst web designers that you should keep image file sizes small to reduce website load times. This keeps customers from leaving the website, and fast loading speeds has SEO benefits as well.
So you might be surprised when I tell you that if you've been spending time compressing your client's images before uploading them to a Shopify store, STOP now.
I used to spend time compressing and resizing website images, even though the client hadn't necessarily asked or paid for it, because I wanted their website to load quickly and be the best that it could be. But this is actually a waste of time.
Does Shopify compress images?
Guess what? Shopify automatically compresses images when they're displayed on an online store, reducing the file size to allow for faster page loading. You should always upload the best quality images you can provide. Compressing images before uploading them can actually sometimes result in poor image quality. That means you should no longer use tools like TinyPNG to compress before uploading.
Shopify compresses images by converting them into WebP format. This format is specifically created for websites, and supports both lossy and lossless compression to create smaller file sizes than JPG and PNG while maintaining similar quality. Shopify compresses images at a quality setting that is best for ecommerce. Even GIFs are automatically converted to the animated WebP format. Shopify is able to detect what file types a customer's web browser supports so that if WebP is not supported, then a different image format will be delivered.
Note that Shopify is only able to automatically optimize images if the theme is using the image_url and image_tag Liquid filters. Pre-2022 themes did not use those filters, so be sure to check that your theme uses these filters. This is just another good reason to keep a store's theme version up to date so that you can make use of all of Shopify's features!
Shopify Image Optimization for SEO
Instead of spending time resizing images, there are other ways to optimize images for Shopify that will give your client's store SEO benefits:
1. Give file names descriptive names
Properly named image files boost SEO, because search engines are able to crawl the file names on your website and use this information to rank relevant content higher on search engine results pages.
Instead of uploading images with the file name that came from the camera, take some time to give each file a short but accurate name. Ideally the name should use words that a customer would use to search for these products.
You can change file names on your computer before uploading, or if you've already uploaded the images, no worries, you can still change file names on Shopify. From the Shopify Admin, go to Content > Files > Select the image > type in a new name > Save.
2. Add alt text to images
Alt (alternative) text describes an image. It is meant to be backup text if an image doesn't load, it's an important part of making website content accessible, and it has huge SEO benefits.
Adding alt text to images will help show the best results to someone who is using a search engine to look for a product like yours. Adding alt text increases the probability of those products showing up in Google image and web searches.
Alt text should be descriptive and accurate, and ideally be kept to 125 characters or less. To add alt text to all images, from the Shopify Admin, go to Content > Files > Select the image > type in some alt text > Save. Be sure not to do keyword stuffing in your alt text, but still be descriptive enough with color names, model names, and version numbers. I love that you can access all Shopify store images in one place to make these updates quickly.
Resizing Images for Shopify
Another part of image optimization is making sure that images look their best. The only time I would spend time resizing or cropping images for Shopify is to create consistency between all product images. The website will look polished and professional if all product images use the same aspect ratio.
My personal preference is square (1:1) product images. This is because they fit nicely on a desktop screen, as they're as wide and tall as can be above the fold. Square images also look decent on mobile. Portrait images would be my second choice, but only if product images are displayed in a grid, because otherwise the it requires you to scroll down to see the entire image. I would never use landscape images for product images as they would always appear the smallest, and images are an important part of making sales. Ultimately it depends on the product image layout you'll use. You can crop images directly in the Shopify image editor.
Then you'll want to make sure the collection page grid items are displaying all images at that same aspect ratio. If you don't have all product images using the same aspect ratio, then you'll notice some images will be cut off.
The same goes with the thumbnails on the product page. If you have all product images the same size, then you can make sure the thumbnail images all show the entire image and nothing is cut off. Showing off your products in the most attractive way will help customers see what's special about a brand, and ultimately lead to more sales.
What sizes should my Shopify images be?
Image optimization isn't just about speed and SEO, it's also about the quality of images.
I already explained that image sizes that are too big are not an issue because Shopify will automatically compress these. But how about image files that are too small? Let's talk about the minimum size for Shopify images to make sure that images are showing crisply.
Let's talk screen sizes. My 14" laptop screen is about 1500px wide. So you might assume that the largest image width should be 1500px. However, I have a Retina display, meaning that it shows double the number of pixels for the same image. In this case, I'd want full-width images to be 3000px. But again, this is a laptop display and so many people are using larger desk monitors which could have and even wider screen.
There are so many different factors, so you can see why on one person's screen images may look adequate, while on someone else's screen, the image would look blurry. This is why it's important to upload the best quality images you can provide, and let Shopify take care of image compression.
Here are some general minimum image file sizes that I recommend for a Shopify website:
- Full width images: 2000 x 2000px
- Full width images when photography is of the utmost importance such as a hero image: 4000 x 4000px
- Inside content images that take up half-screen width, like product images for example: 1000 x 1000px*
*if the theme's magnify tool on the product page is enabled because there are small details that need to be shown, then I would follow the full width image dimensions
Of course you don't want to upload huge image files for the 2 people who are using huge monitors. Look at the store's metrics and see where most visitors are finding you and on what device they're using. If the majority of customers are on mobile, then you don't need to upload 4000px wide images.
Shopify Image Optimization Tips
Here are some additional tips for optimizing images on Shopify:
- Don't add text to images that are used for slideshows or backgrounds. The text will most likely get cut off on different screen sizes. Instead, add text using the theme's section settings. Psst... your SEO will also benefit more if real text is used.
- Make use of a section's option to add a mobile image. If an image isn't looking great on both desktop and mobile, definitely take the time to add different images for different screen sizes (landscape for desktop and portrait for mobile).
- Don’t use alt attributes for decorative images, as search engines may penalize you for this.
- If a background image is being cut off and not showing the part you want, set an image "focal point". This will make that spot the area of focus so that it'll always appear in frame on all screen sizes.
Image optimization is the least fun part of building a website but is something that's worth doing to improve your client's website performance.
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
Hana Drdla
