Resources
There is a truckload of resources out there regarding image compression and image optimization that several people kindly shared on the web. We compiled some of the most comprehensive/useful guides and tools.
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.
Image compression for Web Developers
By Colt McAnlis, published on HTML5 rocks
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.
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.
-
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
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.
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.
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.
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.
WebP
WebP official website
By Google
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.
WebP Photoshop plugin
By Andrew Jones, published on Big Nerd Ranch
Export to WebP directly from Photoshop.
JPEG XR
JPEG XR Photoshop plugin (CS only)
By Microsoft
JPEG XR plugin for Photoshop; it only works with Creative Suite, not with Creative Cloud. There are no plans to port it.