How to optimize images to improve website performance

Overview

Images are one of the most basic types of content served on the web. They say a picture is worth a thousand words. But if you are not careful, the image size can sometimes reach tens of megabytes.

So, while web images need to be crisp and clear, they can be made smaller and more compressed, keeping loading times at acceptable levels.

On my site, I noticed that my homepage had a page size of over 1.1MB, with images taking up about 88% of that. I also noticed that the images I was serving were larger than they needed to be (in terms of resolution). Clearly, there was a lot of room for improvement.

I started reading Addy Osmani’s excellent Essential Image Optimization e-book and started doing some image optimization on my site following their recommendations. , then did some research on responsive images and applied it.

This reduces the page size to 445kb, about 62%!

What is Image Compression

Compressing images is about reducing the file size while keeping the image at an acceptable resolution. I use imagemin to compress the images on my site.

To use imagemin, make sure you have Node.js installed, then open a terminal window, cd into your project, and run the following command:

npm install imagemin

Then create a new file called imagemin.js and write the following content:

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

You can change the values ​​of PNGImages, JPEGImages, and output according to your needs to suit your project structure.

In addition, to perform image compression, you also need to install the corresponding plug-in according to the type of image to be compressed.

JPEG/JPG

Advantages of JPG

The biggest feature of JPG is lossy compression. This efficient compression algorithm makes it a very lightweight image format. On the other hand, even though it is called "lossy" compression, JPG compression is still a high-quality compression method: when we compress the image size to less than 50% of the original size, JPG can still maintain 60% of the quality. In addition, the JPG format stores a single image in 24 bits and can present up to 16 million colors, which is sufficient to meet the color requirements in most scenarios. This determines that the quality loss before and after compression is not easily detected by our human eyes - provided that you use it in the right business scenario.

JPG usage scenarios

JPG is suitable for presenting colorful pictures. In our daily development, JPG pictures often appear as large background pictures, carousel pictures or banner pictures.

Disadvantages of JPG

Lossy compression is indeed difficult to reveal in the carousel shown above, but when it is used to process images with strong lines and strong color contrast, such as vector graphics and logos, the image blur caused by artificial compression will be quite obvious.

In addition, JPEG images do not support transparency processing, and transparent images need to call PNG to be presented.

Compress JPEGs using MozJPEG

Mozilla's MozJPEG tool is used here, which can be used as an Imagemin plugin via imagemin-mozjpeg. You can install it by running the following command:

npm install imagemin-mozjpeg

Then add the following to imagemin.js:

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));

The script can be run by running node imagemin.js in your terminal. This will process all JPEG images and place optimized versions in the build/images folder.

I find that setting the quality to 70 produces a sufficiently sharp image in most cases, but your project needs may differ and you can set this value to suit your needs.

By default, MozJPEG generates progressive JPEGs, which causes images to load gradually from low resolution to high resolution until the picture is fully loaded. They are also slightly smaller than the original jpegs due to the way they are encoded.

You can check if a JPEG image is progressive using this command line tool from Sindre Sorhus.

Addy Osmani has done a good job summarizing the pros and cons of using progressive jpegs. For me, I feel the pros outweigh the cons, so I stick with the default settings.

If you prefer to use the original jpeg, you can set progressive to false in the options object. In addition, please make sure to check the corresponding documentation again if the imagemin-mozjpeg version changes.

PNG (PNG-8 and PNG-24)

PNG pros and cons

PNG (Portable Network Graphics Format) is a high-fidelity image format with lossless compression. 8 and 24, here are the number of digits in a binary number. According to the correspondence mentioned in our previous knowledge, 8-bit PNG supports up to 256 colors, while 24-bit can present about 16 million colors.

PNG images have stronger color expression than JPG, more delicate line processing, and good support for transparency. It makes up for the limitations of JPG we mentioned above, and its only drawback is that it is too large.

PNG Application Scenarios

As we mentioned earlier, complex images with rich colors would be more expensive to process using PNG, so we usually use JPG for storage.

Considering PNG's advantages in handling lines and color contrast, we mainly use it to present small logos, pictures or backgrounds with simple colors and strong contrast, etc.

Optimizing PNG images with pngquant

pngquant is my tool of choice for optimizing PNG images, you can use it via imagemin-pngquant:

npm install imagemin-pngquant

Then add the following to your imagemin.js file:

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

I find that setting the quality setting to 65-80 provides a good compromise between file size and image quality.

With these settings I was able to get a screenshot of my site going from 913kb to 187kb without any noticeable visual loss, a staggering 79% drop!

WebP

Advantages of WebP

WebP can handle detailed images like JPEG, supports transparency like PNG, and can display dynamic images like GIF - it combines the advantages of multiple image file formats.
The official introduction of WebP has a more authoritative explanation of this point:

WebP lossless images are 26% smaller in size compared to PNG. At equivalent SSIM quality index, WebP lossy images are 25-34% smaller than comparable JPEG images. Lossless WebP supports transparency (also known as alpha channels) at only 22% extra bytes. For situations where lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3x the file size compared to PNG.

Serve WebP images to browsers that support them

WebP is a relatively new format introduced by Google that aims to provide smaller file sizes by encoding images in both lossless and lossy formats, making it a good alternative to JPEG and PNG.

WebP images are generally comparable in clarity to JPEG and PNG, but at a much smaller file size. For example, when I converted the screenshot from above to WebP, I got an 88kb file that was comparable in quality to the 913kb original image, a 90% reduction!

Personally, I think the visual results are comparable, and the size savings are not negligible.

Now that we’ve recognized that there’s value in using the WebP format when possible, it’s important to note that it’s not a complete replacement for JPEG and PNG, as browser support for WebP is not universal.

At the time of writing, Firefox, Safari, and Edge are browsers that do not support WebP.

However, according to caniuse.com, more than 70% of users worldwide use browsers that support WebP. This means that by using WebP images, you can provide faster web pages and a better experience to approximately 70% of your customers.

To install it, run the following command:

npm install imagemin-webp

Then add the following to your imagemin.js file:

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

I found that setting the quality to 85 produces WebP images that are comparable in quality to PNGs but much smaller. For JPEGs, I find setting the quality to 75 gives a good balance between visual quality and file size.

Serving WebP images in html format

Once you have WebP images, you can use the following markup to serve them to browsers that can use them, while serving png or jpeg to browsers that are not WebP compatible.

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

With this tag, browsers that understand the image/webp media type will download the Webp image and display it, while other browsers will download the JPEG image.

Any browser that doesn't support <picture> will skip all source tags and load the bottom img tag. Therefore, we progressively enhanced our pages by providing support for all browser classes.

Note that in all cases the img tag is what is actually rendered to the page, so it is indeed a required part of the syntax. If the img tag is omitted, no image will be rendered.

The <picture> tag and all the sources defined within it are there so that the browser can choose the path to the image to use. Once a source image is selected, its URL is passed to the img tag, and that's what is displayed.

This means that you don't need to style the <picture> or source tags, as the browser won't render them. Therefore, you can continue to use the img tag for styling as before.

The above is the details of how to optimize images to improve website performance. For more information on optimizing images to improve website performance, please pay attention to other related articles on 123WORDPRESS.COM!