Squishing the Last Drops from Your PNGs

Tweet

One of the areas I’ve always felt Fireworks had Photoshop covered was in its PNG export facility. As well as being more flexible and advanced, it almost always produces smaller files.

But can you do even better? Perhaps now you can.

Back in July, Sergey Chikuyonok wrote a really interesting article in Smashing Magazine on optimizing your PNGs. Basically, Sergey has spent some time understanding exactly how PNG’s compression magic works and then figured out some techniques you can use with Photoshop to make your images more PNG-friendly.

Clever stuff and well worth a read. But what about if you just want the instant PNG gratification without the hefty mathematics primer?

Puny PNG

No problem. Happily the smart folk at GracePoint After Five have constructed a free online PNG compression tool called PunyPNG that seamlessly incorporates some of Sergey’s finest PNG voodoo.

I have to admit I was skeptical that my lovely Fireworks-forged PNGs would have any worthwhile fat to trim, but I’ve been able to slim down most files by around 15% — even more for 8-bit PNGs with lots of transparency.

In some random testing I was able to reduce the following:

  • Mozilla logo: 10%
  • SitePoint logo (originally a GIF): 26%
  • Typekit’s logo: 33%
  • Google’s search page logo: 10%

Okay, so would anyone really bother trying to squeeze a few measly KB out of a 25KB PNG in the age of high speed, broadband connections?

Some might argue it’s overkill for every random graphic used, but it certainly makes great sense on certain occasions. For instance:

  • Site logos, headers, and other repeated graphics:
    As practically every visitor comes across these graphics, a little care in their preparation pays off on every pageload.
  • CSS image sprites:
    CSS sprites are a great way to pre-cache images for rollovers, animations, and other effects, (and reduce server connections) but they rely on the user receiving one large image quicker than a number of small images. In fact, sites such as YouTube put almost all their interface graphics on a single big image. Clearly anything you can do to make an image like that download faster is a huge bonus to everyone.

Interestingly, I wasn’t able to squeeze a single KB out of that amazing 13KB Youtube sprite.

Anyway, give it a test-drive on some of your PNGs and let me know the results.

From SitePoint Design View #63

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • k3liutzu

    On windows you could use PNG optimizer

    Another thing it takes care of, is the inconsistance between browsers when rendering PNG colors (there is a visible difference betweeen some of them) as seen here

  • DcUK

    Well I just ran that YouTube graphic through Ken Silverman’s pngout with:

    pngout master-vfl119994.png master-vfl119994-new.png /c3 /f0 /d8

    and got 10905 bytes instead of 13233, so it isn’t that good.

  • DcUK

    Now you’ve really got me thinking about all those wasted bytes. A little more tweaking and we get:

    pngout master-vfl119994.png master-vfl119994-new.png /c3 /f0 /d8 /b1024

    which gives us 10561 bytes, that’s a little over 20% off their optimized image. I make that around 2.5GB of traffic saved per million page hits.

  • http://fvsch.com Florent V.

    @Alex Walker: Jennifer Farley covered Yahoo’s Smush.it tool recently. It does a similar thing (but Yahoo recently changed it from a standalone tool to a tool integrated in their developer network, and now it sucks).

    @DcUK: that’s an interesting result, but if i remember correctly pngout tends to make PNG-8 images out of your PNG-24 ones, and sometimes reduce the number of colors in a PNG-8. If you’re already optimizing your images (choice of format and number of colors), you may lose some quality. Meanwhile, the focus of tools such as Smush.it and PunyPNG is to optimize an image without altering its format or number of colors. The designer or front-end developer chooses the format or number of colors or JPEG quality level, and the tool optimizes that.

    I may have missed a few things when i last tried to use pngout, though.

  • DcUK

    @FlorentV: pngout does indeed (if appropriate) convert images into a PNG-8 palette-based format, but in the YouTube example given above the image is already in this format and thus the palette remains unchanged, as does the transparency. You do need to be careful with the options for pngout, but it can produce extremely good results in certain cases. I agree that optimisations that lower the quality cannot really be considered such.

  • duo

    I’ve been testing a jquery overlay for use on our new site. It comes with some transparent PNG’s which I’ve just punyfied.

    petrol.png 47,880 bytes down to 2,307 bytes saved 45,573 bytes 96% Now that’s puny

    close.png 31,859 bytes down to 1,001 bytes saved 30,858 bytes 97% Now that’s puny

    I think that’s worth doing.

  • Brocberry

    I’m new to all this and that youtube image is intriguing; not only is it small in pixels but it’s also a single image used as many.

    Firefox>image properties somehow knows that it’s “169px × 2800px (scaled to 33px × 557px)”.

  • http://www.olsenportfolio.com/ nrg_alpha

    @Brocberry,

    Yep, images like that are also known as css sprite sheets. There is a misconception out there that a bunch of small images is better than a single larger one that contains those smaller ones. Assuming compression is the equivalent in both the collective smaller images as well as the larger one, the larger one serves some benefits.

    As far as website performance is concerned, this can drastically reduce the amount of http request and response headers flying around when your browser makes contact with the server in question, as each unique element of the site page has to be requested.. so more individual graphics means more requests. So the more images stored in this sprite sheet means 1 single request for all those graphics as opposed to each of them being requested individually. You can read up about css sprite sheets here. You can also learn more about this (and additional optimization techniques) over at Yahoo’s best practices page.

    As far as memory is concerned, a larger image is smaller in file size than the collective individual sizes. Why? Each image file has to have its own localized information like its filename, colour tables and what have you. So the collective sizes of all these aspects of the individual files will out weigh the image information stored in the larger image.