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.

A Picture Costs A Thousand Words

18,130 views

Published on

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

Published in: Technology, Art & Photos
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://fiverr.com/mcyrus/do-12-article-submission-service
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for pointing out the flaw, but I'm not sure how I can fix it since the PDF is working... I'll see if there's a way to log a bug with SlideShare.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Awesome talk, Guypo, can't wait for the video ;)

    P.S. Looks like all speech bubbles got text color mangled in SlideShare version (PDF is good) - can't see what they are saying ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

A Picture Costs A Thousand Words

  1. 1. ©2013 AkamaiFaster ForwardTMA PICTURE COSTS A THOUSAND WORDSGuy Podjarny (@guypod)CTO, Web Experience, Akamai
  2. 2. ©2013 AkamaiFaster ForwardTMYOU HAVE AN IMAGE PROBLEM
  3. 3. ©2013 AkamaiFaster ForwardTMThe 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 ForwardTMThe 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 ForwardTMImages make up 61% of Page Bytesh"p://h"parchive.org/interes2ng.php#bytesperpage    
  6. 6. ©2013 AkamaiFaster ForwardTMImages make up 69% of Page Bytes on Mobileh"p://mobile.h"parchive.org/interes2ng.php#bytesperpage    
  7. 7. ©2013 AkamaiFaster ForwardTMImage Bytes grew 19% in past 8 monthsh"p://h"parchive.org/trends.php?s=All&minlabel=Oct+1+2012&maxlabel=May+15+2013#bytesImg&reqImg    
  8. 8. ©2013 AkamaiFaster ForwardTMWhat is there to optimize with images?-  Optimizing image formats-  Optimizing image delivery-  Optimizing image loading process-  Optimizing images for mobile
  9. 9. ©2013 AkamaiFaster ForwardTMOPTIMIZING IMAGE FORMATS
  10. 10. ©2013 AkamaiFaster ForwardTMGIF – 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 ForwardTMPNG – 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 ForwardTMLossless 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 ForwardTMLossless 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 ForwardTMJPEG – 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 ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks
  16. 16. ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks2.  Split Luminance & ChrominanceY   Cb   Cr  
  17. 17. ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks2.  Split Luminance & Chrominance3.  Write pixels as ~delta from average•  and round (DCT + Quantization)Y   Cb   Cr  
  18. 18. ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks2.  Split Luminance & Chrominance3.  Write pixels as ~delta from averageand round (DCT + Quantization)4.  Write as line, compress (Huffman)=  -­‐9,-­‐1,0(x62)  
  19. 19. ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks2.  Split Luminance & Chrominance3.  Write pixels as delta from averageand round (DCT + Quantization)4.  Write as line, compress (Huffman)Q=10   Q=50   Original  
  20. 20. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=90:  105  KB  
  21. 21. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=75:  53  KB  
  22. 22. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=40:  30  KB  
  23. 23. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=20:  18  KB  
  24. 24. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=10:  11  KB  
  25. 25. ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=5:  7  KB  
  26. 26. ©2013 AkamaiFaster ForwardTMLossy Compression – Not for EveryoneGIF,  11  KB  JPEG,  Q=80,  8  KB    JPEG,  Q=30,  4  KB    Average  Color  not  representa2ve  PNG,  7  KB  
  27. 27. ©2013 AkamaiFaster ForwardTMJPEG 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, ImageMagick0  50  100  150  200  250  300  350  0   20   40   60   80   100   120  Quality  vs  File  Size  
  28. 28. ©2013 AkamaiFaster ForwardTMJPEG Metadata120KB  Thumbnail  
  29. 29. ©2013 AkamaiFaster ForwardTMJPEG 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 ForwardTMJPEG Baseline vs. ProgressiveBaseline  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 ForwardTMBaseline vs Progressive – Visual ProgressBaseline  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 ForwardTMJPEG Baseline vs. ProgressiveBaseline  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 ForwardTMBaseline vs Progressive – File SizeBaseline  –  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 ForwardTMProgressive vs Baseline – Current RealityAnn  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 ForwardTMProgressive 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 imagesh"p://www.codinghorror.com/blog/  2005/12/progressive-­‐image-­‐rendering.html    
  36. 36. ©2013 AkamaiFaster ForwardTMLossless 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 ForwardTMRetina Imagesbg_header_retina.png – 56 KBbg_header.png – 14KB1 243•  Marketing-speak for 2x pixel ratio•  1 CSS pixel = 4 real pixels•  Other ratios are possible (1.5x common)3X  
  38. 38. ©2013 AkamaiFaster ForwardTMJPEG 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 ForwardTMLossless 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 ForwardTMGot Through JPEG!
  41. 41. ©2013 AkamaiFaster ForwardTMWebP – 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 ForwardTMWebP vs PNGGoogle:  Lossless  WebP  26%-­‐34%  Smaller  than  PNG  Yoav  Weiss:  Lossless  WebP  33%-­‐42%  Smaller  than  PNG  
  43. 43. ©2013 AkamaiFaster ForwardTMWebP vs JPEGGoogle:  Lossy  WebP    25%-­‐  34%  Smaller  than  JPEG  Yoav  Weiss:  Lossy  WebP  37%  Smaller  than  PNG  
  44. 44. ©2013 AkamaiFaster ForwardTMWebP’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 ForwardTMWebP’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 ForwardTMWebP Encode/Decode Times
  47. 47. ©2013 AkamaiFaster ForwardTMWebP – Impressed Yet?-  26% - 42% Smaller than PNG-  25% - 37% Smaller than JPEG-  Supports Alpha Transparency-  Supports Animation!-  Why did waste time talkingabout the other formats?!
  48. 48. ©2013 AkamaiFaster ForwardTMVERY Limited Browser SupportSupported 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 ForwardTMJPEGXR 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 ForwardTMWebP + JPEG XR CoverageSupported by:-  IE 9+-  Chrome 9+-  Android 4+-  Opera 12+-  Opera Mobile 11.1+WebP –or– JPEG XRSupported on ~ 50%of clientsChrome,  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 ForwardTMImage Format support is complicated…http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
  52. 52. ©2013 AkamaiFaster ForwardTMWhen 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 ForwardTMOPTIMIZING IMAGE DELIVERY
  54. 54. ©2013 AkamaiFaster ForwardTMDelivering 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 Versioning100ms  
  55. 55. ©2013 AkamaiFaster ForwardTMTo 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 ForwardTMDomain 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, routeroverload risk, hinders SPDY/HTTP2…
  57. 57. ©2013 AkamaiFaster ForwardTMTo 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 ForwardTMTo 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 ForwardTMDelivering WebP-  To Deliver WebP, we must detect WebP SupportIlya  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 downloadshttp://webpjs.appspot.com/
  61. 61. Server-side User-Agent detectionServe different HTML based on User-Agent header<html>    ...    <img  src="awesome.webp">    ...  <html>  <html>    ...    <img  src="awesome.jpg">    ...  <html>  Cache-­‐Control:  private  Or inject apolyfill 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 negotiationServe different Image based on Accept header...Deploying WebP via Accept negotiationAccept:  image/webp  Accept:  image/png  + No extra latency overhead+ Fully transparent to your existing application!Only works onOpera…(today)UA Detection onImages also valid
  64. 64. ©2013 AkamaiFaster ForwardTMWebP Delivery & AkamaiDefine  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 ForwardTMOPTIMIZING IMAGE LOADING ORDER
  66. 66. ©2013 AkamaiFaster ForwardTMLazy 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 ForwardTMLoading Images with Scripts – Core ConceptWarning: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 ForwardTMSpeculative 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 ForwardTMLow Quality Image Placeholders - LQIP-  Load low qualityimages first-  Smaller, e.g. 20KB/img-  Wait for page tocomplete loading-  Load high qualityimage-  Bigger, e.g. 80KB/img-  Doesn’t delay anything20KB  80KB  
  70. 70. ©2013 AkamaiFaster ForwardTMLQIP 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 ForwardTMProposal: 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 ForwardTMRESPONSIVE IMAGES
  73. 73. ©2013 AkamaiFaster ForwardTMDownload and ShrinkSmaller Screen,Same Size Imageh"p://img.2meinc.net/2me/daily/2013/1305/485_nat_oklahoma_recovery_0523.jpg  
  74. 74. ©2013 AkamaiFaster ForwardTMResponsive 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 ForwardTMSimply serve small images to mobile?
  76. 76. ©2013 AkamaiFaster ForwardTMResponsive Images over 471 WebsitesTim  Kadlec:    Why  do  we  need  Responsive  Images?    72%  less  image  weight  
  77. 77. ©2013 AkamaiFaster ForwardTMRetina Funipad_hero.jpg113 KBServed to iPad 2ipad_hero_2x.jpg360 KBServed to iPad 3Mozilla/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 ForwardTMResponsive Web Design (RWD)One  URL,  Adapt  to  screen  size  
  79. 79. ©2013 AkamaiFaster ForwardTMOption #1: Script Loader of Responsive ImagesWarning:Over Simplified!!!Full Details HerePros:  -­‐  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 ForwardTMOption #2: Use CSS for ImagesPros:  -­‐  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 HereTim  Kadlec:    This  technique  will  double-­‐download  on  Android.  There  are  beher  (carefully  craced)  CSS/HTML  structures.  
  81. 81. ©2013 AkamaiFaster ForwardTMOption #3: Use SVGPros:-  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 ForwardTMStandardizing Responsive Images@srcset<picture>h"ps://github.com/sco"jehl/picturefill  
  83. 83. ©2013 AkamaiFaster ForwardTMStay Up To Date: http://responsiveimages.org/
  84. 84. ©2013 AkamaiFaster ForwardTMSUMMARY
  85. 85. ©2013 AkamaiFaster ForwardTMSummary-  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 ForwardTMA PICTURE COSTS A THOUSAND WORDSGuy Podjarny (@guypod)CTO, Web Experience, AkamaiThank  You!    Ques2ons?  

×