Image compression basics
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.
Graphic Tools Related Guides
Photoshop – Optimizing images with Save for Web
Adobe put together a couple of guides explaining how "Save for Web" works and what the different options in that panel mean.
Although now deprecated, Fireworks offers a more extended range of options that Photoshop in terms of image optimization, particularly with regards to PNG8.
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.
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.
Use PNGoo (Windows)
Will require the .NET 3.5 Framework, if you don't have it installed yet.
Use ImageAlpha (Mac Os)
ImageAlpha is the goto tool if you are on Mac Os.
Use Adobe Fireworks
SVG and SMIL
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.
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.
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.
APNG (Animated PNG)
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.
The official website for WebP where you can find a lot of information about it. This page includes a link to the command line WebP converter.
Information about the JPEG XR Codec.