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.

Thomas Uhrig

June 09, 2013
Tweet

More Decks by Thomas Uhrig

Other Decks in Programming

Transcript

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

    Automatization API CDN scripting When? How? patterns overview
  2. lossy optimization # designer # tradeoff, decision # loss of

    quality # loss of weight (maybe a lot!) # everybody is responsible! lossless optimization
  3. lossy optimization lossless optimization # developers # must do! #

    tools and automatization # (almost) for free
  4. PNG # very good for graphics # truecolor and palett

    # full transparency # interlacing # non-lossy 1,19 MB 4,86 KB 8,59 KB
  5. JPG # very good for fotos # truecolor # interlacing

    # lossy # no transparency 525 KB 41,3 KB 16,4 KB
  6. SVG # not really an image format # but: best

    solution for pure charts! PNG
  7. 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
  8. Meta-Data # EXIF, comments, thumbnails # ~10% of image weight

    # easy as hell! # copyright?! Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8
  9. Meta-Data Progressive-JPEG # better user experience # only for large

    images (~10 KB) # easy as hell! Scale HTTP-Requests Crushed PNG PNG8
  10. Meta-Data Progressive-JPEG Scale # don't scale in HTML # CDNs

    # mobile devices and retina displays HTTP-Requests Crushed PNG PNG8
  11. Meta-Data Progressive-JPEG Scale HTTP-Requests # less traffic # ~10% of

    image weight # CSS-sprites or Base64 images Crushed PNG PNG8
  12. 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
  13. Meta-Data Progressive-JPEG Scale HTTP-Requests Crushed PNG PNG8 # prefer PNG8

    instead of GIF # for icons and graphics # don't forget to crush!
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. Conclusion: Tools to generate a new web page / commercial

    Use one tool for all - as a Photoshop-Plugin # Enigma64
  23. 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
  24. Development Deployment Life-Time & Legacy # include image optimization #

    upload dialogs # maintenance jobs Dynamic Images