Optimizing Images for the Web

For the best visitor experience, an image on the web should be optimized to reduce the data use and speed for opening the image. Putting a large image on the web can be frustrating and wasting time.

We need to optimize the image if its size is too big. I’ll give an example how to use free and open source image optimizer. I use Caesium in this example.

Caesium website

Caesium provides a simple yet effective interface with a real-time preview and multiple image processing at the same time, everyone will be able to reach the best result. Advanced users will find extra features, like metadata storing options or folder structure support.

Let’s choose an image for our test. Its original size is 1.15MB

Original image from https://www.goodfreephotos.com/united-states/missouri/st.-louis/missouri-st-louis-clubhouse-pond-and-scenery.jpg.php

First, open the Caesium App and open the image. Then, select the expected size, image format, and compression level.

Caesium Interface

After clicking the Compress button, we can find a new image with smaller size.

The compressed image

Our new compressed image has the size of 428KB with 700px width, similar to the width of this blog. Of course we can choose smaller dimension and size to meet our needs.

Please follow and like us: