Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Image optimization

8.616 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×