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:
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: kraken.io service
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
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
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
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: WordPress Plugin Smush.it
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
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.
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.
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.
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 advise you to install Pagespeed. Installation is made on the server side and you should have access to it, or ask the people who manage your server to install it. Installing PageSpeed on Ningx in a future post. We believe that this is the best free solution.
The other solutions depends on how you want to optimize images. If you want lossless and no error pagespeed you can use kraken.io service.
If you want to reduce KB as much as possible with changing the brightness a bit and no error pagespeed plus batch optimizing you can try to use mozjpeg + Jpegtran. For png files we can use pngout.
We placed here the programs needed. For batch optimizing(windows 7), change in every .bat file(F:\Resize\) with the actual location where you keep the downloaded files.
After that drag&drop .jpg or .png files onto chosen .bat. Atention it will optimize all files in directory, so if you drop only 2 out of 5 files for exemple it will optimize all 5.
In a future post, we’ll show you how we can optimize pictures with right-click(In Windows).
We made also a video, for those that don’t have time to read all:
What do you use for image optimization?