How to Optimize Images On Your Website

Image optimization is one of the factors that can critically affect your website. Everything from page load time to site crawlability depends on it, and yet it remains one of the most commonly ignored parameters of site optimization.

However, if you want to take your SEO seriously and reap the numerous rewards that come with having a well optimized website, then learning to optimize your images is something that’s inevitable.

If that’s a priority for you, then read on because this article will dive into what exactly image optimization is and how you can successfully practice it on your website in order to ensure that you’re in line with the best practices for your site.

What is Image Optimization?

Simply put, it is the practice of obtaining the highest quality images possible while simultaneously keeping image file size low. The reason this is so important is that it improves page load time.

The second aspect of image optimization is the SEO aspect. This involves optimizing your images with the aim of having both decorative images and product images from your website, particularly ecommerce sites, ranking on image search engines like Google.

A major focus of image optimization is on how to reduce image file size without losing quality so that your images look great whether they’re being viewed on desktop or mobile phone. By finding a balance between several parameters, we can ensure that our images are the best quality possible without impacting web performance.

Why Does Image Optimization Matter?

So why go through the hassle of optimizing your images at all? Well, images constitute a major part of your website’s weight, particularly if they are unoptimized. This means that they impact the time your website takes to load significantly. In fact, they’re one of the most significant factors that matter to your page load time.

The time it takes to load the content on your site or load a page is very important because it’s what your viewers deal with while accessing your website. Particularly if you’re running an ecommerce website, then page load time greatly affects your sales. You don’t want to have customers wait around for your page to load, especially when they could change their mind about a purchase if they can’t make it quickly.

The time it takes for the first byte of data to reach from the web server to your browser may be in milliseconds, but should it be delayed by a second or two, it can greatly affect how Google’s algorithm ranks your site. More importantly, your audience or site customers can tell when a page doesn’t load instantly and are likely to move on to another source of information or content. All of this can be avoided by optimizing your images well.

How Do You Optimize Images on Your Website?

Let’s jump right into some of the parameters involved in website optimization. These are definitely some of the most crucial to keep in mind when optimizing your site, although there are several more that you can benefit from.

Table of Contents:

• Choosing The Right Format
• Optimizing Image Names
• Caching
• Resizing Images
• Use Image Sitemaps
• Optimizing Alternative Attributes
• Image Optimizing Tools
• Additional Tips and Tricks
• Test, Test Again and Then Test Some More

Choosing The Right Format

There are three file formats that are important to keep in mind while choosing a format for your web images. Let’s take a look and how you can ensure you’ve picked the right format.

• PNG format produces the highest image quality. Unfortunately, it also has the highest file size. These are used whenever you want to ensure high image quality because they are uncompressed and while it’s lossless, it can be configured to enable lossy compression.
• JPEG is a compromise between image quality and file size. By adjusting the JPEG quality level, you can slightly reduce the quality and have a much smaller file size.
• GIFs are great for animations and only support 256 colors. GIFs have lossless compression, and they’re rarely used for static images.

JPEGs are great because they have two rendering modes you can use. Baseline loading displays the full quality image from top to bottom, and progressive loading starts with a low quality image and gradually increases the quality as the page loads. For people with slow internet connections, using JPEGs can create a great user experience.

Apart from these, next generation formats like WebP and JPEG-XR can deliver high quality while simultaneously having smaller file sizes, exactly what you want if you’re looking to reduce image file size without losing quality. They’re great for SEO too, but not all browsers support this format, so it may be necessary to prepare a fallback image in another format in order to display.

Optimizing Image Names

Anyone who’s well versed with SEO understands that search engines crawl image file names along with the text on the webpage. So ensuring that your images have descriptive, keyword rich and relevant file names is very important for image SEO.

If your site caters to a specific niche of content, then think of keywords that match the search intent your audience might have. These make great names for your image files. If you can’t think of super specific names, then aim to be descriptive.

This is a great way to improve your On-Page SEO as well as rank higher on search engine result pages. Aside from image optimization, if your On-Page SEO is something you’re serious about, then it’s worth getting an SEO tool to help you with that. This obviously helps you with keyword optimization, something you require to name your image files, but also helps with several other SEO best practices.

Caching

Caching is a great way to ensure page load times are not too long, especially if you have a lot of images on your pages. With caching, the image files are stored in a browser cache or proxy server. This can help reduce the downloaded side as well as the application requests of each page.

This does require setting storage for images on several point-of-presence servers located around the world. Images are served from the closest server and as a result page load times are significantly sped up.

Resizing Images

The time your page takes to load impacts your ranking, however that also means that quicker load times work in your favor. Most consumers won’t wait beyond a few seconds for your page to load, so it’s in your best interest to ensure that your page load times are kept to a minimum.

One way of doing this is to resize your images. Balancing size and resolution is an important factor that you must consider. The better the resolution, the larger the file size will be. Try to keep images to the smallest size that still provide the desired visual effect. You can also only display a thumbnail and provide the full resolution image only upon request.

