Optimize Images to Improve the Performance of A Website

An image is a more complex, larger resource than a text. When we are trying to solve some performance issues of a static website, we can always get started with the images. The way you handle images in your website can decide what kind of user experience and SEO result you have.

Now, let’s talk about how we can handle those images on our website without changing any design.

Image Format

The format of an image always matters.

There are so many formats for images, and the format is one of the most important causes of the performance issue about storage and loading. So if you wish to reduce the image size and the loading time, you can try to work on the format first.

Here are some formats of an image:

BMP

Bitmap (*.bmp) was born in 1986 or before, a classical image format. Usually, it won’t be compressed, so it can store the whole information and details of an image. It comes with a fat-size file, so typically, it won’t be used as the image format on a website, nor in the use cases of data transfer. But as for resource storage, it can be a good choice.

TIFF

Tagged Image File Format (*.tiff) was born in 1986. As a type of bitmap format, TIFF is also a classical format for storing image data without losing data. It’s mostly used for the printing and manufacturing industry, has the same storage size with BMP format.

GIF

Graphics Interchange Format (*gif) was born in 1987. Using the LZW algorithm for compressing, can only process 8-bit color data, so it always comes with a huge loss of color data. Can combine multi-frames into an image to display as an animation graph or video. Used for data transfer, not for storage.

JPEG

JPEG is a most well-known image format developed by the Joint Photographic Experts Group (*.jpg, *.jpeg) in 1992. It’s a Lossy compression format that comes with visible image data loss, but it depends on the compression level. JPEG format is usually used for storing complex graphics with colors, a photography-friendly format, but it can’t support the transparent attributes. One of the most popular formats on the internet.

PNG

Portable Network Graphics (*png) was born in 1996. Its main purpose is for data transfer with the internet as its name. Can support lossless compression and transparent attributes for the images which need post-editing. One of the most popular image formats on the internet.

SVG

Scalable Vector Graphics (*.svg) was born in 2001. It’s a different image format to others which uses XML for describing and storing image data. The files can have small sizes, but it’s usually when being used for simple vector images like logos or icons. It’s a next-generation image format.

JPEG 2000

The new standard of JPEG format was born in 2000. It is developed for replacing JPEG for lossy compression. It has a higher compression ratio compared to the old JPEG format with less lossy or blur block. And It can also support the progressive rendering display technology and the transparent attributes which JPEG can’t support. Unfortunately, most browsers don’t support JPEG 2000 so far, but it has had a lot of use cases and applications rate in medicinal image analysis processing, is a next generation image format.

WebP

WebP is an image encode extended from VP8 and was born in 2010, a young sister project of WebM. Now developed, maintained, and managed by Google. It can support lossless and reversible compression and has a very lite storage requirement which is extremely fit the usage environment of the internet. Most popular browsers can support WebP format so far, but can’t be supported on Safari before version 14.0. It’s a next-generation image format.

In the newer websites, .jpg and .png is most popular, sometimes they use .gif for storage of dynamic images as well. But as the technology of websites and browsers are improved day by day, the next-generation image formats have become more popular as well.

In the following contents, we will focus on those next-generation image formats to improve and optimize the usage and performance of images on a website.

Next-Generation Image Format

There are three next-generation formats: SVG, JPEG 2000, and WebP.

In this article, we are going to focus on JPEG2000 and WebP since they have a better compression ratio, quality, details, and scalability.

Comparison

Let’s take a look at the differences in image size.

First one picture I picked up one with more complex graphics and more colors:

Iron railings on the colorful painted wall

After converting the image with the max compression ratio, we can see the result:

I choose the 10:1 ratio of JPEG and the 64:1 ratio of JPEG2000, and as we can see, they have different image sizes.
But if we set them to use the same compression ratio, JPEG2000 format may not be smaller than JPEG.

(The above images are both converted with lossy-compression)

Next, let’s look at the second picture:

A notebook, a pen, and three buttons on the desktop

The converting result is:

After some tests, we can find that:

JPEG has a smaller size after compressing than PNG, so it will be more suitable for a website.
JPEG 2000 has a larger compression ratio than JPEG (JPEG - 10:1, JPEG 2000 - 64:1).
WebP has a much smaller size compared to JPEG and JPEG2000 when it has simple graphics and colors.

