Shopify image optimization is something you can’t underestimate. Even the smallest Shopify stores feature many product and collection images.
Poorly optimized images will increase your store’s load time massively. And we all know that no one likes a slow website. This is especially important for your Shopify store's mobile optimization.
In this guide, we will cover eight steps for effective Shopify image optimization. Follow them and your store will load fast, rank well on search engines, and hit all-time highs for conversion rates.
What is image optimization?
Image optimization is a process of compressing and resizing images while retaining their quality to provide a smooth user experience and improve search engine rankings. It also includes adding text attributes, such as captions, optimized titles and most notably alt texts.
Image optimization is one of the main Shopify SEO best practices.
How to optimize images for Shopify
Here are eight main steps for Shopify image optimization:
- Compress images
- Use the right file type
- Write alt attributes
- Name the image accordingly
- Make sure images are responsive
- Use unique images
- Create image sitemaps
- Test and adjust images
Following them will ensure your images add to your website performance and search engine ranking efforts and not hinder them.
Automate your Shopify image optimization with one app. TinyIMG will compress, resize and optimize your images for SEO!
Start using TinyIMG todayNow let’s take a closer look at each of the 8 image optimization steps separately to understand how we can use them for a Shopify store.
1. Compress images
Shopify serves WebP and takes care of your thumbnails. While this is a helpful start, you should always be looking to further compress your images and get your Shopify store load speed as fast as possible.
Aiming for file sizes of 70KB or lower is a good general target, though this may depend on the quality of the image you need.
So how do you reduce image file sizes?
Option 1 – Manual
Your first option is to manually reduce file sizes using Photoshop or a similar program. This process is about changing the amount of image data available, either by reducing the number of pixels or changing the pixel dimensions of an image using the Image size dialog box.
Once you have reduced the number of pixels, there is a range of tools for refocusing the image so it does not appear pixelated. For Photoshop, you’ll find details of those tools plus a guide to reducing image size here.
Option 2 – Automatic
There are a lot of image compression tools out there. You should select one which has been developed specifically for Shopify to ensure it follows Shopify best practices in terms of image quality and file type. Then simply install the tool you have chosen, and it will automatically optimize your images and only then upload them to your Shopify page.
When you’re looking for a compression tool, it’s best to choose a multifunctional Shopify app option. For instance, TinyIMG app not only takes care of optimal image sizes but also ensures your image SEO is taken care of.
Marketer’s tip: If you place large images on your site and manually adjust their size using source code, you won’t reduce their file size. This can really damage your page load speed. Include large images as pop-ups or even on a separate page that appears when users click on the smaller version shown on your site.
2. Use the right file type
Essentially, you should only be thinking about two image options for your Shopify store – .jpg and .png.
- JPEG offers the best overall balance between quality and file size.
- PNG images offer excellent quality and transparent elements, but the files are big. Plus, they will lose image quality if they are heavily compressed.
Shopify recommends using JPEG for product images, pages and blog posts, and PNG for decorative images such as logos, trims and borders (these should be in your CSS, not HTML, so this shouldn’t have a big impact on page load times).
Shopify also accepts .gif images, but these are very low quality. They can be an option if you want dynamic elements on the page, but overall we suggest staying away from GIFs.
One final point - Shopify helps you out by automatically serving .jpg and .png files as WebP format whenever browsers support it. This file type was developed by Google specifically for use with images on websites. WebP files are up to 30% smaller than their .jpg or .png equivalents, but the quality is comparable.
It's also important to choose appropriate image quality and dimensions. If every image serves a purpose and is taken with the shopper in mind, it will be easy to follow the best Shopify image optimization practices later on.
If you need more background to understand image specificities, read our guide on Shopify image sizes.
3. Write alt attributes
Alt attributes are what Google uses alongside the title to understand what is shown in an image. It will also use these texts when returning Google Image search results.
So, what are alt attributes? These are texts that serve as a replacement to the image, either because it hasn’t loaded yet, or for visually impaired internet users. There is an alt tag, which is essential to include for SEO, and an alt title.
Here is a quick rundown of how to optimize image alt texts for Shopify SEO:
- No keyword stuffing – Google might even penalize you if it thinks you are using the alt tag just for getting clicks.
- Include models or SKUs – searches can sometimes be very specific, so giving this level of detail can help you rank well.
- Write coherently – while file names might just be a collection of individual words (for our image, it is aroma-therapy-oil-bottle), we want our alt text to make sense as a sentence.
- Don’t write alt texts for decorative images - only include alt text when the image contributes to the content of the page.
Let’s compare these alt texts:
- Coherence - the correct version is a full sentence whereas the incorrect one is just a bunch of unrelated words.
- Keywords - the correct version includes the keyword naturally whereas the incorrect one stuffs unrelated keywords and can get penalized.
- Accuracy - the correct version mentions that it’s a dress shoe, giving more context to the image and helping target more specific searches.
TinyIMG will automatically generate Alt texts for images. This is especially useful for growing stores with many photos
Install TinyIMG now4. Name the image properly
Are all your images titled along the lines of IMG_79865.PNG? That’s not doing your Shopify store any good and it’s about time to start practicing proper image titles.
Why? Because Google takes your image titles into account when trying to decide what keywords your page should rank for.
If you want to optimize your Shopify image titles effectively, avoid random or very long titles. Instead, choose a few words that describe the image and separate them using hyphens.
Let’s take a look at a quick example from a made-up shoe store called Shoable:
Instead of a random img-79865.png or 234-g23453-fs.jpg, aim for a descriptive title, such as mens-dress-shoe-aqua-color.jpg.
Tip: Well-written image titles will not only give a little boost to your target keywords, but also help keep your media library clean and organized.
5. Make sure images are responsive
Regardless of what your store specializes in, a part of your audience gets there using their mobile devices. With Google having a mobile-first approach, you want them to have a seamless experience and serving responsive images is indispensable.
Ensuring your images adjust to the size of the screen is rather straightforward - you need to use a modern and responsive Shopify theme and it will do the job for you. These themes automatically generate blocks of HTML that instruct browsers to load specific image sizes based on the device.
6. Use original images
Shopify stores can get very heavy on images. That’s why you should try to create every image thoughtfully and make it count.
Answer these questions when before you approach a new image:
- Purpose and functionalities - is the image primarily decorative, meant to attract attention? Or is it a functional product image people will use to zoom in and explore the details? Is it meant to showcase the whole product or put emphasis on one specific detail?
- Placement - is it going to be featured as a hero image on my homepage? Or is it one of many collection images?
- Equipment - to create a unique image, do I need reflectors, backgrounds, and lights to create a proper image for this purpose? If so, should I hire a professional product photographer or can I handle it myself?
Based on your answers, decide on the proportions, angles, and other image characteristics. As a matter of fact, we've created a nice guide on taking great product images with your smartphone - make sure to follow it and see the results.
7. Create image sitemaps for your store
This is a more technical step, but it is important for you if you use a lot of carousels, image pop-ups or galleries on your site. The problem is that while they elevate your customer experience, images shown in this way can easily be missed by Google.
A good solution for this is to create a separate sitemap just for your images. Sitemaps show Google what is on your site and ensure every part of your site is crawled - in other words, it will all count towards your SEO effort.
Use this guide by Google to create a special site map just for your images. Don’t forget to include descriptive tags in your HTML.
8. Test images and make adjustments
Like any solution, testing is going to be key. And here, the situation is a little complex because you should be thinking about multiple factors when testing image optimization.
You need to think carefully about page load speed vs conversions on your page because improving one might harm the other. You have to find balance in the number of your images to satisfy your shoppers while maintaining good page load speed.
For testing, think clearly about your priorities and goals. Which of these is most important to you – page load speed and better performance on SERPs, or higher overall conversions on your website? Then look to test these different elements as you make changes to your images.
Testing for SEO:
You can’t really test how improving image SEO will affect overall search rankings, though there are good SEO tools for checking you are following best practices. Make sure you regularly check that all your images have alt tags using AdResults tool and observe the rankings of the URLs you actively optimized.
Testing for page speed:
This is a really simple one. Just enter your web address into PageSpeed Insights to see how fast or slow your site currently is.
Testing for conversions:
How you test for this will really depend on what your conversions are and what tools you are already using. But the most important point is that you need to clearly define what a conversion is, and understand why you have that metric. Good conversions to test for include time spent on a page, email, push notification or Messenger marketing sign-ups, items added to a cart or, most frequently, sales. And once you start testing, don’t change the metrics.
Other Shopify image optimization tips to consider
Already checked every box for the steps above? Time to get into more details and consider some additional image optimization tips:
- Optimize your thumbnails. Take file size over quality when it comes to thumbnails. Also, use varied alt text to not duplicate the one on your product image.
- Use decorative images sparingly. While occasional decorative images do serve to arouse shoppers’ interest, they can end up being a dead weight on the website.
- Lazy-load images. Implement the practice of loading images that appear later on the page only when the customer gets to them, improving initial load times.
- Use Shopify image optimization apps. Save yourself some time and effort by allowing the best Shopify image optimization apps to do the job for you. These apps are designed to automatically apply proper practices and automate processes.
- Never choose GIFs for product images. The file size will be immense and reducing it requires completely sacrificing quality.
- Use captions. While not a crucial part of your image optimization strategy, captions will help Google scan the page and easily follow the meaning of your image’s content.
Your images can do more
You spend lots of time and energy creating captivating pictures – so make sure you get the maximum back from that investment in time, resources and creativity. Following these steps will ensure your images are doing justice to every aspect of your website, from page speed to engagement and conversions.
Curious to read more? Check out these articles:
Frequently asked questions
Yes, Shopify automatically compresses images you upload to your Shopify store. However, the result is not always optimal and you can achieve more with dedicated third party apps like TinyIMG.
Yes, partly. Shopify compresses and resizes images as well as determines the best possible file format when serving it. For example, if the reader’s browser supports the new-gen WebP image format, Shopify will prioritize it. However, a lot of image optimization success, especially for SEO, depends on the store adminitrator.
