Website Image Optimization In A Matter Of Minutes

How to optimize 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 achieving improved conversions, better SEO, and reduced infrastructure costs.

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

Step 1 — Register on ImageKit.io

As mentioned earlier, you can get started for free. No credit card 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 assume you chose ‘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 optimize 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 optimized 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 optimized 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 optimized 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 optimized images always.

What happens to the new images that I add?

The new images, too, will be optimized 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.

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

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.