We all know how important it is to ensure your website loads quickly. Speed is vital to the success of your website; countless tests have shown that page load speed directly impacts your revenue, pages per visit, and user engagement. And guess what accounts for more than half the weight of the average website? Images! In this post, I’m going to show you how to identify opportunities to optimize your images, which will in turn improve the speed of your site.
Be Proactive: Examining Critical Pages of Your Website
Instead of waiting for signs that your site might be slow or that your images are not optimized, let’s take a look at your site and try to find any poorly performing images. An obvious place to start is your homepage. If it takes too long to load, many users are going to leave before they have even begun to interact with your website. (By some accounts, 40% of users abandon a website that takes longer than 3 seconds to load.)
If your homepage isn’t as important for you, focus on the pages most critical to your customer’s experience on your site. For example, a real estate or hotel booking site should focus on the search experience. A user searching by location might be taken to a search result with a large number of images. Here, lowering the weight of these images can mean drastically speeding up the user experience and ultimately retaining more users.
Utilize Your Browser Dev Tools
There are numerous cool websites and tools out there that can help measure your site’s performance. One of the easier methods is simply to access the dev tools that are already in your browser. Although my example below is in Chrome, Firefox offers very good built-in dev tools as well.
Go to your homepage, open your browser’s dev tools (right-click, then choose “Inspect,” or use the shortcut Command + Alt + i). Navigate to the Network tab, then do a hard refresh of your browser (Command + Shift + r) to clear the cache and refresh the page. Once your site loads, you can isolate your image files by clicking the “img” button. Sort by size to see which images are your heaviest. Here is an animation from a Chrome browser so you can follow along:
Now that you can easily identify your heaviest images, you can make some common sense decisions on whether they need to be optimized. The heaviest images should typically be images such as a large hero image or a large background image. If they are not, then we should take a closer look. In my animated example, sorting by image size reveals that my heaviest image, at 1.1 MB, is actually a PNG file.
As we will discuss later, the PNG format can be a red flag. In this way, a quick use of your browser dev tools can highlight easy-to-fix issues. You might discover, as many do, that your heaviest images can be optimized by correcting two common issues: the size of an image and the format of an image.
Loading the Actual Size of an Image
It is very common for a website to load an image that is much larger in size than the one that ultimately appears in the browser. This can be a confusing concept at first, but even though the image appears small, the browser may merely be displaying it at smaller dimensions while the site is still loading a larger version. When using your browser’s dev tools, you can often inspect an image to see the size of the displayed image as well as the size of the loaded image. (Some browsers use terms like “natural size” or “intrinsic size” to refer to the actual size of the loaded image.)
Above, you can see an example of a 800×600 image that is being displayed at 190×140. The loaded 800×600 image is 73.6 KB. If we chose to load the 190×140 image instead, we would be loading only 8.4 KB—lowering the image weight by 88%!
Optimizing Image Formats
One of the quickest ways to improve the performance of your images is by optimizing their formats. A common format misstep, for example, is the use of screenshots. When users upload their own content, they often take a screenshot on their computer and use that image. By defaults, screenshots are saved as PNGs. However, PNGs are meant for icons, text, or drawings; when you use a PNG format for other items, they can be extremely heavy. But even if all of the images on your website are good ol’ JPEGs, it may still make sense to optimize them by converting them to a WebP (30% lighter than JPEGs) or a Progressive JPEG (10% lighter than JPEGs).
I know it sounds like a time-intensive task to change the formats of all of your images, but it may be well worth it. If you use imgix, of course, the fix takes mere seconds; you can simply add auto=format,compress to your URLs. This will optimize each image’s format based on several factors:
- If the browser is Chrome, the image will be served in WebP format. This is a great format by Google that will make your images lighter at the same quality level. It even supports transparency.
- If the browser is not Chrome:
- If the image contains transparent pixels (as with many logos), the image will be served in PNG8 format. This is a lighter version of PNG that still supports transparency.
- If the image does not contain any transparent pixels, the image will be served in Progressive JPEG format (say goodbye to those heavy screenshots). PJPGs are supported by all modern browsers, are approximately 10% lighter than JPEGs, and are loaded differently—with a blurred version of the entire image that sharpens, rather than leaving white space while the image loads (although this all happens extremely quickly and can be hard to notice).
Here is a good example of this optimization process. I took a screenshot of the imgix homepage, uploaded it to my imgix account, and added a h=400 to resize it:
This weighs 297 KB. Now let’s add auto=format,compress to the URL string to optimize the format. Since the image does not contain any transparent pixels, it will be served as a 28.9 KB WebP file in Chrome browsers and a 35.5 KB PJPG file in other browsers—a drastic reduction in file size. In other words, we can reduce the image to approximately 10% of its original weight simply by choosing a more appropriate format, and imgix does this automatically.
Other Tools You Can Use
Manually using your browser’s dev tools to look for the heaviest images isn’t always the fastest way to find opportunities to optimize your images, though it’s a useful exercise to understand the basics. Now I am going to introduce a few other tools that are automating this process for you:
Google Pagespeed Insights
Google Pagespeed Insights has gone through several iterations, and it just gets better and better. The most recent update powers the tool with Lighthouse, an open-source analysis engine that audits your website performance. This tool provides all types of optimization insights, but from an image perspective it will identify when images are incorrectly sized and when they should be served in better image formats. This is even built into the Audit tab of your Chrome browser dev tools.
WebPagetest
WebPagetest is another popular tool for auditing your entire website. Some people prefer receiving letter grades for individual categories instead of an overall score like the one generated by Google Pagespeed Insights. Another unique feature is that WebPagetest will allow you to simulate a specific location and browser.
Page Weight
I love using tools like Pagespeed Insights, but sometimes I want to focus just on the images. Page Weight, built by imgix, measures the weight of your site’s current images and creates a side-by-side comparison with those same images, if their sizes and formats were optimized by imgix. This allows you to see clearly how much image weight you could lose. Obviously every site is different and will use different levels of quality compression, but this tool is particularly adept at highlighting image optimization opportunities.
