Upload
guilherme-zuehlke-oconnor
View
4.119
Download
0
Embed Size (px)
DESCRIPTION
How to optimize image files for the web regarding file size, http requests and code and file maintenance.
Citation preview
Image optimizationFor the Web
Guilherme Zühlke O’Connorhttp://www.z-oc.com
Optimise what?
• Data transfer (file 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 Palette(png)500x20pxGradient
Save As - PNG - 8247 bytes (8Kb)
Save for Web - PNG 24 - 5471 bytes (5Kb)
Save for Web - PNG 8 - 128c - 4478 bytes (4Kb)
Save for Web - PNG 8 - 20c - 1259 bytes (1.2Kb)
Save for Web - PNG 8 - 16c - 716 bytes
Save for Web - PNG 8 - 8c - 507 bytes
File Size by Palette
(gif)500x20pxGradient
Save for Web - GIF - 128c - 5260 bytes (5Kb)
Save for Web - GIF - 20c - 1772 bytes (1.7Kb)
Save for Web - GIF - 16c - 1071 bytes
Save for Web - GIF - 8c - 765 bytes
File Size by compression
(jpg)500x20pxGradient
Save As - JPG - Q10/12 - 20686 bytes (20Kb)
Save for Web - JPG - 100% - 2016 bytes (2Kb)
Save for Web - JPG - 60% - 732 bytes
Save for Web - JPG - 30% - 571 bytes
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
• Sacrifices chrominance, optim. luminance
Jpeg Vs. Png
Save for WebJpeg 15%
200x300px2121 bytes
Save for WebPNG8 - 8c100x160px997 bytes
Save for WebJpeg - 15%100x160px5577 bytes
http://flickr.com/photos/annazuhlke/3254769257/
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)
Photo rendering
Save for WebPNG 8 - 128c
200x300px22,170 bytes
Save for WebJPEG - 30%200x300px7,869 bytes
Save for WebPNG 24
200x300px95,130 bytes
http://flickr.com/photos/annazuhlke/3252543983/
GIF format
• Up to 8 bits, indexed colour (up to 256c)
• Lossless compression
• 1 bit transparency
• Generally poorer compression than PNG
Photo rendering
Save for WebPNG 8 - 128c
200x300px22,170 bytes
Save for WebGIF - 128c200x300px
28,930 bytes
http://flickr.com/photos/annazuhlke/3252543983/
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 file 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 SizesSize of compressed image files don’t increase linearly to
the number of pixels
File Size by pixel qty
(png)PNG-8
8 colours
Save for Web - 500x20px - 507 bytes
Save for Web - 300x20px - 392 bytes
Save for Web - 100x20px - 248 bytes
Save for Web - 10x20px - 190 bytes
Save for Web - 1x20px - 162 bytes
The less the merrier?Consider the rendering effort of tiling the image on the
browser.
SpritesMultiple page assets in a single image
Having a single file...
• 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
Arithmetic248 x 4 x 4 = 449?
Save for Web - 8c -100x20px - 248 bytes
Save for Web - 32c -100x80px - 449 bytes
More assets
The beauty of sublinear increment!
Save for Web - 48c100x160px837 bytes
Save for Web - 48c100x240px899 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
Tiny and robusthttp://flickr.com/photos/guioconnor/332026161/
Last but not least:(automate it)
Smush.It
• Lossless and extreme optimization
• Quick and Simple
• Be aware of confidentiality issues processing images on a site external to the company.