Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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?