Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Image optimization

8.611 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×