Compared to JPEG, JPEG 2000 doesn’t have many advantages on size, especially when with complex graphics and colors, but it has some other advantages like Alpha channel, progressive, etc.

From here we see that if we use JPEG 2000 or WebP as our image format on websites, we can reduce a lot of size of the contents for improving the loading time and the user experience.

But how can we do it?

Can we just choose whatever WebP or JPEG2000 as our image format and put them on our website? Well yes, but actually no.

It’s not that simple.

Before we choose an image format, we need to think about somethings:

Do we have to let users be able to download high-quality images?
Will the images be edited?
Do we need transparency?
How many resolutions do we need with the images?
Do the browsers support the image format?

For the above questions, I have some hints for you to make a choice:

Do we have to let users be able to download high-quality images?

If yes, then I suggest you just use JPEG format since it has a nice image quality comes with high compatibility for different devices.
Yes, as we are going to provide a resource for our users to download, you can’t give them a format that they can’t open, right?

You can always choose a compression mode or ratio with a lower losing for downloading.

Will the images be edited?

If yes, you can choose PNG as the format. Although it may come with a larger size, it can provide more information and details for users to edit.

Of course, you can pick JPEG format as well if you are considering the image sizes.

Do we need transparency?

If yes, then JPEG won’t be an option because it doesn’t support transparency(Alpha channel). But you can choose anyone from JPEG2000, PNG, WebP.

How many resolutions do we need with the images?

You will always need to think about what resolution of pictures you need on your website. If you don’t need a high resolution, you can compress images to a small size as well. But if you require, please don’t use a low-resolution image on your site, or you will see a blurred picture there.

Do the browsers support the image format?

This is the most important issue you should care about.

Compared to a blurred picture, if the browser can’t support your image format, users will see… nothing. And it’s far more terrible than other problems. So we need to check the compatibility of the formats we picked before we use them.

Fortunately, most popular browsers have supported the next-generation formats, here are some cheat sheets for you:

WebP: Can be supported on Firefox, Chrome, and Edge. But on Safari, it can be only supported on version 14.0 or above (macOS Big Sur is required).
JPEG 2000: Supported by all versions of Safari, but not by any other browser.

If you would like to check which browser can support your image format, you can use “Can I Use”.
Links for you: WebP, JPEG 2000

As you can see, you can use WebP and JPEG2000 together for supporting the most popular browsers.

Now, let’s get started to optimize our website.

Optimization

Now, let’s talk about how should we optimize the images.

Here are some tips for you:

Generate the Images You Need

Choose a format

Now we already knew that we should use the next-generation formats, so we are going to convert the images we have to the formats we want.

But we still need a backup in case of some compatible issues and I recommend the JPEG format, about the reason you can see the previous section.

So now will we need the following formats for our optimization:

WebP
JPEG 2000
JPEG

Converting

You can use any tools or the resource from the internet you like. Or you can use my recommendation for you: ImageMagick

ImageMagick is a powerful software which can support most systems, and provide many formats and options for converting.

Here is a simple example of ImageMagick:

# Convert JPEG to JPEG 2000
magick image.jpg image.jp2

But you will need some parameters to get the images that match your requirements:

Size(Resolution)
Compression Ratio
Color
Progressive
Sharpness

Now let’s get into the details of them.

Size(Resolution)

First, resize the image by your requirement, larger images will increase the loading of a website, unless you need a high resolution picture in your site, you can always reduce the size of images by converting them into a lower resolution.

Suppose we need an image with 1920px as width, you can run the following command:

magick input.jpg -resize 1920x output.jpg

To specify the size of output image, pass -resize as a parameter with the value 1920x, it means to convert an image to another with 1920px width and auto height.

If you would like to specify the height as well:

# Specify the height only
magick input.jpg -resize x1080 output.jpg

# Specify both width and height (always mind the image ratio)
magick input.jpg -resize 1920x1080 output.jpg

JPEG

Next, you should also convert the image to a JPEG, even it’s already a JPEG to optimize the image.

Below is the command:

magick input.jpg -strip -interlace Plane -gaussian-blur 0.05 -quality 50 output.jpg

