Uncompressed and unscaled images carry a lot of extra weight and forces your users to download unnecessary data. Optimizing your images reduces the total size of your page, meaning your page loads faster.
Do your images need optimization?
Why should I optimize images?
Images carry a large footprint (compared to HTML/CSS/JS) in terms of your total page size. Think about how you acquired your images:
- A stock photo website?
- A camera?
- A mobile device?
- A web search?
Most of these images were likely captured in a very high, print-ready quality. Some may have been resized to something more suitable for the Internet, but some aren’t. Most are not optimally compressed and contain extra data that serves no purpose for the user.
Basically, these images are larger in filesize than they need to be.
What happens when you use UNOPTIMIZED images
Using unscaled, uncompressed images on your website has a large affect on your page load. Here’s what happens:
1) The browser requests and downloads the image – it’s 2400 x 1350 and 2.5MB!
2) Based on the design of your site, the HTML/CSS scales down the image to fit your thumbnail area of 300 x 169.
3) The browser renders the scaled image on your page.
By using unoptimized images, you forced your user to download more data than they needed to. Here’s why:
- The image only needed to be 300 x 169; you used a 2400 x 1350 image dimension
- The image was exported at 12/100%/Maximum quality – this level of quality is typically reserved for print
- …or the image was taken directly from your phone/camera/the Internet – potentially containing metadata, colour profiles and an unnecessarily high quality.
When this happens for more than one image on your site, things can add up and result in a slower performing webpage.
What is image optimization?
For the purposes of this practical guide, we’re going to focus on the filesize issues with unoptimized images. There are other important areas that image optimization affects however (ie. browser re-flows); You can learn more about them here (1, 2).
Simply put; Smaller filesize = Reduced download time = Faster page load. The key concepts of image optimization boil down to image dimensions (visual size, width x height) and compression (image quality, etc).
Images with large dimensions come with large filesizes. Serving your images at their maximum display size (the largest size they might be on the page given a viewport) ensures the browser doesn’t need to download necessary data, and waste time rescaling the image.
Relevant GTmetrix recommendation: Serve scaled images
In the most basic definition, lossy compression algorithms attempt to find and reduce redundant pixels within an image. Of course, the more aggressive you are with this, the more pixels you’ll strip from the image, reducing quality.
The simplest example of compression is exporting your images for the web (via Photoshop). This includes selecting the export quality that best balances filesize savings and image quality.
In this case, you are performing lossy compression on your images, as the more you reduce the filesize, the more you reduce the quality of your image. Learn more about lossy compression here.
Lossless compression is a method where your image quality remains absolutely the same, however the data that makes up your image is organized in a more efficient and compact manner, resulting in a smaller file size.
Modern image compressors use highly advanced compression algorithms based on either lossy or lossless methods to compress your images and reduce filesize while retaining image quality.
Relevant GTmetrix recommendation: Optimize your images
In addition to dimensions and compression, image optimization also includes stripping out extraneous data that your users don’t need.
In a image file, there exists layers of data that isn’t seen by the average user. This includes general metadata like EXIF data, colour profile information and date/location.
Removing this data all together from the image leaves only the visible pixel data – the actual data that the user sees – which results in a smaller filesize for the image.
What happens when you use OPTIMIZED images
1) The browser requests and downloads the image – it’s now only 300 x 169 and 68kb!
2) No HTML/CSS rescaling is needed, so the browser renders the image as is on your page.
The result is a much faster downloading and rendering of the image(s) on your site.
“Serving scaled images” and the responsive web
So you have a responsive design for your website, and GTmetrix is alerting you to “Serve scaled images.” Isn’t there a conflict here? You might be asking:
Since responsive design resizes and scales images, it’s not realistic to serve images in the size they’ll be displayed at, because that viewport can change.
The main goal behind the “Serve scaled images” recommendation is to ensure that served images aren’t drastically out of scale.
A general rule then is to serve images at the maximum display size in your design. To be safe with retina displays, you can scale them up to 2x the maximum display size.
This will ensure maximum flexibility with responsive designs as well as optimal quality for high-density pixel displays. GTmetrix will allow a served image to be up to two times the size of its rendered display before deducting points (pages are analyzed with a viewport of 1024×768).
There’s also the usage of “srcset” and CMS handling of responsive images that should be detailed, but we will likely be writing a separate article on this. For now, you can read more about “srcset” here.
So how do you optimize images?
This explanatory guide was meant to give you a good understanding of the core concepts behind image optimization. Next in our series, we’ll show you exactly how to compress and scale images correctly so that you can optimize your website’s page size footprint.
Read our Part 2 in this series: How to Optimize Images: A Practical Guide