Optimize Images (SEO) How To Keep The Quality

Optimize Images (SEO): How to optimize a image without quality loss

Some of the programs that we use may change(minor) picture quality, even if we want to remain the same.

When referring to a picture optimization basically we’re referring to size reduction (image compression) to save space and bandwidth, so that google PageSpeed won’t give us the following error:

SEO pagespeed error
Optimize Images: Pagespeed Error


A correct image optimization should have title,description and file name well chosen.
There 2 ways to optimize a image: Lossy and Lossless.
Lossy Sacrifices a small amount of image quality so you can save much file weight.
Lossless Reduces as much as it can from file weight without damaging the quality.

We’ll try some free services, to see which are better without damaging our image quality.
This is the image to be optimized(158KB)

Optimize Images, original picture
Optimize Images: Original Image that needs optimization

Optimize Images: kraken.io service

Result here (left click will open 2 tabs. The one on left is the original image the right one is the optimized image)(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Kraken script managed to reduce the size with 15.80%, 25Kb saved, resulting a 133KB image. Photo is exactly the same and google pagespeed gives no error.

Optimize Images: optimizilla.com service

Result is here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Optimizilla’s script managed to optimize the picture by 55%, but unfortunately the colors are more brighter. They have a batch resize, you can enter up to 20 images, and google PageSpeed doesn’t give errors. At quality we chose 90%. We don’t have the option to pick between lossy or lossless.

Optimize Images: tinypng.com service

You can see the result here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Tinypng’s script managed to optimize picture by 41% but the colors are brighter. We could not choose optimization method but thet have an API. PageSpeed does not give error.

Optimize Images: tools.dynamicdrive.com/imageoptimizer service

We can compare result here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

They have a maximum limit of 2,86MB / picture, but optimizes your photos in various sizes. We chose 80% quality, and the resulting picture was smaller than the original by 39% . At 90% quality only 10% were saved. The resulting picture quality is as the original but google pageSpeed gives error.

Optimize Images: compressor.io service

We chose lossless method, but our picture could not be optimized, the result is the same size as the original. Of course if we were to pick lossy method, the result would be different.

Optimize Images with compressor.io result
Optimization results with compressor.io

Optimize Images: WordPress Plugin Smush.it

We can compare the result here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

WP Smush.it, managed to reduce the size by 31 Kb, (11.7%), but unfortunately the resulting image has not the same quality.Pagespeed doesn’t give error.

Optimize Images: WordPress Plugin shortpixel.com

Results here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Although we managed to bring the image at 91kb, picture quality suffered. PageSpeed does not give error.

Optimize Images: WordPress Plugins EWWW Image Optimizer and CW Image Optimizer

These plugins require the activation of exec function in php, something we aren’t willing to do now because exec weakens the security of the server.

Optimize Images: Offline Programs – Windows: pagespeed_optimize_image

You can find the program here.

Although the image has been reduced from 158Kb to 136KB, picture colors were changed. You can compare the result(if browser doesn’t open two tabs: Tab 1 and Tab 2). Pagespeed gives error.

Optimize Images: Offline Programs: jpegoptim

It can be downloaded from github jpegoptim and it can be used in windows from command prompt but we need to compile it.

If found 1.4.3 version(compiled) here (it works under windows 64bit, thank you for compiling this). Direct download here

To play with it, from command prompt enter jpegoptim -h from directory in which jpegoptim resides. From here you have several options after tests, the only ones that kept the image quality are –strip-com –strip-exif –strip-iptc –strip-xmp, resulting image has 137KB. Result(if browser doesn’t open two tabs: Tab 1 and Tab 2) .Although the image is ok, PageSpeed gives error.

If we use the parameter – strip all, image colors are brighter, but PageSpeed does not give errors.

Optimize Images: Offline Programs: jpegtran

You’ll find it here, it also needs to be run from command prompt (Windows OS).

To keep the picture quality we need to use -copy all -optimize (example command is: jpegtran -copy all -optimize originalimage.jpg > optimizedimage.jpg). The resulting image has 157KB from the original 158KB. Result here(if browser doesn’t open two tabs: Tab 1 and Tab 2). Pagespeed gives error.

Optimize Images: Offline Programs: mozjpeg 3.1

Compiled version for windows is here. Thank you Thomas Coward.

Here we have more possibilities we chose:
1. Default settings and the result is this(if browser doesn’t open two tabs: Tab 1 and Tab 2). The picture has 64.9KB from 158KB, the colors were not changed, unfortunately pagespeed gives error.
2. 90% quality, and the result is this(if browser doesn’t open two tabs: Tab 1 and Tab 2). Image has 94.3KB, colors were not changed, but pagespeed gives error.


Conclusion:

First, we are not affiliated with any of the tested services here. All services did a great job optimizing image, but in this particular case the most useful in our option are:
1. kraken.io (image ok, pagespeed ok)
2. jpegoptim (Image ok, pagespeed error, but we can change the settings to have brighter colours and no pagespeed error.)
3. mozjpeg (image ok, pagespeed error, resulting picture was very small)


What we use to optimize image:


We made also a video, for those that don’t have time to read all:

What do you use for image optimization?

Last modified: August 28, 2017