• Like
  • Save
A Picture Costs A Thousand Words
Upcoming SlideShare
Loading in...5
×
 

A Picture Costs A Thousand Words

on

  • 13,595 views

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

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

Statistics

Views

Total Views
13,595
Views on SlideShare
12,755
Embed Views
840

Actions

Likes
39
Downloads
139
Comments
3

20 Embeds 840

http://candidosalesg.wordpress.com 467
https://twitter.com 200
http://candidosg.me 67
http://lanyrd.com 28
http://tweetedtimes.com 15
http://flavors.me 13
http://eventifier.co 9
http://54.232.139.74 9
http://54.232.88.253 7
http://ec2-54-232-139-74.sa-east-1.compute.amazonaws.com 5
https://candidosalesg.wordpress.com 4
http://t.co 4
http://moderation.local 4
http://www.universomantra.com.br 2
http://www.instacurate.com 1
http://cloud.feedly.com 1
http://pinterest.com 1
http://localhost 1
https://web.tweetdeck.com 1
http://gazeta.yandex.ru 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • http://fiverr.com/mcyrus/do-12-article-submission-service
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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 ;)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A Picture Costs A Thousand Words A Picture Costs A Thousand Words Presentation Transcript

    • ©2013 AkamaiFaster ForwardTMA PICTURE COSTS A THOUSAND WORDSGuy Podjarny (@guypod)CTO, Web Experience, Akamai
    • ©2013 AkamaiFaster ForwardTMYOU HAVE AN IMAGE PROBLEM
    • ©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
    • ©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
    • ©2013 AkamaiFaster ForwardTMImages make up 61% of Page Bytesh"p://h"parchive.org/interes2ng.php#bytesperpage    
    • ©2013 AkamaiFaster ForwardTMImages make up 69% of Page Bytes on Mobileh"p://mobile.h"parchive.org/interes2ng.php#bytesperpage    
    • ©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    
    • ©2013 AkamaiFaster ForwardTMWhat is there to optimize with images?-  Optimizing image formats-  Optimizing image delivery-  Optimizing image loading process-  Optimizing images for mobile
    • ©2013 AkamaiFaster ForwardTMOPTIMIZING IMAGE FORMATS
    • ©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
    • ©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
    • ©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  
    • ©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
    • ©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
    • ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks
    • ©2013 AkamaiFaster ForwardTMJPEG Compression - Simplified1.  Divide image into 8x8 pixel blocks2.  Split Luminance & ChrominanceY   Cb   Cr  
    • ©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  
    • ©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)  
    • ©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  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=90:  105  KB  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=75:  53  KB  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=40:  30  KB  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=20:  18  KB  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=10:  11  KB  
    • ©2013 AkamaiFaster ForwardTMOriginal  PNG:  574  KB   JPEG,  Q=5:  7  KB  
    • ©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  
    • ©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  
    • ©2013 AkamaiFaster ForwardTMJPEG Metadata120KB  Thumbnail  
    • ©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
    • ©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  
    • ©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…  
    • ©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  
    • ©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.  
    • ©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%  …”  
    • ©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    
    • ©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
    • ©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  
    • ©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
    • ©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
    • ©2013 AkamaiFaster ForwardTMGot Through JPEG!
    • ©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
    • ©2013 AkamaiFaster ForwardTMWebP vs PNGGoogle:  Lossless  WebP  26%-­‐34%  Smaller  than  PNG  Yoav  Weiss:  Lossless  WebP  33%-­‐42%  Smaller  than  PNG  
    • ©2013 AkamaiFaster ForwardTMWebP vs JPEGGoogle:  Lossy  WebP    25%-­‐  34%  Smaller  than  JPEG  Yoav  Weiss:  Lossy  WebP  37%  Smaller  than  PNG  
    • ©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
    • ©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
    • ©2013 AkamaiFaster ForwardTMWebP Encode/Decode Times
    • ©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?!
    • ©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)  
    • ©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
    • ©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  
    • ©2013 AkamaiFaster ForwardTMImage Format support is complicated…http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
    • ©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
    • ©2013 AkamaiFaster ForwardTMOPTIMIZING IMAGE DELIVERY
    • ©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  
    • ©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  
    • ©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…
    • ©2013 AkamaiFaster ForwardTMTo Shard or not to Shard?89  Parallel  Reqs  h"p://wn.com/  -­‐  10  Shards  -­‐  8  seconds  to  download  top  22KB  image  
    • ©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
    • ©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?  
    • 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/
    • 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"
    • 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/
    • 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
    • ©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  
    • ©2013 AkamaiFaster ForwardTMOPTIMIZING IMAGE LOADING ORDER
    • ©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
    • ©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  
    • ©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
    • ©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  
    • ©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
    • ©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”
    • ©2013 AkamaiFaster ForwardTMRESPONSIVE IMAGES
    • ©2013 AkamaiFaster ForwardTMDownload and ShrinkSmaller Screen,Same Size Imageh"p://img.2meinc.net/2me/daily/2013/1305/485_nat_oklahoma_recovery_0523.jpg  
    • ©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  
    • ©2013 AkamaiFaster ForwardTMSimply serve small images to mobile?
    • ©2013 AkamaiFaster ForwardTMResponsive Images over 471 WebsitesTim  Kadlec:    Why  do  we  need  Responsive  Images?    72%  less  image  weight  
    • ©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  
    • ©2013 AkamaiFaster ForwardTMResponsive Web Design (RWD)One  URL,  Adapt  to  screen  size  
    • ©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  
    • ©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.  
    • ©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
    • ©2013 AkamaiFaster ForwardTMStandardizing Responsive Images@srcset<picture>h"ps://github.com/sco"jehl/picturefill  
    • ©2013 AkamaiFaster ForwardTMStay Up To Date: http://responsiveimages.org/
    • ©2013 AkamaiFaster ForwardTMSUMMARY
    • ©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…
    • ©2013 AkamaiFaster ForwardTMA PICTURE COSTS A THOUSAND WORDSGuy Podjarny (@guypod)CTO, Web Experience, AkamaiThank  You!    Ques2ons?