For the parameters, here are some notes:

-strip: To remove the inline data, comments, or descriptions of the image to reduce the image storage size
-interlace Plane: To convert the image to a progressive one, this can improve the loading speed and some user experience.
-gaussian-blur 0.05: To process the image with a Gaussian Blur effect, it can reduce the image size. This one is optional, some pictures may not fit this option.
-quality 50: Set the image quality to 50% in the range of 0 and 100, the higher the number is, the more size the image is. This parameter will decide the compression ratio of a JPEG (1-10).

For more information about the JPEG command of ImageMagick please see here

WebP

magick input.jpg -strip -gaussian-blur 0.05 -quality 40 output.webp

Since the WebP format provides a better compression (fewer data loss), you can choose -quality 40 as the value. This parameter is different from the compression ratio of JPEG, it’s just the quality parameter of WebP.

For more information about the WebP command of ImageMagick please visit here.

Another tool for WebP converting, you can also see the cwebp from Google.

JPEG 2000

magick input.jpg -strip -gaussian-blur 0.05 -define jp2:rate=64 output.jp2

In JPEG 2000, you will need to use -define jp2:rate=<compression_ratio> to set the compression ratio. 64(64:1) is recommended for a better size and quality, feel free to change the ratio by your case.

You can see this for more information about the JPEG command of ImageMagick.

Use Scripts to Convert Images

If you have many pictures on your website, it will take a lot of effort to convert those images manually. So here are some scripts for you to convert images to the formats we want automatically:

#!/bin/bash

# Usage: geni [image name] [image format]

geni() {
    if [ -f "$1.$2" ]; then
        mv "$1.$2" "$1.temp.$2"
        magick "$1.temp.$2" -strip -gaussian-blur 0.05 -quality 40 "$1.webp"
        magick "$1.temp.$2" -strip -gaussian-blur 0.05 -define jp2:rate=64 "$1.jp2"
        magick "$1.temp.$2" -strip -interlace Plane -gaussian-blur 0.05 -quality 50 "$1.jpg"
        rm "$1.temp.$2"
    else
        echo "$1.$2 does not exists."
    fi
}

geni

Just create a shell script like geni.sh and then add the above scripts to that file.
Then you can use the following command to run the script to convert image.jpg to image.jpg, image.webp, image.jp2 three formats.

./geni.sh image jpg

You may need this command to grant the permisson to execute the script:

chmod u+x ./geni.sh

Also, you can add the script(function) into your shell profile like .bashrc, .bash_profile, or .zshrc:

# ~/.bash_profile or ~/.zshrc

geni() {
    if [ -f "$1.$2" ]; then
        mv "$1.$2" "$1.temp.$2"
        magick "$1.temp.$2" -strip -gaussian-blur 0.05 -quality 40 "$1.webp"
        magick "$1.temp.$2" -strip -gaussian-blur 0.05 -define jp2:rate=64 "$1.jp2"
        magick "$1.temp.$2" -strip -interlace Plane -gaussian-blur 0.05 -quality 50 "$1.jpg"
        rm "$1.temp.$2"
    else
        echo "$1.$2 does not exists."
    fi
}

Then you can run the command in your terminal directly:

geni image jpg

Simple and powerful.

If you feel like the converted result doesn’t match your requirement, you can always adjust the parameters in the script as you wish.

`<picture>` in HTML

Now we have the resources, but how can we use them on our website?

Since now we have three different formats for each image, we should let the browsers decide which one to use. And yes, we can.

HTML has provided the <picture> tag to handle the image with multiple resources or formats. Here is the document from MDN.

The usage is just simple:

<!-- We have three formats for an image: image.webp, image.jp2, image.jpg -->
<picture>
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jp2" type="image/jp2" />
  <source srcset="image.jpg" type="image/jpg" />
  <img
    src="image.png"
    class="image-class-name"
  />
</picture>

The <source> tag loads the image resources, and the <img> tag is an agent that takes these resources and represents them. That’s to say, the resources loaded by <source> will be put on the position of <img> for display.

