Image Optimization for The Web
-
Upload
guilherme-zuehlke-oconnor -
Category
Design
-
view
4.120 -
download
0
description
Transcript of Image Optimization for The Web
![Page 1: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/1.jpg)
Image optimizationFor the Web
Guilherme Zühlke O’Connorhttp://www.z-oc.com
![Page 2: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/2.jpg)
Optimise what?
• Data transfer (file size)
• HTTP requests
• File maintenance
• File References in Code
![Page 3: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/3.jpg)
File size
• Colour system
• Number of colours effectively used
• Image format
• Image size
![Page 4: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/4.jpg)
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
![Page 5: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/5.jpg)
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
![Page 6: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/6.jpg)
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
![Page 7: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/7.jpg)
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
![Page 8: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/8.jpg)
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/
![Page 9: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/9.jpg)
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)
![Page 10: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/10.jpg)
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/
![Page 11: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/11.jpg)
GIF format
• Up to 8 bits, indexed colour (up to 256c)
• Lossless compression
• 1 bit transparency
• Generally poorer compression than PNG
![Page 12: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/12.jpg)
Photo rendering
Save for WebPNG 8 - 128c
200x300px22,170 bytes
Save for WebGIF - 128c200x300px
28,930 bytes
http://flickr.com/photos/annazuhlke/3252543983/
![Page 13: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/13.jpg)
Colour Sytems
• RGB
• Grayscale
• Indexed Colour
![Page 14: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/14.jpg)
RGB
• Each pixel is represented by 24 bits
• Three channels (R,G & B)
• 8 bits each
![Page 15: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/15.jpg)
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
![Page 16: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/16.jpg)
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
![Page 17: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/17.jpg)
Cool!Can I create my colour palettes in photoshop
beforehand so I have precise colours?
![Page 18: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/18.jpg)
Yes, you can!
![Page 19: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/19.jpg)
Image SizesSize of compressed image files don’t increase linearly to
the number of pixels
![Page 20: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/20.jpg)
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
![Page 21: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/21.jpg)
The less the merrier?Consider the rendering effort of tiling the image on the
browser.
![Page 22: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/22.jpg)
SpritesMultiple page assets in a single image
![Page 23: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/23.jpg)
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
![Page 24: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/24.jpg)
Arithmetic248 x 4 x 4 = 449?
Save for Web - 8c -100x20px - 248 bytes
Save for Web - 32c -100x80px - 449 bytes
![Page 25: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/25.jpg)
More assets
The beauty of sublinear increment!
Save for Web - 48c100x160px837 bytes
Save for Web - 48c100x240px899 bytes
![Page 26: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/26.jpg)
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
![Page 27: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/27.jpg)
Tiny and robusthttp://flickr.com/photos/guioconnor/332026161/
![Page 28: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/28.jpg)
Last but not least:(automate it)
![Page 30: Image Optimization for The Web](https://reader033.fdocuments.us/reader033/viewer/2022052307/5558496ed8b42a993b8b460b/html5/thumbnails/30.jpg)
Smush.It
• Lossless and extreme optimization
• Quick and Simple
• Be aware of confidentiality issues processing images on a site external to the company.