Image optimization for websites

Optimizing the images of a web page is easy and the best way to speedup the site. This presentation contains some general patterns and practices for lossy and non-lossy optimization.

Transcript

1. Image optimization for websites Best Practices & Automatization
2. Best Practices non-lossy lossy format Tools API open-source? overview examples Automatization API CDN scripting When? How? patterns overview
3. Page Weight Response Time Almost 50% of the page weight for the Alexa Top-10 are images!
4. lossy optimization lossless optimization
5. lossy optimization # designer # tradeoff, decision # loss of quality # loss of weight (maybe a lot!) # everybody is responsible! lossless optimization
6. lossy optimization lossless optimization # developers # must do! # tools and automatization # (almost) for free
7. lossy optimization
8. Choose your format!
9. PNG # very good for graphics # truecolor and palett # full transparency # interlacing # non-lossy 1,19 MB 4,86 KB 8,59 KB
10. JPG # very good for fotos # truecolor # interlacing # lossy # no transparency 525 KB 41,3 KB 16,4 KB
11. GIF 9,75 KB # simple animations # yes/no transparency # non-lossy # interlacing
12. SVG # not really an image format # but: best solution for pure charts! PNG
13. PNG in detail Color reduction
14. 182 KB / 100% 46,2 KB / 60% 182 KB / 100% PNG 8,59 KB / PNG-8 / 256 4,07 KB / PNG-8 / 32 15,9 KB / PNG-24 / truecolor
15. JPEG in detail Compression
16. 182 KB / 100% PNG 182 KB / 100% 46,2 KB / 60% 16 KB / 15%
17. Conclusion Choose your format! Color reduction Compression Partial Compression
18. Conclusion Choose your format! Color reduction Compression Partial Compression
19. Conclusion Choose your format! Color reduction Compression Partial Compression
20. Conclusion Choose your format! Color reduction Compression Partial Compression
21. non-lossy optimization
22. Meta-Data Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8
23. Meta-Data # EXIF, comments, thumbnails # ~10% of image weight # easy as hell! # copyright?! Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8
24. Meta-Data Progressive-JPEG # better user experience # only for large images (~10 KB) # easy as hell! Scale HTTP-Requests Crushed PNG PNG8
25. Meta-Data Progressive-JPEG Scale # don't scale in HTML # CDNs # mobile devices and retina displays HTTP-Requests Crushed PNG PNG8
26. Meta-Data Progressive-JPEG Scale HTTP-Requests # less traffic # ~10% of image weight # CSS-sprites or Base64 images Crushed PNG PNG8
27. Meta-Data Progressive-JPEG Scale HTTP-Requests Crushed PNG # PNG is tricky! # PNG uses chunks to be extendible # a lot of chunks are not need for the web # ~30% of image weight PNG8
28. Meta-Data Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8 # prefer PNG8 instead of GIF # for icons and graphics # don't forget to crush!
29. Minimize the number of HTTP requests! CSS-Sprites Base64
30. CSS-Sprites # multiple (similar) images combined # a lot of work, but worth it! # less traffic # ~10% of image weight # modular sprites for sites > 3 pages with CSS-Sprite / 1 Request Google PageSpeed 92/100 without CSS-Sprite / 40 Requests Google PageSpeed 62/100 PNG
31. Base64 # No HTTP-Requests # As image/html or background image/css # less traffic # use for small images < 40 KB # 24 x 24 px / PNG # Original Size: 2405 Bytes # Data URI Size: 3208 Bytes data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAAAXNSR 0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrD hsAAAj6SURBVGhDrZhpc1XHEYb10+AXAH+A7UM+IFlbHFdSlZSQPqZs3cX BsSsVA0YbkliTgBCUEEpiC+MCgVgKYwkQS4EohMAFJkJX7X56Tl+Nju9yrs NbOpqZnpnud7p7+hypSTKiVCpZu7a2Zq0jPY5Ray5G1nVpZCLvytMtSBtOr/F Dg0r70vsbQV3ytZTHBJaXl2X//v2ya9cuaW9vl7a2Nunq6pKdO3dKd3e3jU+cO PELfbGORpE5baoB0tu3bzfSMzMzRqIawWPHjtm6fD5v42qopKMSGiKfVnr8+ HHz7P379xNJZaSJTE5OytatW+Xq1auJZOMa76f3pfGrPI/SAwcOVPVgFuNE zKNVCfWIg8zkY2Xk9sGDB2uS5KIir0bC5dyPOAKOavtiZCIfK8JTHR0dyWgjf F3acC0iRGDLli3y8uXLRLKOegdoOG22bdtmbT3FtZA+JJ7fu3ev9UGsu5aduu RjQ+R5Ol24tESC8G/evFl27NhhFzIGJZILumnTJiuZ3JV0riN376M3tlENDaUN BAFjajdjDuTVwwlRgZCn+5RKrzK5XE52795tMkDF8gIQE/6/yQO84uRpvaYD CJK7sSHWQJRIOZiHOC8vB PNG
32. Tools
33. Tool Lizenz Interface Techniken Reduction Comment Smush.it free to use web, plugins + Steve Souders! Kraken.io free to use with limitations web, API, plugins + lossy & non-lossy! ImageOpt open source Local GUI PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. + only Mac, slow (PNGOut) PNGGauntlet free to use Local GUI combines PNGOUT, OptiPNG, and DeflOpt + only Windows, slow (PNGOut) Enigma64 19.99 $ PSD-Plugin lossless & optional Base64
34. Tool Lizenz Interface Techniken Reduction Comment JPEG-Mini free to use web, plugins ++ Puny-PNG free version, Pro: higher compression & lossy web, API, plugins ++ lossy & non-lossy! each file max. 150 KB, 15 files max. TinyPNG free to use web, CMD pngquant /8-Bit + Transparenz ++ each original file max 3MB, 20 files max. CompressPNG free to use web PNG 8 + transparenz ++ 20 files max Pngcrush open source CMD removes chunks ++ slow
35. Tool Lizenz Interface Techniken Evaluation Comment SpriteCow free to use web - generates css-file only SpritePad free to use, Pro web + generates sprite-png and css-file Spritebaker free to use web base64 ++ easy to use, use with gzip only, no IE < 8 support, some browser limit data URI size
36. Conclusion: Tools to optimize an existing web page / for free 2. Use special tools for big images additionally # Tiny PNG # JPEG-Mini # PNG Crush 3. Use Data URI or CSS-Sprites for small images # Spritebaker # Spritepad 1. Use an allrounder for all images # Kraken.io
37. Conclusion: Tools to optimize an existing web page / for free 2. Use special tools for big images additionally # Tiny PNG # JPEG-Mini # PNG Crush 3. Use Data URI or CSS-Sprites for small images # Spritebaker # Spritepad 1. Use an allrounder for all images # Kraken.io
38. Conclusion: Tools to optimize an existing web page / for free 2. Use special tools for big images additionally # Tiny PNG # JPEG-Mini # PNG Crush 3. Use Data URI or CSS-Sprites for small images # Spritebaker # Spritepad 1. Use an allrounder for all images # Kraken.io
39. Conclusion: Tools to generate a new web page / commercial Use one tool for all - as a Photoshop-Plugin # Enigma64
40. Automatization
41. Development Deployment Life-Time & Legacy Dynamic Images
42. Development # do scripting! # Python, Ruby, anything! # pick your favorite tool Deployment # do scripting! # Python, Ruby, anything! # pick your favorite tool Life-Time & Legacy Dynamic Images
43. Development Deployment Life-Time & Legacy # include image optimization # upload dialogs # maintenance jobs Dynamic Images
44. Development Deployment Life-Time & Legacy Dynamic Images # Cloudinary.com # Imgix.com # CDNConnect.com
45. Questions?