November 2010

September 1, 2017

2010 vs 2017

4.75x

Prescriptions

Image Optimization

GZip

GZip works best for text-based content, while providing little to no byte shrinkage on previously-compressed assets. SVG is a text-based image format. Minifying and GZipping SVG image and font files can greatly reduce their SVG file size. Minify first. Then Gzip.

Remove Image Metadata

Cameras and software often add metadata to images that is not seen by the web user. This metadata can actually be a security risk by exposing geographical data. There’s free software that will strip EXIF metadata from multiple images at a time.

Serve the smallest image size for the screen size and resolution. Images, no matter the size, should be compressed as much as possible without noticeably degrading the quality. Image compression programs include ImageOptim and ImageAlpha for pngs. Can be automated with machine learning with SmartVision.

Use the Right Image Format

Image types include SVG, GIF, JPEG, PNG, and WebP.

GIF: Palette of less than 256 colors, like a comic, for transparency and for low quality animation

SVG: Better than GIFS: Scalable, Animatable, unlimited color pallette

PNG: When you need transparency and have more than 256 colors.

JPEG: raster images

JPEG with a CSS mask: when you need transparency on a raster image and PNG-24 file size is huge

WebP: Animation, transparency, and great resolution with small file size, but only supported in Blink. Test WebP

JPEG-XR: For Edge

Reduce the Number of Images

Reduce HTTP requests with sprites. Also, consider reducing actual number of images your page requires: is your image worth 1,000 words or does your site work better without it?

Leverage CSS

Leverage CSS to reduce image size and number of images:

Image Masking: use image masking when you need a “transparent JPEG” without PNG-24 file size

Set a minimum tap target size of of 48 CSS pixels on a site with a properly-set mobile viewport. Make important tap targets large enough to be easy to press, ensuring there is extra spacing between smaller tap targets.