Large, under-optimized images slow down site speed and drive people away from your store. Research shows that if an eCommerce site loads slower than expected, over 45% of visitors admit they’re less likely to make a purchase.
Image optimization and photography is an art and science you want to master if you’re serious about building a successful eCommerce website. From attracting shoppers perusing Google images to reducing site load time, image optimization is an important part of building a successful online store.
To help small businesses looking for the right tools and tips on how to get started, we consulted with experts in the field to find the best ways potential eCommerce entrepreneurs can get their sites ranked higher in search engines and attract more audiences into their stores.
What is image optimization?
Images are the most expensive elements of your page. Because they block rendering, they’re often what cause web browsers to slow down while loading a website. Plus, images that aren’t optimized for delivery also weigh down your site and can take away from your product’s story or value proposition. Image optimization is about compressing the file size of your images without sacrificing quality.
Image optimization means ensuring your images look flawless on desktop and mobile. And that they don’t hinder web performance.
The goal of image optimization is to create high-quality images with the lowest file size. Three main elements play a role here:
- Image file size (JPEG vs. PNG vs. WEBP images)
- Compression level
- Image height and width
Finding the balance between the three can drastically reduce image size and improve website performance.
Image optimization is important for your eCommerce site, but it’s also an art form that takes time to master. It’s more than simply reducing your JPG file sizes; it requires technical know-how of coding, color spaces, compression levels, image resolution and more to create images that are perfect for delivering online.
The good news? You don’t need to know every detail about the aforementioned topics in order to get started
Why do we optimize images?
Images are the largest contributor to overall page size, which makes pages slow to load. Data from HTTP Archive reveals that unoptimized images make up, on average, 75% of a total webpage’s weight. This can result in a negative impact on your website performance.
A slow site can lose customers that are dissatisfied with the speed or usability of your eCommerce store. Ecommerce shops with poor load times experience 20% higher bounce rates than fast-loading sites according to Google research.
Image optimization helps lower your webpage’s weight, which results in the following benefits:
Higher search engine rankings Lower bounce rate More page views per visit (conversions) Improved customer satisfaction Better site engagement
Improved website speed
Image optimization for web and mobile exists to make web pages load faster. They create a better browsing experience for shoppers. Should there be a mere two-second delay in your page speed, your bounce rate can increase by 103%.
Though image optimization does not directly result in sales, it plays an important role in all of the following areas that are linked to more conversions:
Google has suggested that site speed is one of the signals used by its algorithm to rank pages.
Research from Moz has shown that Google may specifically measure time to the first byte when it considers page speed. A slow page means that search engines crawl fewer pages with their crawl budget, which can negatively affect your indexing.
Images are the most expensive elements of your page. Because they block rendering, they’re often what cause web browsers to slow down while loading a website. Plus, images that aren’t optimized for delivery also weigh down your site and can take away from your product.
Top 10 image optimization techniques
1. Use concise and direct image names
It's really easy to blow through hundreds of product shots and keep the default file names your camera assigns.
When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
You could use the generic name your camera assigned to the image (e.g., DCMIMAGE10.jpg). However, it would be much better to name the file 2012-Ford-Mustang-LX-Red.jpg.
Think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search terms like:
- 2012 Red Ford Mustang LX
- Ford Mustang LX Red 2012
- Red Ford Mustang LX 2012
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
2. Optimize your alt attributes carefully
Alt attributes are the text alternative to images when a browser can't properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
Alt attributes are considered the text equivalent to the image and help crawlers understand your content better.
When it comes to search engine optimization, there are three main things you should keep in mind when optimizing alt attributes: Length – You should use a maximum of 150 characters or less. Including keywords is an important part of choosing the right words because they add value to your webpage and help search engines understand what the image is about. Keywords – Make sure you include keywords that are relevant to your product
The number one priority when it comes to image optimization is to fill out the alt attribute for each product image on your site.
Here are some simple rules for alt attributes:
- Describe your images in plain language, just like you did for your image file names.
- Include keywords.
- Keep your alt attributes short and sweet, but don't skimp on information! Your images need to be useful and relevant to the page they're displayed on, not just used as decoration.
Choose your image dimensions and product angles wisely
It’s common practice to show multiple angles of your product. Going back to the Ford Mustang example, you wouldn’t want to show just one shot of the car, especially if you’re trying to sell it. It would be in your best interest to show shots of:
- The interior
- The rear (especially that air spoiler)
- The rims
- The engine (it is a Mustang after all)
The best way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating unique alt attributes for each product shot:
- 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> using the alt attribute of: alt="2012 Ford Mustang LX Red Leather Interior Trim"
- 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> using the alt attribute of: alt="2012 Ford Mustang LX Red Rear View Air Spoiler"
The key here is to add descriptions to your base alt attribute so that potential searchers land on your website. If you do the extra work, Google will reward you with searchers.
Resize your images
Nearly 50% of consumers won’t wait even three seconds for an eCommerce site to load.
Globally, the average page load time is actually increasing.
Amazon found that if its pages were to slow down by just one second, it would lose $1.6 billion a year.
Google uses page load time as a ranking factor in its algorithm.
So how quickly does your website load? Remember that Google has an incentive to return the best results in the shortest amount of time. If your page takes a while to load, you can expect to lose some organic search traffic from Google.
In addition to loading slowly, pages with images that are too large will have a negative impact on two other factors: Time-on-Page and Bounce Rate.
If you have images that slowly “drool” down the screen and take over 15 seconds to load? Well, you can kiss that prospective customer goodbye!
One way you can reduce image file size is by using the Save for Web command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye on image quality.
- Quality: Find this in the top right-hand corner (e.g., 70).
- File format: Find this in the top right-hand corner (e.g., JPEG).
- Optimization: Find this checkbox in the top right-hand corner (e.g., Optimized).
- Color: Find this checkbox in the top right-hand corner (e.g., Convert to RGB).
- Downsizing and sharpening: Find this in the bottom right-hand corner (e.g., W: and H:).
- Expected file size: Find this in the bottom left-hand corner (e.g., 136.7K).
If you don’t have Adobe Photoshop, you can use
- Canva is another fairly advanced online image editor.
Choose the right image format
There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.
Here are some tips to remember when choosing file types:
- In most cases in eCommerce, JPEGs will be your best bet. They provide the best image quality for the smallest file size.
- Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
- PNGs can be a good alternative to both JPEGs and GIFs. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.
Optimize your thumbnails
Thumbnails are great, but be careful: they can be a silent killer. The victim? Your page load speeds. Thumbnails are usually presented at critical points during the shopping process. If they are preventing your category pages from loading quickly, you could lose a potential customer.
So, what can you do?
- Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file size here. Remember, the cumulative impact of your thumbnails will have a huge impact on your page load time.
- Vary your alt attribute text as to not duplicate text that you would use for the bigger versions of the same image. As a matter of fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the larger image. A case could be made to leave out the alt text entirely.
Keeping beautiful photos functional
Now questions about your eCommerce images won’t leave you tossing and turning for hours.
You know some image SEO strategies to get your product photos into Google image search results. You know how to fully leverage alt attributes. You know the difference between file types and when to choose each option.
Still, image optimization is complex and we’ve just scratched the surface, so feel free to leave any questions you might have in the comments below.
I am using tools for my writing all of the content titles, product descriptions, and many more
Write Your Marketing Copy For Free click here to learn more