How Do I Optimize An Image For Web Without Losing Quality?

Posted On , Updated On by Khoj Badami

Who Is This Guide For?

  • Somebody who is making a website/web page and needs to optimize images. Maybe your page is loading very slowly.
  • Perhaps a tool like PageSpeed Insights is telling you that you need your images to be optimized.

There Are 2 Ways To Optimize Any Image For Web

  1. Optimize Size Of Image
  2. Compress The Image

Part 1: Optimizing The Size Of The Image

The basic idea here is that:

There is no point loading a 4000px image on a iPhone 6s whose max screen size is: 750 x 1334

“Okay, but people come to my web page from phones and tablets and desktops. I don’t control that!”

Yes. And because of that, you CANNOT use a “one size fits all” approach. If you keep your image too small, it will be fine for mobile devices. But, bad for desktops. And the same problem exists in reverse.

How To Give Properly Sized Images To People Based On Their Screen Size?

Responsive Images is the answer! The simplest way to achieve this, is to use the “srcset” HTML attribute. Let us have a look at a demo.

Click on the links below to see for your self:

Did you see any difference in Quality? The image is just as beautiful. Also, did you notice an improvement in loading speed? Well, Googles Page Speed Insights tool did. Below is the before after.

Results Of Optimize An Image For Web Using srcset HTML attribute

Google’s page speed insights tool is telling you in the first case that you need to properly size images.

So, How To Use The “srcset” Attribute?

As you can see, “src set” is basically a “set of sources” for the image. Each source is made up of 2 parts:

  1. The image path (just like you use for the ‘src’): EG: /img/750px_img.jpg
  2. An indication of the image width in pixels. This is done as follows: EG: 750w

All the different sources are separated by commas. And, just doing this much allows the browser to do all the heavy lifting. It figures out the size of the image needed. It checks the resolution of the device. And then it chooses the perfect image for the task.

I have decided to create my image in the following widths: 2000px, 1000px, 750px, 500px, 250px.

You can decide which sizes to create based on your users.

For example: If all your users are coming from mobile devices, then the 2000px image might never get loaded and is just not important.

To help you decide, there are some stats from gs.statcounter.com. It should give you an idea about what would be good image sizes to have.

Screen Resolution Stats Worldwide To Help Optimize An Image For Web

(Data Is As Of Feb 12th 2022. Click here for latest screen resolution data.)

Okay, So Now You Have to Create 5 Versions For Each Image!😩 How To Do That? Manually Will Be A Huge Pain!!

No, you DO NOT have to do it manually. You can do it using an Image CDN. Basically, you upload the image once, and you can create all the different size versions automatically by just changing the URL slightly.

For example, click on the links below:

As you click on the above links, you will see that the image width (in red) is being changed in the URL. And you are getting back different sized images.

The above links are created using the ImageKit.io CDN. They have a very good free plan to try out and get started with: 20 GB bandwidth & 20 GB media storage. They also integrate with many web platforms. See the screenshot below:

If you use one of these frameworks, then you can get started with ImageKit.

Sorry. I Oversimplified Something Above

The above “srcset” example works. But, it’s for a simple case. It works since the image is going end to end on the page. In reality, the browsers are not that smart. They need some more guidance.

You might have some images that go end on mobile and only 1/2 of the screen on desktop.

In this case, we need to add something more to the image tag.

As you can see, we have added another attribute called “sizes”. This attribute is trying to give the browser some guidance about how much of the screen the image will take up based on the device size.

Let’s try to break it down and see what it is trying to communicate:

  • (max-width: 600px) 100vw : This part is saying that up to 600px device width, the image will be taking up 100% of vw or Viewport Width.
  • 50vw: This part is saying that if the previous condition is not met, then assume that the image is taking up 50% of vw or Viewport Width.

If you are with me so far, you will be sorted for 90% of situations. Have a look at the live demo here.

There is still more options and details. But I am going to stop here. If you want to go deeper, you can explore this.

Part 2: Compressing The Image Without Loosing Quality

If you have a JPG or a PNG image, and you want to compress them manually, just go to:

Upload the image and in a few moments, you will have a compressed image that is 70% or so smaller with that looks exactly the same as the original. The happy panda will be cheering for you.

As you can see above, a 2.8 MB image got turned into 788.5 KB. Below is the before after:

Tiny JPG, Before & After (First One IS 2.8MB & Second Is 788.5KB)

You can see the full size versions of the same here.

“Okay. But I really don’t want to do all compressing manually!”

I hear you. It is going to be a pain to do it one by one. The same solution I have shared above to the rescue. Image CDNs! The idea here also is the same. You change the URL slightly to run image compression on it.

See the 2 images below:

As you can see from the 2 links, there is no real loss of quality. But, there is a big drop in image size. From 330kb to 73kb.

Once again, you can use ImageKit for this task. Here is the page on ImageKit that talks about image quality optimization.

But, we can do even better!

One last thing we can do is save the image in new formats like WebP. Google Page speed insights calls these “Next-Gen Formats”. Below is how the suggestion looks in Googles Page Speed Insights tool.

As you can see, Google is suggesting we use the WebP or AVIF format. Google has done some calculations and said that if we use the WebP format, we can reduce the image size by another 43.2Kib.

Now, as of writing this, AVIF has only 69% support. You can see the stats here. So, it would be best if we focused our energies on WebP. It seems to have a lot more support. 92% as of this writing.

But, it should be noted that WebP DOES NOT HAVE 100% support. For example, ImageKit gives the following warning:

A few WebP images may not render correctly in Safari v14+ on MacOS v11+ and IOS 14 because of a possible OS-level issue.

Now, the great thing is that an Image CDN can handle all of this for you. It will convert the image to WebP and also figure out if the browser can handle WebP. If it can, it will send over a WebP image and if not, the regular JPEG image.

This is also achieved with just some changes to the URL.

For example: https://ik.imagekit.io/demo/tr:w-600,f-auto,q-80/medium_cafe_B1iTdD0C.jpg

The “f-auto” part tells the CDN to automatically choose the “format” based on what the browser can handle. The above image is 46kb in size as compared to the 73kb JPEG version. To learn more about the image format optimization formats that ImageKit provides, click here.

Closing Notes

Above are the core ideas. Now, based on the web development stack you are using, execution will vary. But in all cases, an Image CDN will come in handy. Another benefit of the CDN is that it will deliver the image from a server that’s close to your user.

Other Related Posts

srcset x vs w : Which to use? In what situation? A simple guide.

srcset vs media queries : Which Should You Use & Why?

srcset not working? 😩 Getting Wrong Images? Let’s Find Out Why!