How does Google's Page Speed lossless image compression work?

Question

When you run Google\'s PageSpeed plugin for Firebug/Firefox on a website it will suggest cases where an image can be losslessly compressed, and provide a link to download th

Answer 1

If you're really interested in the technical details, check out the source code:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

---

For PNG files, they use OptiPNG with some trial-and-error approach

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

When all four combinations are applied, the smallest result is kept. Simple as that.

(N.B.: The optipng command line tool does that too if you provide -o 2 through -o 7)

---

For JPEG files, they use jpeglib with the following options:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

---

Similarly, WEBP is compressed using libwebp with these options:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

---

There is also image_converter.cc which is used to losslessly convert to the smallest format.

Answer 2

To Replicate PageSpeed's JPG Compression Results in Windows:

I was able to get exactly the same compression results as PageSpeed using the Windows version of jpegtran which you can get at www.jpegclub.org/jpegtran. I ran the executable using the DOS prompt (use Start > CMD). To get exactly the same file size (down to the byte) as PageSpeed compression, I specified Huffman optimization as follows:

jpegtran -optimize source_filename.jpg output_filename.jpg

For more help on compression options, at the command prompt, just type: jpegtran

Or to Use the Auto-generated Images from the PageSpeed tab in Firebug:

I was able to follow Pumbaa80's advice to get access to PageSpeed's optimized files. Hopefully the screenshot here provides further clarity for the FireFox environment. (But I was not able to get access to a local version of these optimized files in Chrome.)

And to Clean up the Messy PageSpeed Filenames using Adobe Bridge & Regular Expressions:

Although PageSpeed in FireFox was able to generate optimized image files for me, it also changed their names turning simple names like:

nice_picture.jpg

into

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

I discovered that this seems to be a common complaint. Since I didn't want to rename all my pictures by hand, I used Adobe Bridge's Rename tool along with a Regular Expression. You could use other rename commands/tools that accept Regular Expressions, but I suspect that Adobe Bridge is readily available for most of us working with PageSpeed issues!

1. Start Adobe Bridge
2. Select all files (using Control A)
3. Select Tools > Batch Rename (or Control Shift R)
4. In the Preset field select "String Substitution". The New Filenames fields should now display “String Substitution”, followed by "Original Filename"
5. Enable the checkbox called “Use Regular Expression”

6. In the “Find” field, enter the Regular Expression (which will select all characters starting at the rightmost underscore separator):

   _(?!.*_)(.*)\.jpg$

7. In the “Replace with” field, enter:

   .jpg

8. Optionally, click the Preview button to see the proposed batch renaming results, then close

9. Click the Rename button

Note that after processing, Bridge deselects files that were not affected. If you want to clean all your .png files, you need reselect all the images and modify the configuration above (for "png" instead of "jpg"). You can also save the configuration above as a preset such as "Clean PageSpeed jpg Images" so that you can clean filenames quickly in future.

Configuration Screenshot / Troubleshooting

If you have troubles, it's possible that some browsers might not show the RegEx expression above properly (blame my escape characters) so for a screenshot of the configuration (along with these instructions), see:

How to Use Adobe Bridge's Batch Rename tool to Clean up Optimized PageSpeed Images that have Messy Filenames

Answer 3

I use jpegoptim to optimize JPG files and optipng to optimize PNG files.

If you're on bash, the command to losslessly optimize all JPGs in a directory (recursively) is:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

You can add -m[%] to jpegoptim to lossy compress JPG images, for example:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

To optimize all PNGs in a directory:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2 is the default optimization level, you can change this from o2 to o7. Notice that higher optimization level means longer processing time.

Answer 4

Take a look at http://code.google.com/speed/page-speed/docs/payload.html#CompressImages which describes some of the techniques/tools.

Answer 5

In my opinion the best option out there that effectively handles most image formats in a go is trimage. It effectively utilizes optipng, pngcrush, advpng and jpegoptim based on the image format and delivers near perfect lossless compression.

The implementation is pretty easy if using a command line.

sudo apt-get install trimage    
trimage -d images/*

and voila! :-)
Additionally you will find a pretty simple interface to do it manually as well.

Answer 6

If you are looking for batch processing, keep in mind trimage complains if you don't have Xserver avail. In that case just write a bash or php script to do something like

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Change options to suite your needs.