by Jeff Eaton on November 26, 2012 // Short URL

Module Monday: ImageAPI Optimize

Media heavy Drupal sites feel the pain of bandwidth costs in a big way. Simply dropping a few large rotator images on your site's home page, for example, can bloat load times and inflate costs for network and CDN usage on high-traffic sites. Drupal 6's ImageCache module (now built into Drupal 7's Image module) can scale images down to the correct size automatically, but JPEG and PNG images still have a lot of space left to give: specialized utilities can crunch them down to save additional space without compromising quality. That's where the ImageAPI Optimize module comes in: it allows you to pipe all uploaded images through those optimizers automatically.

Screenshot of administration screen

Installing ImageAPI Optimize is easy on the Drupal side -- drop the module in place, turn it on, and head to the Image Settings configuration page. Normally, Drupal provides a simple 'quality selector' on that page to control the level of compression for scaled JPEGs. With this module installed, however, site builders can specify the specific compression and optimization utilities that should be used to crunch image files as much as possible.

Most of the supported utilities will need to be installed on your web server before they can be used, but if you don't have server access or just want to try things out, you can point the module to Yahoo's hosted Smush.it service. For designers who hand-tweak every image in Photoshop, or make manual use of "Export to Web" compression features in their image editors, the utilities supported by ImageAPI Optimize may not make a huge difference. But when users or non-designers are allowed to post images as part of Drupal content, ImageAPI Optimize can help ensure that you're saving all the space (and bandwidth) you can.

Jeff Eaton

Senior Digital Strategist

Want Jeff Eaton to speak at your event? Contact us with the details and we’ll be in touch soon.

Comments

Corey Aufang

Further PNG optimizations

Something that helps with PNG compression is posterizing.

PNG compression is based on horizontal runs of same colored pixels, so the more pixels in a row that are the same color, the less data is needed.

So if you reduce the numbers of colors that are in your image, you will end up with longer runs of same colored pixels, which when passed to an image compression program such as optipng, you greatly amplify your compression percentage.

I accomplished this with ImageMagick using the ImageMagick Raw Effect module (http://drupal.org/project/im_raw).

Using im_raw you add a image effect similar to this: "+dither -posterize 40".

"+dither" disables dithering, which is an optical illusion to simulate a fuller color palette using less colors, like how a chess board from a distance appears gray(ish). This is counter productive to PNG compression, so it must be disabled.

"posterize 40" tells ImageMagick to reduce the number of colors in the image down to 40. This number actually works quite well for many images, but you must be wary of smooth gradients. In and image that has large smooth gradients you will see jarring color steps that are visually unappealing.

Using this in addition to optipng we were able to consistently save more than 50% off the file size of un-resized images.

Reply

rashad

It will work for any images

It will work for any images because you can flush "imagecache cached" images - simply edit and save imagecache preset you need (D7) or flush preset with link (D6).

Reply