Image optimization for websites

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.

E7c3430a01629f9ca6d3bcb847e8e3b2?s=128

Thomas Uhrig

June 09, 2013
Tweet

Transcript

  1. 2.

    Best Practices non-lossy lossy format Tools API open-source? overview examples

    Automatization API CDN scripting When? How? patterns overview
  2. 3.
  3. 5.

    lossy optimization # designer # tradeoff, decision # loss of

    quality # loss of weight (maybe a lot!) # everybody is responsible! lossless optimization
  4. 6.

    lossy optimization lossless optimization # developers # must do! #

    tools and automatization # (almost) for free
  5. 9.

    PNG # very good for graphics # truecolor and palett

    # full transparency # interlacing # non-lossy 1,19 MB 4,86 KB 8,59 KB
  6. 10.

    JPG # very good for fotos # truecolor # interlacing

    # lossy # no transparency 525 KB 41,3 KB 16,4 KB
  7. 12.

    SVG # not really an image format # but: best

    solution for pure charts! PNG
  8. 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
  9. 16.
  10. 23.

    Meta-Data # EXIF, comments, thumbnails # ~10% of image weight

    # easy as hell! # copyright?! Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8
  11. 24.

    Meta-Data Progressive-JPEG # better user experience # only for large

    images (~10 KB) # easy as hell! Scale HTTP-Requests Crushed PNG PNG8
  12. 25.

    Meta-Data Progressive-JPEG Scale # don't scale in HTML # CDNs

    # mobile devices and retina displays HTTP-Requests Crushed PNG PNG8
  13. 26.

    Meta-Data Progressive-JPEG Scale HTTP-Requests # less traffic # ~10% of

    image weight # CSS-sprites or Base64 images Crushed PNG PNG8
  14. 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
  15. 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!
  16. 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
  17. 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
  18. 32.
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 39.

    Conclusion: Tools to generate a new web page / commercial

    Use one tool for all - as a Photoshop-Plugin # Enigma64
  26. 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
  27. 43.

    Development Deployment Life-Time & Legacy # include image optimization #

    upload dialogs # maintenance jobs Dynamic Images