Website image optimization in less than 10 minutes

Rahul Nanwani

This content about image optimization was originally first published on ImageKit’s Medium Blog as “How images on your website can be optimized in less than 10 minutes“.

In this post, we will see how to optimise all your images for your website, even if you already have millions of them or plan to add many more in the future. All in a matter of minutes.

What is image optimization?

Image optimization means delivering the best possible image at the lowest possible size. It is not only great for your application’s user experience but helps in achieving improved conversions, better SEO and reduced infrastructure costs.

We will be using ImageKit which is a free image optimization service to begin with.

Step 1 — Register on ImageKit.io

As mentioned earlier, you can get started for free. No card details needed.

You will be asked to select an ImageKit ID. Choose a meaningful unique name here — it could be your company’s name, your product’s name or any thing else that can uniquely identify your URLs. Let’s say you choose ‘mycompany’ as your ImageKit ID.

Step 2 — Add your existing image source to ImageKit

To utilise the full power of ImageKit.io, you should attach your existing image source(s) to it. This way you can optimise all your images without having to re-upload them on ImageKit.

An existing source can be any accessible web server like https://www.mycompany.com or any Amazon S3 bucket.

Don’t worry. Even if you attach an existing image source to ImageKit, it won’t scan or crawl your images for optimization automatically. Your original images are accessed only when you use ImageKit later in your application.

Step 3 — Update your image URLs

Almost done now. If you did step 2 correctly, you would just need to make a small change to your image URL to get optimised images always. There are two ways to make this change depending on how your original URLs were configured.

Option 1 — The easy way — URL change

For example —

If your original URLs look like this
https://images.example.com/path/to/my/image.jpg

And if you added https://images.example.com as a web folder source in step 2, then your new optimised image URLs will look like
https://mycompany.imagekit.io/path/to/my/image.jpg

Only the host name changes from images.example.com to mycompany.imagekit.io

Option 2 — The easier way — DNS change

This is the easier way to get optimised images. However, it can be done only if you have access to change the DNS records for the host name being currently used for your images.

For example —

If your original URLs look like this
https://images.example.com/path/to/my/image.jpg

And if you added https://images.example.com as a web folder source in step 2, then in your DNS records you can create a CNAME entry for images.example.com to point to mycompany.imagekit.io

This way you don’t have to change your image URL even a bit, and you get format and quality optimised images always.

What happens to the new images that I add?

The new images too will be optimised and delivered using a global CDN if you access it using ImageKit’s URL. The new image can be added to any of the sources that you have attached to ImageKit or directly in the storage provided by ImageKit.

Making this small change can speed up your application by 30–40%. And if it just takes 10 minutes of your time to implement this, then the value-add is immense.

You can see some of the image optimizations in action for website and mobile websites here.

Do give it a try and please share your feedback in the comments below. Or send it on feedback@imagekit.io.