Must know some important image optimization tips

Image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time, image optimization is an important part of building a successful ecommerce website, since your product photography is a cornerstone of your online store.

Fortunately, you can reduce your image’s file sizes to help improve your website’s performance. One problem with formatting them is that modifications often reduce their quality (which in turn might make the visitor hate your website). 

That’s not a bad thing as long as you don’t make them ugly. There are some tricks and techniques that let you reduce the image’s file size and still keep them pretty enough to proudly display them on your website. 

So let’s take a look at how to format your images without making them ugly, as well as how to optimize images for web and performance.

What is image optimization?

Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines. Have the following questions ever left you scratching your head?

• Why is it that when I do a Google image search, my product photos never show up?
• Do I need to add alt attributes to my images?
• What’s the difference between JPEG, GIF and PNG? When should I use one over another?

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

By finding the balance between the three, you can reduce image size and improve website performance.

Why is image optimization important?

• Page speed – Large, unoptimized images can make your website slow and clunky like nothing else. Your users won’t wait around for your website to load, and optimizing your images will go a long way toward ensuring that it loads quickly.
• User experience – When your website takes forever to load, it doesn’t exactly provide the best experience for your users. Your users expect your site to load quickly. Optimizing your images helps to ensure a better user experience and that you meet users’ expectations.
• SEO – Image optimization will help to ensure that your images rank in image searches on Google, and it will also be beneficial to the overall SEO (search engine optimization) of your website. Additionally, page speed plays an important part of Google’s search algorithm, and image optimization will help you avoid the organic search penalties of having a slow website.

Different image formats

There are many different types of images. This section covers some of the main raster file formats, which are resolution dependent.

• PNG — this image type is high-quality and lossless. PNGs are often used for graphics that have different layers, for example, logos that have a color version, a black and white version, or a transparent background.
• JPEG — a JPEG image file is lower-quality than a PNG file. It’s a lossy compression format; the size of an image can be significantly reduced if compressed to a JPEG, but the payoff is quality.
• WebP — this is a superior image format developed by Google. It supports both lossless and lossy compression for web images (and supports transparency). WebP is the best image type to use if you’re undertaking image compression. WebP lossless images are much smaller in size than PNGs by around 26%.2 And WebP lossy images are between 24–34% smaller than JPG files.

Here’s a visual showing the same image in its original state, before being converted to JPG and WebP. As you can see, it’s impossible to detect any detrimental visual quality changes with the naked eye. 

Top 10 image optimization techniques

1. Use concise and direct image names

Most people don’t give a second thought to what the file names for their images are, but it turns out that it matters a lot more than you might think. Did you know that Google will actually crawl the file names of your images? Make the names of your images descriptive and keyword-rich but not spammy.

When it comes to image SEO, it’s important to use relevant keywords to help your web page 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. If you’re not going to get that data-driven, just be sure to use relevant, helpful keywords when naming your images (i.e., try to be descriptive).

2. Optimize your alt attributes carefully

The alt image tags, also called the alt attributes, are the text alternative to images when they fail to load on your website, but otherwise, they do not appear on your website.

Alt image tags are used to tell people who have visual impairments what your images are, and they’re used by search engines to determine ranking in image searches, as well as a website’s organic ranking as a whole. Suffice it to say, optimizing alt image tags is important. Here are a few rules to keep in mind to help you get it right:

• Use plain, descriptive language in your alt image tags, much like when you renamed the image file
• If the image is of a product with a serial number or model number, include it in the alt image tag
• If you can do so naturally, include a relevant keyword in your alt image tag. But, don’t force or overly stuff keywords into your tags

The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your ecommerce products to show up in Google image and web search.

Finally, always do a sanity check from time to time. View the source of your web pages and check to see if your alt attributes are filled out properly. You’ll be surprised by what you miss when you’re moving at the speed of entrepreneurship.

3. 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.

4. Resize your images

When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. (Note: If you’re a Shopify merchant, your Shopify theme automatically compresses images, so this shouldn’t be an issue for you.)

If you can decrease the size of the image files on your webpage and increase page load speed, fewer people who visit your site will click away. 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 sRBG).
• 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).

5. Choose the right image format

There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.

• JPEG (or .jpg) is the de facto standard image file type for the web. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
• GIF (.gif) images are lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation. Regarding image optimization, GIFs are great for those plain, simple images on a webpage that include just a few colors.
• PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs, and they don’t degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images. Notice how the PNG-24 image is over three times larger in file size than the PNG-8. This is why you need to be very careful with PNGs.

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.

6. Optimize your thumbnails

Most of the ecommerce sites use thumbnail images, especially on category pages. They quickly showcase products without taking up too much real estate.

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. 

Note: Shopify merchants don’t have to worry about thumbnail optimization, as we take care of that for you. 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.

7. Use image sitemaps

If your site uses Javascript galleries, image pop-ups or other “flashy” ways to improve the overall shopping experience, image sitemaps will help get your images noticed by Google.

Web crawlers can’t crawl images that are not called out specifically in the webpage source code. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.

You can insert the following line in your robots.txt file, showing the path to your sitemap:

Sitemap: http://example.com/sitemap_location.xml

Or you can submit the sitemap to Google using the Search Console.

