Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Velocity Conference 2013: A Picture Costs A Thousand Words
Next
Download to read offline and view in fullscreen.

45

Share

A Picture Costs A Thousand Words

Download to read offline

Images seem simple - they're static, independent from each other, and don't mess up the DOM. However, images make up 60%-70% of page bytes, and their visual nature makes them critical for user experience. Investing in Image Optimization is a highly worthwhile investment.

This presentation covers 4 aspects of Image Optimization:
- Optimizing Image formats (including background on GIF, PNG, JPEG, WebP, JPEG XR and more)
- Optimizing image delivery
- Optimizing image loading in the page
- Responsive Images - optimizing images for mobile screens

A Picture Costs A Thousand Words

  1. 1. ©2013 AkamaiFaster ForwardTM A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai
  2. 2. ©2013 AkamaiFaster ForwardTM YOU HAVE AN IMAGE PROBLEM
  3. 3. ©2013 AkamaiFaster ForwardTM The Good (Performance-wise) -  Images are pre-compressed -  No need to gzip them, can’t forget to do so -  Images don’t block rendering -  Images don’t block downloading other resources -  Including other images -  Images don’t modify the DOM -  Images are often rendered by the GPU -  Images are STATIC
  4. 4. ©2013 AkamaiFaster ForwardTM The Bad (Performance-wise) -  Images contend (with other resources) for bandwidth -  Images contend for CPU/GPU -  Images contend for TCP connections -  Images are visually significant on a page -  Pages contain A LOT OF images -  Images are HEAVY
  5. 5. ©2013 AkamaiFaster ForwardTM Images make up 61% of Page Bytes h"p://h"parchive.org/interes2ng.php#bytesperpage    
  6. 6. ©2013 AkamaiFaster ForwardTM Images make up 69% of Page Bytes on Mobile h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage    
  7. 7. ©2013 AkamaiFaster ForwardTM Image Bytes grew 19% in past 8 months h"p://h"parchive.org/trends.php?s=All&minlabel=Oct+1+2012&maxlabel=May+15+2013#bytesImg&reqImg    
  8. 8. ©2013 AkamaiFaster ForwardTM What is there to optimize with images? -  Optimizing image formats -  Optimizing image delivery -  Optimizing image loading process -  Optimizing images for mobile
  9. 9. ©2013 AkamaiFaster ForwardTM OPTIMIZING IMAGE FORMATS
  10. 10. ©2013 AkamaiFaster ForwardTM GIF – Graphics Interchange Format -  26 Years Old (1987) -  256 Colors -  “Simple” Transparency -  No partial (Alpha) transparency -  Supported Everywhere -  Supports Animation -  Previously Patented -  Patents expired by now
  11. 11. ©2013 AkamaiFaster ForwardTM PNG – Portable Network Graphics -  17 Years Old (1996) -  Supports 8-32 bit color palettes -  PNG8 and PNG24 Most Common -  Supports Alpha Transparency -  Good browser support -  Certain issues in IE 6-8 -  Non-patented -  Supports Animation (MNG)! -  No browser support
  12. 12. ©2013 AkamaiFaster ForwardTM Lossless PNG Compression -  Delta-Filter Encoding -  Write pixels as delta from neighbors -  Compress using LZ77 -  Reference past sequences -  Compress using Huffman code -  Identify repeating sequences -  Code popular ones with fewer bytes =  1,2,3,4,5,        0x20     =  1x25   =  1,2,3,4,5,        (-­‐5,5)x5     Up  Delta   LeL  Delta  
  13. 13. ©2013 AkamaiFaster ForwardTM Lossless PNG Optimization -  Delta Filter Optimization -  Per row, choose comparison target: None, Left, Up, Average, Paeth -  Convert from PNG 24 -> 8 -  Possibly using multiple PNG 8 layers -  Tune LZ77 distance/length parameters -  Tune Huffman buffer size -  Trade “Alpha” transparency with simple (100%) transparency -  PNG Optimization Tools: PNGCrush, OptiPNG
  14. 14. ©2013 AkamaiFaster ForwardTM JPEG – Joint Photographic Experts Group -  21 years old (1992) -  Supports RGB Colors (24 bit) -  Supports custom color palettes -  No Transparency Support -  Doable with HTML5 Canvas Hacks -  No Animation Support -  Not impressed… -  It’s a Lossy Format
  15. 15. ©2013 AkamaiFaster ForwardTM JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks
  16. 16. ©2013 AkamaiFaster ForwardTM JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance Y   Cb   Cr  
  17. 17. ©2013 AkamaiFaster ForwardTM JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average •  and round (DCT + Quantization) Y   Cb   Cr  
  18. 18. ©2013 AkamaiFaster ForwardTM JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average and round (DCT + Quantization) 4.  Write as line, compress (Huffman) =  -­‐9,-­‐1,0(x62)  
  19. 19. ©2013 AkamaiFaster ForwardTM JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as delta from average and round (DCT + Quantization) 4.  Write as line, compress (Huffman) Q=10   Q=50   Original  
  20. 20. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=90:  105  KB  
  21. 21. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=75:  53  KB  
  22. 22. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=40:  30  KB  
  23. 23. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=20:  18  KB  
  24. 24. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=10:  11  KB  
  25. 25. ©2013 AkamaiFaster ForwardTM Original  PNG:  574  KB   JPEG,  Q=5:  7  KB  
  26. 26. ©2013 AkamaiFaster ForwardTM Lossy Compression – Not for Everyone GIF,  11  KB   JPEG,  Q=80,  8  KB     JPEG,  Q=30,  4  KB     Average  Color  not   representa2ve   PNG,  7  KB  
  27. 27. ©2013 AkamaiFaster ForwardTM JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  Quality level is not a percentage -  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Tools: jpegtran, ImageMagick 0   50   100   150   200   250   300   350   0   20   40   60   80   100   120   Quality  vs  File  Size  
  28. 28. ©2013 AkamaiFaster ForwardTM JPEG Metadata 120KB   Thumbnail  
  29. 29. ©2013 AkamaiFaster ForwardTM JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Tools: jpegtran, ImageMagick
  30. 30. ©2013 AkamaiFaster ForwardTM JPEG Baseline vs. Progressive Baseline   Progressive   h"p://www.bookofspeed.com/chapter5.html     Pro-­‐Tip:  Configure  how  blocks  are   “interlaced”  (The  “Coefficient”)   -­‐  Controls  minimum  quality  level   -­‐  Affects  Size  
  31. 31. ©2013 AkamaiFaster ForwardTM Baseline vs Progressive – Visual Progress Baseline   Progressive   Patrick  Meenan:   “…  Looking  at  the   Speed  Index,  we  saw   median  improvements   of  7%  on  Cable  and   15%  on  DSL  …”   Loading…  
  32. 32. ©2013 AkamaiFaster ForwardTM JPEG Baseline vs. Progressive Baseline   Progressive   h"p://www.bookofspeed.com/chapter5.html     1   2   0   0   1   0   0   0   3   -­‐1   0   0   1   2   0   0   1   0   0   0   3   -­‐1   0   0   1   1   3   2   0   -­‐1   0   0   0   0   0   0   1   1   3   2   0   -­‐1   EOB   Mo’  zeros,  Mo’  compression  
  33. 33. ©2013 AkamaiFaster ForwardTM Baseline vs Progressive – File Size Baseline  –  Progressive  Size  for  100,000  JPEGs   Stoyan  Stefanov:     Images  of  size  10K+   likely  smaller  as   Progressive.     Median  delta  is  3%,   Up  to  10%  common,   250KB  gap  extreme.  
  34. 34. ©2013 AkamaiFaster ForwardTM Progressive vs Baseline – Current Reality Ann  Robson:   “…  In  a  thousand-­‐image   sample,  92.6%  are   baseline  …”   Patrick  Meenan:  “…  I  crawled  all  7  million  JPEG  images   that  were  served  by  the  top  300k  websites  in  the  May  1st   HTTP  Archive  crawl  and  came  out  with....wait  for  it....  s_ll   only  7%  …”  
  35. 35. ©2013 AkamaiFaster ForwardTM Progressive PNG & GIF -  GIF & PNG Have “Interlacing” modes -  Similar “Progressive” effect -  Fixed at 4 (GIF) or 7 (PNG) interlacing levels -  PNG’s technique, Adam7, a bit more sophisticated -  Progressive PNG/GIF are BIGGER -  Interlacing interferes with compression algorithms -  Files often 20%-30% bigger -  Still benefit from earlier visual -  So consider for bigger images h"p://www.codinghorror.com/blog/   2005/12/progressive-­‐image-­‐rendering.html    
  36. 36. ©2013 AkamaiFaster ForwardTM Lossless JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Consider (and default to) Progressive over Baseline -  Tune Progressive Scan coefficients -  Tools: jpegtran, ImageMagick, jpegrescan
  37. 37. ©2013 AkamaiFaster ForwardTM Retina Images bg_header_retina.png – 56 KB bg_header.png – 14KB 1 2 43 •  Marketing-speak for 2x pixel ratio •  1 CSS pixel = 4 real pixels •  Other ratios are possible (1.5x common) 3X  
  38. 38. ©2013 AkamaiFaster ForwardTM JPEG Retina Trick: Double the Size, Lower Quality -  Retina images are HEAVY (often ~3x file size) -  Regular images are “fuzzy” on Retina -  Alternative: Double image size, Aggressively reduce Quality -  Discovered by Netvlies & Thomas Fuchs, popularized by Filament Group -  Works on 1x-1.5x too -  Maintain HTML size! -  Sharper Image, Smaller File -  Known Downside: Higher Memory Use
  39. 39. ©2013 AkamaiFaster ForwardTM Lossless JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Consider (and default to) Progressive over Baseline -  Tune Progressive Scan coefficients -  Consider Retina Double-Size-Low-Quality Trick -  Tools: jpegtran, ImageMagick, jpegrescan
  40. 40. ©2013 AkamaiFaster ForwardTM Got Through JPEG!
  41. 41. ©2013 AkamaiFaster ForwardTM WebP – Web Picture? -  2 Years Old (2011) -  Pronounced “Weppy” -  Supports Lossless & Lossy Modes -  Very well documented -  See: https://developers.google.com/speed/webp/ -  Related VP8 Google Patents “released” by Google -  Other patents licensed by Patent for global use -  Nokia still claiming related Patents
  42. 42. ©2013 AkamaiFaster ForwardTM WebP vs PNG Google:   Lossless  WebP  26%-­‐34%   Smaller  than  PNG   Yoav  Weiss:   Lossless  WebP  33%-­‐42%   Smaller  than  PNG  
  43. 43. ©2013 AkamaiFaster ForwardTM WebP vs JPEG Google:   Lossy  WebP    25%-­‐   34%  Smaller  than  JPEG   Yoav  Weiss:   Lossy  WebP  37%   Smaller  than  PNG  
  44. 44. ©2013 AkamaiFaster ForwardTM WebP’s Magic Formula Highlights -  Spatial Predictive Encoding -  Choose best next step “guess” -  Arithmetic Entropy Encoder -  Better than Huffman Code -  Adaptive Block Quantization -  Per-region quality setting
  45. 45. ©2013 AkamaiFaster ForwardTM WebP’s Magic Formula Highlights -  Spatial Predictive Encoding -  Choose best next step “guess” -  Arithmetic Entropy Encoder -  Better than Huffman Code -  Adaptive Block Quantization -  Per-region quality setting -  Color Cache Coding -  Update color palette over time -  Optimization built into encoder
  46. 46. ©2013 AkamaiFaster ForwardTM WebP Encode/Decode Times
  47. 47. ©2013 AkamaiFaster ForwardTM WebP – Impressed Yet? -  26% - 42% Smaller than PNG -  25% - 37% Smaller than JPEG -  Supports Alpha Transparency -  Supports Animation! -  Why did waste time talking about the other formats?!
  48. 48. ©2013 AkamaiFaster ForwardTM VERY Limited Browser Support Supported by: -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+ ~26% WebP Client Support (35% by some numbers) Ilya  Grigorik:   Deploying  new  image   formats  on  the  Web  is   HARD  (but  doable)  
  49. 49. ©2013 AkamaiFaster ForwardTM JPEGXR vs WebP -  4 Years Old (2009) -  JPEG eXtended Range -  JPEG XR / JXR -  ~Matches WebP sizes -  Support: IE 9+ -  Including Windows Phone 8 -  Patented by Microsoft -  Under “Open Spec Promise” -  Jxrlib has BSD License
  50. 50. ©2013 AkamaiFaster ForwardTM WebP + JPEG XR Coverage Supported by: -  IE 9+ -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+ WebP –or– JPEG XR Supported on ~ 50% of clients Chrome,   19.5   Android   Webkit,  5.4   Opera  Mini,  1   Chrome   Mobile,  0.7   Opera,  0.3   IE  9,  13.2   IE  8,  10.2   IE  10,  9.7   IE  7,   6.2   Other,  0.9   IE,  40.2  
  51. 51. ©2013 AkamaiFaster ForwardTM Image Format support is complicated… http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
  52. 52. ©2013 AkamaiFaster ForwardTM When to use which format? -  For tiny images (e.g. 1x1 pixel) use GIF -  PNG-8 practically always smaller -  For most small images, use PNG -  Where possible, prefer JPEG to PNG -  Use WebP/JPEGXR where possible -  Serve only to supporting clients -  For Animation, use GIF -  Always optimize your images
  53. 53. ©2013 AkamaiFaster ForwardTM OPTIMIZING IMAGE DELIVERY
  54. 54. ©2013 AkamaiFaster ForwardTM Delivering Static Files – Basics •  Use a cookieless domain •  Usually requires new top level domain •  Cache images with a CDN •  Ideally, use Akamai ;) •  Leverage browser cache •  Cache long term •  Use Versioning 100ms  
  55. 55. ©2013 AkamaiFaster ForwardTM To Shard or not to Shard? h"p://worlddomina2onsummit.com/   5.5s:  Start   Images   Download   17s:  End     Images   Download   -­‐  11.5  secs,  ~750  images,  1.8  MB   -­‐  Most  of  the  2me  “Green”  (TTFB)   -­‐  Queued  across  6  connec2ons  
  56. 56. ©2013 AkamaiFaster ForwardTM Domain Sharding -  Split images across domain “aliases” (1.foo.com, 2.foo.com…) -  Tricks browser into opening more connections -  Cons: DNS queries, can cause network congestion, router overload risk, hinders SPDY/HTTP2…
  57. 57. ©2013 AkamaiFaster ForwardTM To Shard or not to Shard? 89   Parallel   Reqs  h"p://wn.com/   -­‐  10  Shards   -­‐  8  seconds  to  download  top  22KB  image  
  58. 58. ©2013 AkamaiFaster ForwardTM To Shard or not to Shard? -  It Depends… On your site. -  Excessive Sharding is bad -  You NEVER need 10 shards -  No Sharding is often bad -  Plus hinders “cookieless domain” optimization -  Good default is 2 shards -  Measure your own site -  Keep Bandwidth Contention in mind
  59. 59. ©2013 AkamaiFaster ForwardTM Delivering WebP -  To Deliver WebP, we must detect WebP Support Ilya  Grigorik:   Please  go  ahead!   Me:   Ilya,  can  I  shamelessly   reuse  your  Google  I/O   WebP  Slides?  
  60. 60. Client-side detection •  Use modernizr, or use the 1 line WebP detect function...              <script  src="modernizr.min.js"></script>                  <script>                    if  (Modernizr.webp)  {                        var  webpImg  =  document.createElement("img");   webpImg.setAttribute('src',  '/awesome.webp');   webpImg.setAttribute('alt',  'na');   document.body.appendChild(webpImg);                      }  else  {                        //  Fallback  to  non-­‐webp,  or  load  a  JS  decoder:                          //  webpjs-­‐0.0.2.min.js  /  webpjs-­‐0.0.2.swf                      }                </script>   + Bullet proof, custom URLs for .webp files (cache friendly), easy fallback for all clients - Must wait for JS execution to schedule image downloads http://webpjs.appspot.com/
  61. 61. Server-side User-Agent detection Serve different HTML based on User-Agent header <html>    ...    <img  src="awesome.webp">    ...   <html>   <html>    ...    <img  src="awesome.jpg">    ...   <html>   Cache-­‐Control:  private   Or inject a polyfill library! Deploying new image formats on the web + No extra latency overhead, automated by the server - Returned HTML should be marked with "Cache-Control: private"
  62. 62. Dealing with interoperability ... •  Link sharing: send a link to a .webp image to a friend running IE ... sad face. •  Save As: save .webp file locally; no way to open it? o  Fixed: Chrome is now a file handler for .webp! o  Provide an explicit 'Download' option, and link to JPEG / PNG. http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/
  63. 63. Client-Server Accept negotiation Serve different Image based on Accept header... Deploying WebP via Accept negotiation Accept:  image/webp   Accept:  image/png   + No extra latency overhead + Fully transparent to your existing application! Only works on Opera… (today) UA Detection on Images also valid
  64. 64. ©2013 AkamaiFaster ForwardTM WebP Delivery & Akamai Define  paths  that  may   return  WebP  Images   Accept  Header  Nego2a2on   (UA  Matching  Just  as  Easy)   (Near)  Future:  Use  Device  Characteris2c   Changes  path  to  /webp/images/…   (also  updates  cache  key)   Mark  downstream  cache     as  private  
  65. 65. ©2013 AkamaiFaster ForwardTM OPTIMIZING IMAGE LOADING ORDER
  66. 66. ©2013 AkamaiFaster ForwardTM Lazy Loading Images •  Most Images are “below the fold” •  Below-the-fold images: •  Must Delay Onload •  May delay higher images •  Bandwidth Contention •  May block higher images •  Connection Contention •  Likely not seen by most users
  67. 67. ©2013 AkamaiFaster ForwardTM Loading Images with Scripts – Core Concept Warning: Over Simplified!!! Full Example Here -­‐  Manual:   -­‐  DIY   -­‐  jQuery  Plugin   -­‐  WP  Plugin   -­‐  None  are  great   -­‐  Func2onal,  not  fast   -­‐  Automated:   -­‐  Akamai  FEO   -­‐  PageSpeed   -­‐  …   Based  on  Y  axis,   somewhat  tricky  
  68. 68. ©2013 AkamaiFaster ForwardTM Speculative Parsing & Scripted Image Loader -  Speculative Parser doesn’t “see” the image -  Image tag only created when script actually executes -  Implication #1: No predictive DNS prefetch & TCP connects -  Implication #2: No early download -  On most websites, images are blocked by CSS & Scripts anyway -  Implication #3: In SPDY case, no early request -  When SPDY is used, images are far less likely to be blocked -  My Experience: Still worth doing -  Costs are low compared to gains
  69. 69. ©2013 AkamaiFaster ForwardTM Low Quality Image Placeholders - LQIP -  Load low quality images first -  Smaller, e.g. 20KB/img -  Wait for page to complete loading -  Load high quality image -  Bigger, e.g. 80KB/img -  Doesn’t delay anything 20KB   80KB  
  70. 70. ©2013 AkamaiFaster ForwardTM LQIP Pros & Cons -  Pros -  Smaller images loaded quickly, page more visually complete & usable -  Images seen and optimized by speculative parser -  Can control if/when to download higher quality images -  Cons -  Page downloads more bytes overall -  Lower quality image loaded -  Can be combined with Lazy Loading -  Spares initial downloading of below-the-fold images
  71. 71. ©2013 AkamaiFaster ForwardTM Proposal: IMG defer/lazy -  Format: <img src=“a.jpg” defer> (or “lazy”) -  Images with “defer”: -  Must not be downloaded if hidden (display:none) -  Must not delay the load event -  Must download if they’re in the page and not hidden -  Implied: May be deferred to onload or loaded on demand -  Note: To determine if hidden, parsers need to wait for CSS -  Means speculative parsing is more limited -  Details still tbd… -  “Waiting for implementor interest”
  72. 72. ©2013 AkamaiFaster ForwardTM RESPONSIVE IMAGES
  73. 73. ©2013 AkamaiFaster ForwardTM Download and Shrink Smaller Screen, Same Size Image h"p://img.2meinc.net/2me/daily/ 2013/1305/485_nat_oklahoma_recovery_0523.jpg  
  74. 74. ©2013 AkamaiFaster ForwardTM Responsive Images – Is It Worth it? 128px,     2.9  KB  240px,  6.8  KB   320px,  10.6  KB   480px,  21.3  KB   Full  Res,  50.1  KB   Site:   lonelyplanet.com   Device:   iPhone  4   Before:     867  KB   Acer:     570  KB  
  75. 75. ©2013 AkamaiFaster ForwardTM Simply serve small images to mobile?
  76. 76. ©2013 AkamaiFaster ForwardTM Responsive Images over 471 Websites Tim  Kadlec:     Why  do  we  need  Responsive  Images?     72%  less  image  weight  
  77. 77. ©2013 AkamaiFaster ForwardTM Retina Fun ipad_hero.jpg 113 KB Served to iPad 2 ipad_hero_2x.jpg 360 KB Served to iPad 3 Mozilla/5.0  (iPad;  CPU  OS  6_0  like  Mac  OS  X)  AppleWebKit/536.26   (KHTML,  like  Gecko)  Version/6.0  Mobile/10A5355d  Safari/8536.25  
  78. 78. ©2013 AkamaiFaster ForwardTM Responsive Web Design (RWD) One  URL,  Adapt  to  screen  size  
  79. 79. ©2013 AkamaiFaster ForwardTM Option #1: Script Loader of Responsive Images Warning: Over Simplified!!! Full Details Here Pros:   -­‐  Flexible   -­‐  Can  mix  with  lazy  loading     Cons:   -­‐  Hinders  pre-­‐parser   -­‐  May  be  slow  to  load     Combine  with  LQIP?   -­‐  Always  load  low  res   -­‐  Lazy-­‐load  high  res   +  “?”  +  window.innerWidth  
  80. 80. ©2013 AkamaiFaster ForwardTM Option #2: Use CSS for Images Pros:   -­‐  No  need  for  JavaScript   -­‐  Non-­‐MQ  browsers  load   “default”  image  (IE8…)   Cons:   -­‐  Verbose   -­‐  Verbose-­‐er  with  Re2na   -­‐  Not  equal  to  <img>   Warning: Over Simplified!!! Full Details Here Tim  Kadlec:     This  technique  will  double-­‐download  on  Android.   There  are  beher  (carefully  craced)  CSS/HTML  structures.  
  81. 81. ©2013 AkamaiFaster ForwardTM Option #3: Use SVG Pros: -  Rich Vector Graphics Format -  Always “perfectly” painted -  Supports media queries! Cons: -  Textual, no “smart” compression -  Can be gzipped, but often bigger -  Not supported by older browsers -  IE 8 & older, Android 2.3 & older
  82. 82. ©2013 AkamaiFaster ForwardTM Standardizing Responsive Images @srcset <picture> h"ps://github.com/sco"jehl/picturefill  
  83. 83. ©2013 AkamaiFaster ForwardTM Stay Up To Date: http://responsiveimages.org/
  84. 84. ©2013 AkamaiFaster ForwardTM SUMMARY
  85. 85. ©2013 AkamaiFaster ForwardTM Summary -  Images are not as simple as they seem… -  Optimizing images is worth your while! -  Choose the right image format and optimize your images -  Optimize Image Delivery (CDN, caching, sharding…) -  Leverage WebP/JPEG-XR, but do so with care -  Use LQIP and/or lazy loading of images -  Use Responsive Images -  Sit back and reap the rewards…
  86. 86. ©2013 AkamaiFaster ForwardTM A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Thank  You!     Ques2ons?  
  • XiaokangXin

    Feb. 11, 2019
  • tyamadajp

    Sep. 28, 2016
  • GustavoCarvalho6

    Sep. 22, 2015
  • dop3

    Jun. 15, 2015
  • LuisCalvo6

    Sep. 8, 2014
  • christianhaller

    Aug. 25, 2014
  • andersonsandrade

    Jan. 26, 2014
  • fuckyouslid3shareonemoretime

    Nov. 8, 2013
  • acmakhoa1

    Oct. 6, 2013
  • AndyZcz

    Oct. 1, 2013
  • BargaoRobalo

    Sep. 13, 2013
  • DragonI

    Aug. 29, 2013
  • coty

    Jul. 26, 2013
  • TakashiTsuchiya

    Jul. 25, 2013
  • leloutre

    Jul. 22, 2013
  • iainc

    Jul. 12, 2013
  • stream7

    Jul. 12, 2013
  • jihoonc

    Jul. 5, 2013
  • mtdsousa

    Jul. 1, 2013
  • retolist

    Jul. 1, 2013

Images seem simple - they're static, independent from each other, and don't mess up the DOM. However, images make up 60%-70% of page bytes, and their visual nature makes them critical for user experience. Investing in Image Optimization is a highly worthwhile investment. This presentation covers 4 aspects of Image Optimization: - Optimizing Image formats (including background on GIF, PNG, JPEG, WebP, JPEG XR and more) - Optimizing image delivery - Optimizing image loading in the page - Responsive Images - optimizing images for mobile screens

Views

Total views

19,081

On Slideshare

0

From embeds

0

Number of embeds

985

Actions

Downloads

173

Shares

0

Comments

0

Likes

45

×