Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Image optimization

8 610 vues

Publié le

Slides from my talk in Google's booth at Velocity 2013 on optimizing image delivery.

Publié dans : Technologie
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Image optimization

  1. 1. Image Optimization@patmeenanhttp://blog.patrickmeenan.com
  2. 2. http://httparchive.org/interesting.php#bytesperpage
  3. 3. http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Jun+1+2013#bytesTotal&reqTotal
  4. 4. http://httparchive.org/interesting.php#responsesizes
  5. 5. Delay-loading hidden imageshttp://www.webpagetest.org/video/view.php?id=130614_ff46fedad38ad59b5b21f7f7de69e4a7a5935d44&bare=1
  6. 6. Lazy-load/defer attributehttp://lists.w3.org/Archives/Public/public-web-perf/2013May/0084.html
  7. 7. 4 MB
  8. 8. 4 MB3 KB Image Data
  9. 9. 4 MB3 KB Image Data1.5 KB Thumbnail4 MB of Photoshop Datahttp://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fsupport-cn.samsung.com%2Fcampaign%2Fmobilephone%2Fgalaxys4%2Fimages%2FsubQQ%2Fme1.jpg
  10. 10. PROGRESSIVE JPEG
  11. 11. 10%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  12. 12. 24%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  13. 13. 42%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  14. 14. 68%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  15. 15. 100%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  16. 16. Progressive Proxy• WebPagetest Script:addHeader X-Jpeg-Mode: <mode>setDns * 72.66.115.11navigate %URL%• Modes:0 – Passthrough (do not modify images)1 – Progressive (convert all JPEGs to optimized progressive)3 – Baseline (convert all JPEGs to optimized baseline)http://www.webpagetest.org/video/view.php?id=130512_5a93f57cee2beb88a8a595c5f5bf169d71a12945&bare=1
  17. 17. Progressive Speed Index• 7% Faster on Cable• 15% Faster on DSL
  18. 18. Preserving copyrightexiftool -tagsfromfile src.jpg -copyright dst.jpg
  19. 19. • Deliver visible images first• Make the files as small as possible• Progressively deliver what’s left

×