Here are the rules: the browser will read from the top of the source list and get the first one it can use(support) then loads it. If succeeded, the remaining source won’t be loaded anymore. If all sources can’t be loaded, it will try to load the src one defined in the <img> tag.

We can have a test for it.

Because we know Edge and Chrome don’t support JPEG 2000 by default, so we can expect they should use the WebP format, not the JPEG 2000.

Here we put the .jp2 as first before the .webp format:

<picture>
  <source srcset="colorful.jp2" type="image/jp2" />
  <source srcset="colorful.webp" type="image/webp" />
  <source srcset="colorful.jpg" type="image/jpg" />
  <img
    src="colorful.png"
    class="image"
  />
</picture>

Then open the website we should see the picture shown as normal. But what’s exactly the resource of the image we see?

Let’s open the developer tools of the browser and switch to the Network tab, filter the image resources, and you should see:

From that we can see the resource to be loaded is a WebP format, and it’s decided automatically by the browser. The first jp2 couldn’t be supported by the browser, so the second webp was loaded, and the .jpg and .png after it were all not loaded.

But, how do these resources present in the DOM?

Let’s switch to the Element tag in the developer tool and find the img.image on the website, you should see this:

The browser still uses <img> as the element in the DOM. Although the value of src is colorful.png, it actually points to the source of colorful.webp.

So that we don’t need to care about the compatibility of browsers when we are trying to optimize the loading speed of image resources to improve the performance of the browser.

Styling

Here is a small tip for you if you would like to implement the background-position: center; and background-size: cover; effect in your <img>.

Just add the following css on the <img> tag:

.image {
  object-fit: cover;
  object-position: center;
}

Practical Testing

Let’s see some test cases:

Loading time

In this case, I reduce the loading time of an image:

Before

The loading time was 3.27s, and the image size was 4.2 MB.

After

After the optimization, the loading time becomes 0.577s, and the image size becomes 254 KB. It’s a 93% reduction!

Lighthouse testing

Then let’s use Lighthouse to test the website.

Before the optimization

The performance score was only 37, it’s so terrible.

And it said that FCP(First Contentful Paint) takes a long time LCP(Largest Contentful Paint) loading time is too long, etc. It is all because of the big size of the images.

Now let’s see the optimization result:

After

Amazing…

From the above case, we can know that simply optimizing the images on the website can reduce the loading time, increase the performance and user experience.

Summary

From some statistics, if users don’t see the content they want to see in the first 3 seconds after they visited a website, they may just leave. That’s to say, the loading time will be the first important thing about the user experience, it’s also the first image of the website for users. Optimizing the image size and quality, using progressive image rendering, can be a nice way to improve the performance of a website.

Although there are many things can do after the optimization, choosing the right format, reducing the resolution, using <source> to let the browser select resources automatically, these methods will definitely be good ways to make our website better and better.

Moreover, there are some advanced image optimization methods such as:

Different sizes for different devices
Image resource CDN
Responsive images

But now, just get started with the most simple way to optimize your website: image.

Optimize Images to Improve the Performance of A Website

To improve the performance of a website, we can always focus on the images first

Image Format

BMP

TIFF

GIF

JPEG

PNG

SVG

JPEG 2000

WebP

Next-Generation Image Format

Comparison

Do we have to let users be able to download high-quality images?

Will the images be edited?

Do we need transparency?

How many resolutions do we need with the images?

Do the browsers support the image format?

Optimization

Generate the Images You Need

Choose a format

Converting

Size(Resolution)

JPEG

WebP

JPEG 2000

Use Scripts to Convert Images

`<picture>` in HTML

Styling

Practical Testing

Loading time

Lighthouse testing

Summary

References

Image Format

BMP

TIFF

GIF

JPEG

PNG

SVG

JPEG 2000

WebP

Next-Generation Image Format

Comparison

Do we have to let users be able to download high-quality images?

Will the images be edited?

Do we need transparency?

How many resolutions do we need with the images?

Do the browsers support the image format?

Optimization

Generate the Images You Need

Choose a format

Converting

Size(Resolution)

JPEG

WebP

JPEG 2000

Use Scripts to Convert Images

<picture> in HTML

Styling

Practical Testing

Loading time

Lighthouse testing

Summary

References

`<picture>` in HTML