Image Optimization for The Web

Image optimization For the Web Guilherme Zühlke O’Connor http://www.z-oc.com

Optimise what? • Data transfer (ﬁle size) • HTTP requests • File maintenance • File References in Code

File size • Colour system • Number of colours effectively used • Image format • Image size

File Size by Save As - PNG - 8247 bytes (8Kb) Palette Save for Web - PNG 24 - 5471 bytes (5Kb) (png) Save for Web - PNG 8 - 128c - 4478 bytes (4Kb) 500x20px Save for Web - PNG 8 - 20c - 1259 bytes (1.2Kb) Gradient Save for Web - PNG 8 - 16c - 716 bytes Save for Web - PNG 8 - 8c - 507 bytes

File Size by Palette (gif) Save for Web - GIF - 128c - 5260 bytes (5Kb) 500x20px Save for Web - GIF - 20c - 1772 bytes (1.7Kb) Gradient Save for Web - GIF - 16c - 1071 bytes Save for Web - GIF - 8c - 765 bytes

File Size by Save As - JPG - Q10/12 - 20686 bytes (20Kb) compression Save for Web - JPG - 100% - 2016 bytes (2Kb) (jpg) Save for Web - JPG - 60% - 732 bytes 500x20px Save for Web - JPG - 30% - 571 bytes Gradient Save for Web - JPG - 5% - 490 bytes

Jpeg format • RGB or Grayscale • There is no lossless Jpeg • Good for gradients and loose edges • Poor for simple images • No precise control over the colour palette • Sacriﬁces chrominance, optim. luminance

Save for Web Save for Web Save for Web Jpeg 15% PNG8 - 8c Jpeg - 15% 200x300px 100x160px 100x160px 2121 bytes 997 bytes 5577 bytes http://ﬂickr.com/photos/annazuhlke/3254769257/ Jpeg Vs. Png

PNG format • 24 or up to 8 bits (RGB, GS or Indexed) • Lossless compression • Colorspace Reduction != Compression • Poor compression for complex gradient patterns • Alpha or 1-bit transparency (Probs in IE)

Save for Web Save for Web Save for Web PNG 8 - 128c JPEG - 30% PNG 24 200x300px 200x300px 200x300px 22,170 bytes 7,869 bytes 95,130 bytes http://ﬂickr.com/photos/annazuhlke/3252543983/ Photo rendering

GIF format • Up to 8 bits, indexed colour (up to 256c) • Lossless compression • 1 bit transparency • Generally poorer compression than PNG

Save for Web Save for Web PNG 8 - 128c GIF - 128c 200x300px 200x300px 22,170 bytes 28,930 bytes http://ﬂickr.com/photos/annazuhlke/3252543983/ Photo rendering

Colour Sytems • RGB • Grayscale • Indexed Colour

RGB • Each pixel is represented by 24 bits • Three channels (R,G & B) • 8 bits each

Grayscale • Each shade of gray is represented by 8 bits • 256 shades of gray overal • 1/3 of the basic ﬁle size for a non-colour image, compared to RGB

Indexed Colour • Each pixel is represented by up to 8 bits • A colour palette is created • Each colour in the palette is referenced by the (up to) 8 bits number

Cool! Can I create my colour palettes in photoshop beforehand so I have precise colours?

Yes, you can!

Image Sizes Size of compressed image ﬁles don’t increase linearly to the number of pixels

File Size by Save for Web - 500x20px - 507 bytes pixel qty Save for Web - 300x20px - 392 bytes (png) Save for Web - 100x20px - 248 bytes PNG-8 Save for Web - 10x20px - 190 bytes 8 colours Save for Web - 1x20px - 162 bytes

The less the merrier? Consider the rendering effort of tiling the image on the browser.

Sprites Multiple page assets in a single image

Having a single ﬁle... • It’s easier to maintain the image • It’s easier to deploy • Only one HTTP request • File size growth is sublinear on number of pixels and colours

Save for Web - 8c -100x20px - 248 bytes Arithmetic 248 x 4 x 4 = 449? Save for Web - 32c -100x80px - 449 bytes

More assets Save for Web - 48c 100x160px The beauty of 837 bytes sublinear increment! Save for Web - 48c 100x240px 899 bytes

If you maintain the files, you know... • Nothing is more boring and inefficient than saving, exporting maintaining and organizing a lot of files • You’ll have better use for your time and attention polishing and optimizing one file, rather than several

http://ﬂickr.com/photos/guioconnor/332026161/ Tiny and robust

Last but not least: (automate it)

http://smush.it

Smush.It • Lossless and extreme optimization • Quick and Simple • Be aware of conﬁdentiality issues processing images on a site external to the company.

? Questions gui@z-oc.com

http://www.z-oc.com	640
http://www.temp1.z-oc.com	6
http://translate.googleusercontent.com	2
http://www.slideshare.net	2

Image Optimization for The Web

by Guilherme Zühlke O'Connor on Feb 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 650

Statistics

Image Optimization for The Web — Presentation Transcript