Currently Viewing Posts Tagged progressive

The way to check if JPEG file is progressive or not

There are two type of JPEG picture file.

  • Regular JPEG, or baseline JPEG.
  • Progressive JPEG, or Interlace JPEG.

It is very common, same quality picture, progressive jpeg is smaller than regular jpeg. And also progressive jpeg can show the content when the picture is download. This kind of show is to shown the whole picture with low quality then clear and clear, until whole picture is downloaded.

So, of course, if it is possible, we alwasy want to use progressive JPEG. Some old files need to be convert to progressive. But, before that, we have to identify which JPEG file is regular, which one is progressive already.

There is no simply way to check if a JPEG file is progressive on Windows.

I have CentOS server. It has ImageMagick.

I would like to introduce how to check if JPEG is progressive with ImageMagick.

identify -verbose file.jpg | grep Interlace

If the result is Interlace:JPEG it is progressive. If it say Interlace:None, then it is a baseline.

 

identify-jpeg

Some changes on Timthumb script

What is Timthumb?

It is a small php script for cropping, zooming and resizing web images (jpg, png, gif).

 

Here is the official place to donwload the script. https://code.google.com/p/timthumb/

Even the developers said it is not supported any more, there are still a lot of sites or plugins of wordpress and joomla.

Here is some modification I did on one of the plugin of Joomla.

1) Change default quality of image file.

The original default is 90%, it is not good enough. Especially when testing the output on webpagetest.org. So reduce the default image quality to 70. Find the following in tb.php


if(! defined('DEFAULT_Q') )                                     define ('DEFAULT_Q', 70);                                                               // Default image quality. Allows overrid in timthumb-config.php

It can also be overrid in url paraments. Such as http://your.domain.name/tb.php?src=/images/abc.jpg&q=70

2) Add interlace or Make jpeg file progressive

It is good to make jpg file to be progressive. It is similar file size but make it display on the monitor faster.

This is actually a mod on the original timthumb script.

Add following in the defaults section of timthumb script.


if(! defined('JPEG_IS_PROGRESSIVE') )    define ('JPEG_IS_PROGRESSIVE', TRUE);

Then find following script


$imgType = 'jpg';
imagejpeg($canvas, $tempfile, $quality);

And add one line in the middle. Looks like below:


                        $imgType = 'jpg';
                        imageinterlace($canvas, JPEG_IS_PROGRESSIVE);
                        imagejpeg($canvas, $tempfile, $quality);

timthumb

 

 

  • Archives