Main menu
WalkswithMeWebsite Optimizationjpeg Image Compression for web applications

jpeg Image Compression for web applications

JPEG image compression for web sites is one of the main tips to improve your web application performance, When you check the Google Page Speed test or any Website analysing tool you will know their first suggestion is compress the image size .

For web application we commonly used image formats are JPG and PNG. So here I will explain how we can compress the JPG and PNG images, There are lot of image optimization tools available as software’s, but what about the script that doing  ? bcoz most of the time end user of the website doesn’t know about the details of the tools doing image compression or optimization , or they are not even familiar with those tools , In this case its always good to apply image compression  in server side as a part of your website script or some task in your web server.

JPEG Image compression

jpegtran is one of the best tool for compress your jpg images , In most Linux distributions you can install jpegtran package, Here I’m using Debian it is simple to install that package like follows.


sudo apt-get install libjpeg-progs

if you’re using cent OS /fedora /Redhat


sudo yum install libjpeg-turbo-utils

How to use it ? its quite simple you can run the optimization command from PHP code or CLI. for using php code make sure you have enabled  exec command in your server.


jpegtran -copy none -progressive -optimize test.JPG > output_file.JPG

The above command will display the compression details on the terminal and compressed file as output_file.jpg. you can check the file and its quality , jpegtran is a losslessly compression tools so it doesn’t reduce the quality of the out put  image  file.

a quick and short explanation of the command used.

-copy none : This means some additional information may available with the image, means the image taken date, device details etc all these are not required.

-progressive : Image compression can be two types baseline and progressive.

-optimize : This option optimizes the Huffman tables embedded in a JPEG image.

Now you may like the compressed image overwrite the source file right ? simple use the following code.


find /the/image/path -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {}\;

jpeoptim jpegoptim supports both lossless and lossy image optimization.

Install on Debian based


sudo apt-get install jpegoptim

Install of Redhat based


sudo yum install jpegoptim

How to use it ?


jpegoptim --strip-all --all-progressive --dest=opt testfile.JPG

by default jpegoptim overwrite the source file so you need the original file you have to set the –dest to different path. The above command will display the compressed image details.

As mentioned earlier the jpeg image compression from PHP code can be implement with exec command but its not much effective when you consider the multiple file upload or bulk image upload time. you may noticed that the compression time of the image optimization tools is little bit longer , so when you use it along with code it will slow down the performance of the image upload  section. So I personally recommend to use the compression of jpeg image as cron job and let the task leave for your  server on less traffic time.

So you have to write a shell script for reading all the images from a folder and execute the compression tools like jpegtran or jpegoptim.

The sample shell script will look like follows. this is what I’m using.


#!/bin/bash
## Overwrite images ##
find workspace/img_compression/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;
find workspace/img_compression/ -name "*.JPG" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;
find workspace/img_compression/ -name "*.png" -type f -exec optipng {} \;
find workspace/img_compression/ -name "*.PNG" -type f -exec optipng {} \;

save the file as .sh format and set the cron job in your contab file.

Hope you found this article useful to improve your website loading speed and optimize you all jpeg images on the website. Yep its done now you implement the jpeg image compression with your website.

 

 

 

 

FacebookTwitterGoogle+RSS