Image compression resources | Paisley by The Dos Prompt

Image compression basics

Designing for Performance

by Lara Hogan

This is probably one of the most comprehensive introductory guides to image compression. If you don't read anything else, read this.

View Designing for Performance

Image compression for Web Developers

By Colt McAnlis, published on HTML5 rocks

View Image compression for Web Developers

Graphic Tools Related Guides

Photoshop – Optimizing images with Save for Web

By Adobe

Adobe put together a couple of guides explaining how "Save for Web" works and what the different options in that panel mean.

View the introduction guide to optimizing images
View the Web graphics optimization options guide

Fireworks – Optimize graphics

By Adobe

Although now deprecated, Fireworks offers a more extended range of options that Photoshop in terms of image optimization, particularly with regards to PNG8.

View the Optimize in the workspace guide
View the Optimize graphics files guide

GIMP Save for Web

By auris

A very handy plugin for GIMP, similar to the "Save for Web" panel in Photoshop. You will still need to change the image resolution before using it, as it doesn't scale images down automatically.

View the GIMP Save for Web plugin
View how to scale images in GIMP

JPEG

JPEG Selective Quality with Adobe Fireworks

By Andrew Jones, published on Big Nerd Ranch

A feature that is unfortunately not available in Adobe Photoshop anymore, selective quality in JPEG allows you to use two different compression settings in the same image. This means you can have higher quality on details - such as faces - and a lower quality on the background, reducing the image size considerably.

View JPEG Selective Quality with Adobe Fireworks

PNG

PNG8 compression

PNG8 is probably the most misunderstood PNG type; A PNG8 will be smaller than a GIF – unless you have a 1px transparent GIF – but the killer feature is the ability to have alpha transparency, as opposed to GIFs full or none. Unfortunately the "Save for Web" panel in Photoshop doesn't support the alpha transparency option, which led to many PNGs being saved as PNG32 instead.

Quantization, or my image has more than 256 colors

PNG8 will only have 256 colors maximum, and 256 shades of alpha. This might make you think that any image with more than 256 colors should be saved as a PNG 32 but this might not be the case. Many images can be reduced to 256 colors without a significant loss in quality. PNG8 images are usually considerably smaller than then PNG32 equivalent – for reference, a PNG32 has a whopping 16.7 million colors. Quantization is the name given to the process of bringing possibly 16.7 million colors to 256.

How can I quantize a PNG?

Use Adobe Fireworks (Windows and Mac OS)

One option is export your images as PNG24 or PNG 32 and create a PNG8 with Fireworks. Fireworks does a pretty good at compressing PNG8 but it has some quirks with the selection of the color palette.
Install the SuperPNG plugin for Photoshop (tested with CS, Windows and Mac OS)

SuperPNG adds an option to the "Save As" menu to save as SuperPNG. Apart from quantization, it has a handy set of options.

View SuperPNG
Use PNGoo (Windows)

Will require the .NET 3.5 Framework, if you don't have it installed yet.

Download PNGoo
Use ImageAlpha (Mac Os)

ImageAlpha is the goto tool if you are on Mac Os.

View ImageAlpha
Use Adobe Fireworks

View JPEG Selective Quality with Adobe Fireworks

SVG and SMIL

Using SVG

By Chris Coyier, published on CSS Tricks

A good introductory guide on using SVG, including how to export SVGs from Illustrator and how to use them on webpages.

View Using SVG

A Guide to SVG Animations (SMIL)

By Sara Soueidan, published on CSS Tricks

This is a very comprehensive guide on SVG animations; simple animations, path morphing, animations along a path and how to control them. Well worth a read if you're new to the world of SMIL.

View A Guide to SVG Animations (SMIL)

Flash2SVG

By Tom Byrne

If you ever wished you could animate SVG as easily as creating Flash animations, you will love this Flash plugin. It generates clean output code and we used it to create the images on Paisley's features page.

Download Flash2SVG on GitHub

Mega list of SVG information

By Chris Coyier

This is truly a huge list of SVG related info.

View the Compendium of SVG Information

APNG (Animated PNG)

APNG converter and tools

By Max Stepin

After years of living in the shadows APNG bounced back after Apple added support for it in Safari. Max Stepin created a bunch of useful GIF/APNG/GIF converters and APNG assemblers and disassemblers.

View Max Stepin APNG related projects on SourceForge