The Ultimate Image Optimization Guide
Images drive a large amount of traffic in today's world and making sure your images are optimized will boost your website's performance and increase conversions. Let's take a look at the ins and outs of image optimization...
Have you ever visited an eCommerce store with no images or bad quality images? It makes you wonder if the product is all they say it is, or if the business is trustworthy.
Unoptimized eCommerce images and poor-quality product photos have been proven to deter customers and send them running to your competitors. Which is everything you don't want as an online store owner!
Google's search results have become increasingly more visual which means that optimized images are more important than ever before, particularly in eCommerce where shoppers expect quality images and fast loading speeds.
Media search tends to be the last thing we think about but it's capable of revving up your search engine optimization, improving the shopping experience, turning visitors into customers, and driving overall brand influence and trust.
We're going to help you make the most of your images by covering the simple rules of image optimization, including image SEO strategies.
What Is Image Optimization 🧐
When we say image optimization you might be thinking of the balance between size and quality, but creating high-quality images with the lowest file size is just one small piece of the puzzle.
Image optimization has many facets including file format, image file size, thumbnail images, site loading times, customer retention, and image SEO strategies.
We'll be talking about the best strategies to ensure each of the beautiful photos on your eCommerce store are working in your favor
Why Is Optimizing Images Important 🤷♀️
- It can improve your core web vitals score: Core Web Vitals are three metrics that score a user's experience loading a webpage. These metrics score how quickly page content loads, how quickly a browser loading a webpage can respond to a user's input, and how unstable the content is as it loads in the browser.
- It helps with faster site loading/improved page load speed: Alongside website host and design, images are the biggest contributor to slow load times. Bounce rates increase if the average page load time is not between 3 - 5 seconds.
- It plays a big role in SEO: images improve search performance, drive more organic traffic, and open up new potential customers through image searches.
- It improves the user experience: Images that are well optimized and load correctly improve UX because the site remains visually appealing and easy to navigate. Improved interactions on your site also have a positive impact on search engine rankings.
Image optimization creates many advantages such as better user experience, faster load speeds, and additional ranking opportunities. And, it’s becoming increasingly more important in attracting potential customers in a jam-packed digital landscape.
How To Optimize Images For The Web 🎯
Let's dive into the best ways to optimize those images for greater success...
- Be Mindful Of Image Quality And Relevance 🧘♀️
- Adjust Image File Size 🔍
- Choose The Right Image Format 👩🏫
- Customize Image File Names 📝
- Add And Optimize Alt Attributes 🤓
- Choose And Test Product Angles 👀
- Use Decorative Images Wisely 🎨
- Own Your Copyright And Create Unique Images 🚫
- Make Sure Images Are Mobile-Friendly 📱
- Optimize Your Thumbnails 👍
- Add An Image Sitemap 👨💻
- Collect Social Signals From Your Images 💌
1. Be Mindful Of Image Quality And Relevance 🧘♀️
High-quality images are more visually appealing which draws customers into clicking on them. They also create more backlinks as images are saved or added to digital wish lists.
However, huge files slow down the site loading so you want to have the lowest file size without losing acceptable quality. Remember that the image needs to be perfectly curated in terms of background color, lighting, clarity, and a clearly visible product.
In the customer's mind, good-quality images equal good-quality eCommerce products.
All surrounding content should be relevant to the product as this will help your SEO. If Google crawls your site and sees pictures of shoes but the content is about power tools, this will result in a mismatch and subsequent bad ranking.
2. Adjust Image File Size 🔍
Image size and file size are two different things. Image size refers to the dimensions of the image (measured in pixels) and the image file size is the amount of space needed to store it on the server (measured in kilobytes or KB).
Using a larger file size will slow down your page loading time and affect your search engine ranking.
Luckily, Shopify themes automatically compress images! If you need to compress images yourself, you can use a photo editing tool such as Adobe Photoshop, Paint, Photoshop Express, or various free online image editing tools.
In Photoshop, use the Safe For Web command and adjust the image to the lowest file size without compromising on image quality. You can also use export as.
Keep the balance between file size and quality at all times. The ideal image size for eCommerce is below 70KB.
If you want to offer larger images, provide the smaller image and make the product images zoomable. This will keep your images optimized while offering your customers the option to view a larger image should they want to.
3. Choose The Right Image Format 👩🏫
The standard image file types include JPEG, GIF, and PNG. These are the most common file types used for online images, but do you know the difference? Knowing the difference between file types can be a huge help in optimizing images.
- JPEG: This is your standard image type for the web and can be compressed considerably. This means you get high-quality images with a low image file size. Keep in mind that JPEG quality is lost over time with re-saving so it's always a good idea to keep the original photo as a backup.
- GIF: A GIF is lower quality than a JPEG but can be used for a simple image such as an icon, button, simple pattern, or other decorative images. You can also have an animated image using GIFs or use GIFs for thumbnails.
- PNG: PNG images are becoming a popular alternative to GIFs. They support more colors and offer high-quality images that don't degrade over time as JPEGs do. It's worth mentioning that they do have a larger file size. If you use PNGs as an alternative or only have access to a PNG file type (from a wholesaler for example), use PNG-8 over a PNG-24 image.
Below is an example of each image type. You can see that they are all the same image size but the file size and quality differ.
The above image is saved in JPEG, image size 1024 x 341, image file size 66.1KB.
The above image is saved in PNG format, image size 1024 x 341, image file size 335KB.
The above image is saved in GIF format, image size 1024 x 341, image file size 120KB.
4. Customize Image File Names 📝
Most people upload their photos and use the default file names. Doing this means you miss out on helpful keywords which will boost your SEO. Search engine crawlers look for appropriate terms in your images and names like IMG_2814.JPG will come up as unidentified images.
The image file naming process needs to be thought out. Rather rename your images to align with the image content. Be concise and use a relevant keyword or descriptor such as Sakura Yoga Wheel Black Mandala or Alignment Yoga Mat Purple.
A descriptive, keyword-rich file name is important for image optimization.
You can also do a product name search to determine the most common keywords people use to search for that particular product.
Besides a default image name, keyword stuffing will also work against you. Keep it simple and specific to help search engines understand what is on your site and you will rank higher.
5. Add And Optimize Alt Attributes 🤓
Alt attributes, also called alt tags, are a written description of the image using plain language. These are used as an alternative to images, if your image does not load properly, or for web accessibility such as screen readers, which tell people with visual impairments what the image is.
Alt image tags are used within HTML code to describe the specific images on your page and are used in SEO.
Make sure you fill in the alt attribute for each product and use plain, descriptive language as you did for the image file names above. You can also include the angle of a product image such as side view or front view.
If your product has serial or model numbers, you can include this here as well. For example, a product such as a laptop may have a file name and alt tag which includes the model number.
Even if the image is rendered (depending on your browser settings) you can see the alt attribute text if you hover over the picture.
Alt tags don't need to include keywords as it's more important for them to illustrate the picture, and they are normally around 125 characters or 10 - 15 words in length.
6. Choose And Test Product Angles 👀
It's not uncommon to show multiple angles of one product, but you don't want to overdo it. As mentioned above, too many images can affect your page load time so you'll want to choose which images are must-haves and which aren't.
You can use split testing to test which angles your customers prefer and then use those and chuck the rest. It seems strange, but you may see an increase in customer loyalty just by providing the views they want to see!
Remember to give each product angle a unique alt attribute to describe it. You can just add on to your base alt tag, for example:
Yoga Wheel Black Mandala → Yoga Wheel Black Mandala Wheel Side View
It's also important to make sure your products have the right dimensions and that each product image is the same size.
7. Use Decorative Images Wisely 🎨
Decorative images are solely used for aesthetic appeal and don't add any value to your SEO. They do however improve the user experience and visual appeal if implemented correctly.
These include background images, borders, spacers, etc., and can lead to slow load times if overdone.
To optimize your decorative images and improve your average page load time, minimize file size and compress as much as possible without losing the image quality and make your background image transparent or in flat color.
You won't need to add alt attributes to these images as they are not relevant to the site content and you could end up over-optimizing and having search engines penalize you.
8. Own Your Copyright And Create Unique Images 🚫
Copying images from other sites is a breach of copyright and will also hurt your SEO. It's always best to use an original image because you're more likely to grab your customer's attention, and can avoid being sued!
Likewise, if someone is using your images without your permission, they are in breach of copyright. You can check to see if others are using your images by performing a Google image search for a specific photo. This is valuable as having your unique images used on other sites without credit, can negatively affect your business.
In some cases, you will need to use stock photos provided by the wholesaler (if using dropshipping for example), in this case, make sure there is no copyright conflict and that you have permission to use these photos.
Should you need some generic stock imagery or icons, there are loads of sites that offer royalty-free images that can be used. Just don't fill your site with generic stock images as it will lose its originality and will score badly in search engine results.
9. Make Sure Images Are Mobile-Friendly 📱
We might forget that more than half of internet traffic comes from mobile devices. This means you'll want your eCommerce store to be responsive so that mobile users are able to access your store and enjoy the experience as much as a potential customer viewing the desktop version.
Once you've chosen the correct file type and have compressed and optimized your images, review your store on several devices to make sure everything shows up as it should.
You can make use of Google's mobile-friendly test or simply type your store URL into your mobile to see how the store responds on a mobile screen.
While you check that everything is working visually, you can also test loading speed. By making sure your store is mobile-friendly, you'll improve the bounce rate and increase sales.
10. Optimize Your Thumbnails 👍
Thumbnail optimization is important as these are often used at critical points during the shopping process, such as effectively showcasing numerous products on category pages or when a customer shares a product on social media.
Thumbnails are an important part of eCommerce, but you'll have to be careful that they don't slow down your site.
To make sure these images work for you, and not against you, make your thumbnail file sizes as small as possible without losing quality and use alt tag text that is different from their larger counterparts.
If you use alt tags that are the same, you might find the thumbnail being indexed instead of the larger image.
11. Add An Image Sitemap 👨💻
With any web search, a search engine's goal is to provide the best and most relevant results for users. The same applies to image searches.
An image sitemap is an XML file that lists all the image URLs on your site.
Submitting an image sitemap allows search engines to crawl and index your store more easily. This will increase the chances of your images being found in image searches and will allow customers to find you more easily online.
While sitemaps are not a requirement, they certainly improve your SEO by helping search engines to crawl and index valuable pages and images on your store.
You can submit your sitemap to Google by using Google Search Console.
12. Collect Social Signals From Your Images 💌
Social Signals are any type of social interaction with your site. This includes likes and shares to sites such as Facebook, Pinterest, or Twitter.
Having your images pinned or shared increases social traffic, brand awareness and engagement, and direct sales. It also increases the chances of your products going viral.
Pinterest is often used as a digital wish list and is one of the top channels that drives eCommerce sales.
A great way to collect social signals is to add like and share buttons to your product pages or encourage customers to share once they have completed a purchase by using a pop-up. hyperlink to FB share button post
Conclusion 🙌
Now that you're clued up on best practices for image optimization, you'll be adding those descriptive keywords, seeing your site speed increase, knowing how to navigate copyright for external images, and still being able to display beautiful product photos without compromising on your overall site quality!
Images improve the overall shopping process and have a huge impact on click-through rates and sales.
Keep testing your images to find out what works best for your potential customers. This includes performing a sanity check from time to time to ensure your site is running smoothly and that you aren't over-optimizing.
Here are a few questions to ask yourself as you optimize your images:
- Which images are bringing in the most search traffic and why?
- Are products with more pictures selling better than products with fewer pictures?
- Which photos are resulting in more conversions and sales?
- Which product angles are resulting in better conversions and traffic?
If you found this useful, feel free to check out our how-to posts on setting up a successful Shopify store.