O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Image optimization

8.618 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×