A great example of this can be found on the American mattress company Amerisleep’s website. Notice the thumbnails on the side of the product image. The full size image with a high resolution is only loaded once the viewer has clicked on the desired thumbnail. This way, the images are optimized so as not to affect page load times.

Although slightly difficult, a good rule of thumb is to keep images, especially for eCommerce sites, below 70 kilobytes. Remember that it’s actually costing you revenue to have a slow website, so take this seriously.

Use Image Sitemaps

Google cannot crawl images that haven’t been called out specifically in the webpage source code. Several websites use image popups, JavaScript galleries and other similar features to improve the overall shopping experience. The problem with this is that the web crawlers can’t locate and crawl these images, and as a result it won’t help your rankings.

The solution to this problem is a simple one. Simply list the location of these images in an image sitemap. You can either do this through a line of code in your robots.txt file or by using Google Search Console to submit the sitemap to Google. Don’t forget to add specific tags to the images you use and, if you want, feel free to create a separate sitemap all together to list images exclusively.

By using Google sitemaps, you also allow Google to find more information about the images on your website than it would on its own. This does not guarantee that the images will be indexed by Google, but it’s definitely a great SEO practice which can help your website rank higher on search engine result pages or SERPs.

Optimizing Alternative Attributes

Sometimes browsers can’t always render images properly and as such have alt attributes which function as text alternatives to the images. Alt attributes also play a huge role in web accessibility. Even after the image has rendered, depending on what the settings of your browser are, you can hover over the image to see the alt attribute text.

In addition to the SEO value that alt attributes add to your website, they also play an important role in helping you rank better on search engine result pages. This is provided you’ve added the relevant keywords to the images on your website. If you’re running an eCommerce store, then this is probably something you need to take seriously to get your products ranking on Google images and search results.

Image Optimizing Tools

Adobe Photoshop is perhaps the most famous software when it comes to anything image related. But unaware to many, Adobe allows you to save the images you’re working on specially optimized for the web.

To do this, open the image you’re working on and select the option File >> Save for Web. On the dialogue box that pops up, you will see the various format options you can select. If you select JPEG then you can choose the image quality you want and the relevant file size will be displayed under.

If you’re looking for more options, check out our article on free Adobe Photoshop alternatives.

TinyPNG is another great browser based tool that reduces the size of your PNG files through a smart lossy compression technique. All you need to do is go to their website and drag and drop the image of your choice, and they will let you download the compressed version. They also have a similar website for JPEG format images.

Additional Tips and Tricks

There are a few more hacks you can use when it comes to optimizing the images on your website. Let’s take a look at two of these and how they might be able to help improve the load time of your web page.

Lazy Loading

Think about the way you normally browse a webpage. If the content you are reading is interesting and engaging, then you don’t usually scroll down fast. Instead, you spend a significant amount of time on what you’re reading and slowly move towards the bottom of the page. Lazy loading uses this behavior pattern to its advantage.

Since you only need to view the images that are related to the content you’re reading and that are within the reader’s view, there’s no real need to immediately load the images at the bottom of the page. Instead, you can simply load a placeholder image and only load those images when the viewer scrolls down far enough that they become visible.

Notice this article by LuckMag magazine on the Best Standing Desks. Since it has a number of products displayed, there are several images to load on each page. In order for the loading time to not be affected by this, lazy loading has been enabled, as can be seen by inspecting the image element.

By loading only those images within the browser which are viewed first and leaving a placeholder image everywhere else that only loads when the viewer has scrolled down to view the said image, we can greatly increase the page load time without compromising the quality of images. There are several plugins that can be utilized to allow Lazy Loading.

Blur Up

The Blur Up technique is a great way to give your audience the illusion of a faster loading time. While this does not actually improve the load time of your page, using this technique on your images is preferable because it is still better than having your audience look at a blank screen.

Although you ideally want to reduce image file size without losing quality, sometimes this is not possible, and you’re left working with large image files on a page, causing you to have a slow load time. To give the illusion of a faster loading time under the Blur Up method, you load an LQI or Lower Quality Image first and then the full size image later.

The user thinks the images are loading faster than they actually are and even has something to look at instead of a blank screen. This creates a more pleasant experience for the user and is one of the most handy tricks you can employ on your site.

Test, Test Again and Then Test Some More

The entire point of optimizing images on your site is to get better results, and this means knowing where you stand before you get started. You can’t measure improvement if you don’t know what needs to improve. This is why testing is extremely important. Start by benchmarking your site’s current speed and performance.

Next, test out home many images you actually need on your page. Do you require decorative images in the background? Is every single product image on your site necessary? How many images are you willing to remove in order to have an improvement in page load time? These are all important questions you need to ask yourself.

Finally, try and establish what works and what does not through the process of elimination. If you’ve noticed great results through certain practices then make a note of them and if you aren’t seeing any results then keep experimenting. Trial and error is a great way to establish what to continue with going forward and what to ignore. The points on this page are a great place to begin, but make sure you keep updating yourself on the latest formats, recommendations and best practices related to image optimization. The rewards are always worth it.