Google has many guidelines for image publishing, which may help your website rank higher on SERPs. In addition, you can use Google sitemaps to give Google more information about the images on your website, which can help Google find more of your images than it would on its own.

Using sitemaps doesn’t guarantee that your images will get indexed by Google, but it’s certainly a positive step toward image SEO. Google Webmaster Tools has many suggestions for correctly formatting your sitemap.

It is important for you to add specific tags for all of your images. You can also create a separate sitemap to list images exclusively. What’s important is to add all the necessary information, while using specific tags, to any sitemaps you have or will create.

8. Beware of decorative images

Websites often have an assortment of decorative images, such as background images, buttons, and borders. Anything non-product related can likely be considered a decorative image.

Although decorative images can add a lot of aesthetic appeal to a webpage, they can result in a large combined file size and slow load times. Therefore, you might want to consider taking a closer look at your decorative images so they won’t impair your website’s ability to convert visitors into customers.

You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes. Here are some tips for reducing the file sizes of your decorative images:

• For images that make up borders or simple patterns, make them PNG-8 or GIFs. You can create good looking images that are only a few hundred bytes in size.
• If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
• Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.

One trick you can use to eat away at your background image size is to cut out the middle of the background image and make it a flat color or even transparent. This can decrease the file size substantially.

9. Use caution when using content delivery networks (CDNs)

Shopify merchants don’t really have to worry about this, since we’re a hosted solution, but others should pay close attention. Content delivery networks (CDNs) are a go-to place to host images and other media files. They can increase your page load speeds and help solve bandwidth issues.

The one drawback is when it comes to backlinks. As you may know, backlinks are critical for SEO, and the more backlinks you have, the better your site does in the search engines.

By placing your images on a CDN, you are most likely removing the image from your domain and placing it on the domain of the CDN. So when someone links to your image, they are actually linking to the CDN domain.

Therefore, keep these best practices in mind:

• Just because something is “trendy” doesn’t mean you should follow it like a sheep. Determine if it is really the best move for your business first.
• If your website is doing tons of business every month, then a CDN is most likely a good idea, since it can help solve bandwidth issues.
• If your site only gets thousands of visitors a day right now, chances are your current hosting situation can handle the load.

There are ways around the image SEO issues associated with CDNs, but be sure to have a professional help you strategize your move first.

10. Test your images

The entire point of optimizing your images is to help increase your bottom line. We’ve talked about reducing file sizes and getting the search engines to index your images, but what about testing images to see what converts to more customers?

• Test the number of product images per page. Since load times are an issue for some non-hosted ecommerce sites, you may find that reducing the number of images on a page will increase click-through rates and sales. It’s also possible that providing a lot of images per page will improve the user experience and lead to more sales. The only way to find this out is to test it.
• Test what angles your customers prefer. You may see an increase in customer loyalty by providing the views your customers want to see. A great way to figure this out is to survey your customers about what they liked the most when viewing your product shots. Surveying and talking to your customers is a great habit to get into, in general. Still, verify by testing.
• Test how many product listings you should have on category pages. Ten, 20, 100 products? Test the number of products you list on category pages to see what works best for your customers.

Image optimization tools

Now that you know the best practices for image optimization, let’s look at some optimization plug-ins you can use for your website.

1. AVADA SEO: Image Optimizer

The AVADA SEO Image Optimizer is one of the top apps in the Shopify App Store. It has over 1,100 reviews and maintains a 4.9 out of 5 star rating. It works to save you time and effort when optimizing images for your store. With just one click, you can put your image optimization on autopilot with AVADA. 

Some cool features include:

• Automated alt tags to every image on product page, collection page, and blog posts
• High-quality image compression to boost loading speed
• One-click optimized Googe structured metadata 
• Google Search Console integration for metrics tracking 
• Sitemap generator so search engines can read your site easily

2. TinyIMG SEO & Image Optimizer

TinyIMG SEO & Image Optimizer is another great optimization tool for Shopify store owners. It automatically optimizes images and uploads them to your Shopify store. You can restore to the original image at any time and optimize images manually, too. TinyIMG also offers:

• Image resizing
• Ability to fix technical SEO and speed issues 
• Broken link redirection
• JSON LD
• Live support
• Automated image optimization

3. TinyPNG

TinyPNG is the most popular image optimization tool on the web. It uses smart lossy compression techniques to reduce image file size for your webpage (WEBP), JPEG, and PNG files. You can shrink images for your apps or store, plus shrink animated images. 

TinyPNG’s API resizes images for thumbnails automatically, removing any unnecessary parts and adding more background. It’s available as a WordPress plug-in if you run your website on WordPress. 

Final thoughts

Image optimization helps you to speed up your Shopify website, improve your search engine rankings and means you can provide a better browsing experience for your store visitors.

The most important thing is to make sure the image and alternative text are relevant to the page. Other key takeaways:

• Choose the right file format. PNGs are my favorite for screenshots.
• Reduce file size for faster page load speed.
• Make sure your on-page SEO elements (meta data, structured data, etc.) pair with your image.
• For crawlability, create an image sitemap or make sure your images are featured in your sitemap.

Optimizing images is no joke. With advancements in voice search technology, media is a growing importance and your entire site will benefit from taking the steps above.