00:00:00
03 May

How To Losslessly Compress And Convert JPGs to Progressive JPGs Using JPEGtran

Oliver Krautscheid Feb 11, 2014
0 1266

Most of what we download on the web are images. In fact most websites these days rarely serve a lot of CSS or JSS or even HTML, the biggest chunk are images and most webmasters (including me) are reluctant when it comes to compressing their images

Compression: A Loss Of Valuable Pixel And Information? Not Always

Maybe it’s because we are trained to think of a compression as a loss of information and that’s why we are reluctant, but these days there are many nifty tools that allow you to compress images without losing any information at all. Losless compression removes metadata and other information from images and can greatly reduce their size, sometimes by up to 80%. There’s no reason not to use it, because the image quality does not suffer from this compression

Progressive vs Baseline JPG

Progressive JPGs are rarely used, but site improvement tools like the popular http://webpagetest.org are promoting the use of progressive JPGs to improve the user experience. Progressive JPGs cut your images into several layers, making it possible to load your images step by step – in practice this will help your users to see what is being downloaded more quickly than when you’re using baseline JPGs.

How To Install JPEGtran (part of libjpeg)

Another reason why many webmasters are reluctant is that only a handful of linux tools are available that are good at compressing and converting JPGs and most lack proper documentation. In this article, I want to take a quick look at one of the tools and how you can install it:

The tool we are going to install is called JPEGtran and is part of the libjpeg libraries: http://jpegclub.org/jpegtran/

1. Make sure you have a proper repo (repository) installed on your server which allow you to install a lot of libraries and linux tools. I recommend to install the EPEL repo (follow the link if you need to install it)

2. Once you have verified that you have a good repo, lets search for the libjpeg library:

yum search libjpeg

You should get some results back similar to this:

Installing Libjpeg And Jpegtran.png

3. Alright, now that we have verified that it is included in your repo, you can go ahead and install it using

yum install libjpeg*

4. Ok, now let’s see if it’s properly installed using

jpegtran -h

. If you get a list of command switches for the jpegtran command you’re ready to go! If not, you may have to compile the libjpeg from scratch. You can download the source files here: libjpeg source files. Download the latest version jpegsrc.v9a.tar.gz and extract it. Compile it like any other program. If you need help with that search configure, make, make install and you will quickly find out how to install programs from source. If you’re still having problems, feel free to post a comment

Converting JPG to Progressive JPG

1. Now, let’s do a simple test to see if it works as expected and how much information gets lost. Copy a random JPG image to a local directory e.g. /home/scripts or whatever directory you use for your own files. On a sidenote, you may want to move scripts and “not-for-public files” outside the publicly accessible folders.

2. Now cd into the directory where the image is stored and run:

jpegtran -copy none -progressive Test.jpg > TestNew.jpg

3. Now enter

ls -l

to compare the filesizes. In the next step we are going to batch process all of our images:

Batch-Conversion

Over at github I found a nice littled script that can perform a batch conversion on an entire directory and is really easy to use even for Linux beginners. Alternatively, you can use the find command to find all JPGs in a directory and the exec command to perform a conversion, but it’s more time-consuming that way, especially if your folder names change.

Download Github batch: Optimize Images .SH

moskalev-ilya’s script can then be executed (after giving proper permission via chmod a+x ./optimize-images.sh) like this:

./optimize-images.sh /path/to/image/dir

Make sure you are cd’d into the directory where the script is stored e.g. /home/scripts, /root/scripts, etc

Additional Resources

About Us

Webmaster .Net is your all-in-one resource for blogging tips, system administration guides, industry news and a growing community of webmasters.

Can't find something or want to tip us?Contact@webmaster.net

Bulls and Bears
Webmaster Tutorials, Wordpress
0 shares663 views

WordPress SQL Query: Select And Delete Posts Between Two Dates

Oliver Krautscheid - Apr 08, 2017

If you are wondering how to delete posts for a certain date, you will need to know how Wordpress stores…

Advertising and Ad Networks, Copywriting
0 shares808 views

15 Tips For Increasing Facebook Ads CTR – Full Guide [2017 Update]

Cam Connor - Mar 30, 2017

In this article, we'll talk a lot about how you can write quality text ads on Facebook Ads to get…

Webmaster Tutorials
0 shares1486 views

10 Steps To Configure Nginx For WordPress, Drop Varnish And Cut Your CPU Load By 50%

Oliver Krautscheid - Oct 10, 2016

Are you using Varnish on your Wordpress blog? Possibly the Varnish script by Unixy? Great! Get rid off it. Here's…

Follow Us And get latest news

© 2016 Webmaster.Net - Property of Peakstone Media Ltd. - All rights reserved. | Privacy Policy | DMCA | Contact Us | Advertise