What's the Best Way to Optimize Images for the Web?
Tags: webdev, programming, html, performance
Published: 2021-12-06 17:00:53

---
title: "What's the Best Way to Optimize Images for the Web?"
published: true
description: "You probably aren't optimizing your images enough. I'll show you a few ways to do it, and the results from each."
tags: #webdev #programming #html #performance
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grgn2ua9o9q6231py0mc.jpg
canonical_url: https://www.jeremymorgan.com/blog/programming/how-to-optimize-jpg-images/
---
Want fast loading web pages?

You probably aren't optimizing your images enough. Image optimization is frequently overlooked because it's only a small difference and takes some time to do. But a series of small changes will lead to a screaming fast website. It's worth it. Your pages will load faster.

### Why does this matter?

- It's better for your user
- It makes your page more accessible in low bandwidth situations
- It's better for SEO

All this in exchange for a few minutes of your time. Do you need any more reasons to optimize your images?

### What We'll Do

In this article, I will show you four ways to optimize your images and the results from each of them. I'll explain how I tested them and show you the results.

You can download the files and perform your own tests by [downloading this repo](https://github.com/JeremyMorgan/Image-optimization-test). Feel free to play around with it.

For testing, I decided to grab random images from [unsplash](https://www.unsplash.com). I randomized the width and height to get various dimensions you might see on the web.

I used [this script](https://github.com/JeremyMorgan/Image-optimization-test/blob/main/get-images.sh) to pull down 32 images and put them into a folder.

We're going to look at:

- The raw files - with nothing done to them
- Photoshop optimizing
- [RIOT](https://riot-optimizer.com) optimizing
- [XNConvert](https://www.xnview.com/en/xnconvert/) JPEG optimizing
- XNConvert to Webp optimizing


And we'll see how these methods stack up. We will examine **file size** and **page load time**. As a note, I do not change the resolution or color depth of these images, so they are all the same except for the optimizations.

### How I'm Testing Load time

I'm testing load time by creating a simple index.html file in each folder that loads up a table of the images. I am serving it up with the [NPM serve](https://www.npmjs.com/package/serve) package because it's a simple HTML server that runs locally. I don't want network latency to affect the results.

Then I use CURL to grab the load time:

```
curl -s -o /dev/null -w "%{time_total}\n" -H "Pragma: no-cache" https://localhost:3000
```

Let's optimize some images and see the results.

## Raw Images

This is a test with the images straight from Unsplash. It is our baseline measurement.

Here is the total file size for all images:

![How to Optimize JPG images for the Web][0]

So we're starting with **3.1MB** of images. Not too shabby, but not small either.

Here is the page load time:

![How to Optimize JPG images for the Web][1]

I ran the test ten times and got an average load time of **0.0013495** seconds. It seems fast, but we can improve on it.

## Optimized with Photoshop

For the next set of images, I optimized these with Photoshop. I used the following settings:

![How to Optimize JPG images for the Web][2]

I set a quality of **60** and set it to progressive with no metadata. I got some interesting results.

Here is the total file size for all images:

![How to Optimize JPG images for the Web][3]

It's **3.3MB**, which is **more** than we started with. I have no idea why this is and will investigate and update later. But most of the time, this creates smaller images.

Here is the page load time:

![How to Optimize JPG images for the Web][4]

Our average load time is **0.001213** seconds, which is a little above the raw files. Not much of a surprise with this file size.

## Optimized with RIOT

Next, I optimized the images with the [Radical Image Optimization Tool (RIOT)](https://riot-optimizer.com). This is only available in Windows, but it's an excellent tool I've been using for years.

I used the following settings:

![How to Optimize JPG images for the Web][5]

And even though I left the quality pretty high at 82%, it shrunk the files down considerably:

![How to Optimize JPG images for the Web][6]

Here is the total file size for all images:

![How to Optimize JPG images for the Web][7]

At **2.3MB**, that's quite a bit of savings. This reduces your website's footprint without sacrificing quality.

Here is the page load time:

![How to Optimize JPG images for the Web][8]

Our average load time is **0.0010877** seconds, which is our fastest yet.

## Optimized with XNConvert (JPG)

For this test, I optimized the images with [XNConvert](https://www.xnview.com/en/xnconvert/) and used it to optimize the JPEGs. This is the tool I use the most because it runs in Windows, Mac, or Linux and does batch processing quickly.

![How to Optimize JPG images for the Web][9]

I removed the metadata:

![How to Optimize JPG images for the Web][10]

Then saved them with the following settings:

![How to Optimize JPG images for the Web][11]

Here is the total file size for all images:

![How to Optimize JPG images for the Web][12]

At **2.2MB**, this is the smallest we've seen yet. However, I don't expect it will significantly improve load time over the previous **2.3MB** of images.

Here is the page load time:

![How to Optimize JPG images for the Web][13]

The average is **0.001085** seconds, which is a little faster than RIOT. Great!

I highly recommend XNConvert for image optimization. But, we can take this even a step further and convert everything to Webp images. These will be significantly smaller and hopefully faster.

## Optimized with XNConvert (WebP)

So I took the same set of raw images and converted them to .webp images. This is Google's recommended image format these days, and it's easy to see why.

Here are the settings I used:

![How to Optimize JPG images for the Web][14]

Here is the total file size for all images:

![How to Optimize JPG images for the Web][15]

Wow! We went from **3.1MB** of images to **1.5MB**. That's significant. Let's see what it does to load time.

![How to Optimize JPG images for the Web][16]

The average is **0.0010326** seconds, which is a new record. Great!

This is something you should consider when doing image optimization on your site. Webp images are the way forward.

## Let's Look at the Results!

This is the total file size for all images:

![How to Optimize JPG images for the Web][17]

| Method   	|   | File Size 	|
|----------	|:-:|----------:	|
| Raw images	|   	|3.1MB|
| Photoshop 	|   	|3.3MB|
| RIOT  	|   	|  2.3MB |
| XNConvert (JPG)  	|   	|  2.2MB  |
| XNConvert (Webp) 	|   	|  1.5MB |

![How to Optimize JPG images for the Web][18]

| Method   	|   | Load Time	|
|----------	|:-:|----------:	|
| Raw images	|   	|0.0013495|
| Photoshop 	|   	|0.001213|
| RIOT  	|   	|  0.0010877|
| XNConvert (JPG)  	|   	|  0.001085  |
| XNConvert (Webp) 	|   	|  0.0010326 |

## Conclusion

Optimize your images! As you can see, it makes a difference, even with this small page with 32 images on it. I will do this experiment again with a larger image set to see how the changes scale.

Overall it's pretty clear that .webp images are smaller and more efficient.

It's definitely worth the few minutes of extra time.

Questions? Comments?  **[yell at me on Twitter!](https://twitter.com/jeremycmorgan)** 

[0]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx42hwreay37o24j0zqi.jpg
[1]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97k8aeumxuk1pw9tnqhj.jpg
[2]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de1n2qynk7wb47pefwfu.jpg
[3]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg2lmkqieb2j6ui9waji.jpg
[4]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzxtywnpcbrp3tmxm576.jpg
[5]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj5pm7lfctbzl74qlhey.jpg
[6]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqx6s80gtp26323bjbpx.jpg
[7]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20wb8wgqxnx71kxoigwd.jpg
[8]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0cl7unj1k0qn24yecze.jpg
[9]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zg6rb50aafnxotmude1.jpg
[10]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmnjsvcekgxiyqkuiqds.jpg
[11]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei002crcrmtd5hbbk9ae.jpg
[12]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z914bg8kiiyoh6ut1c0a.jpg
[13]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1013u28a1l06xm5dl1ce.jpg
[14]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh575l49k3sn39dgrzvq.jpg
[15]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1ke5m8p34cho2hkypcr.jpg
[16]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe7owfn81ns1v331clg4.jpg
[17]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr25oe300s5u6fjj4lpm.jpg
[18]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6s3b19qf626nvu2b9fm.jpg
-- Jeremy