Image Optimization @patmeenan http:// blog.patrickmeenan.com
Image optimization
Jan 15, 2015
Slides from my talk in Google's booth at Velocity 2013 on optimizing image delivery.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Image Optimization
@patmeenanhttp://blog.patrickmeenan.com
http://httparchive.org/interesting.php#bytesperpage
http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Jun+1+2013#bytesTotal&reqTotal
http://httparchive.org/interesting.php#responsesizes
Delay-loading hidden images
http://www.webpagetest.org/video/view.php?id=130614_ff46fedad38ad59b5b21f7f7de69e4a7a5935d44&bare=1
Lazy-load/defer attribute
http://lists.w3.org/Archives/Public/public-web-perf/2013May/0084.html
4 MB
4 MB3 KB Image Data
4 MB3 KB Image Data1.5 KB Thumbnail4 MB of Photoshop Data
http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fsupport-cn.samsung.com%2Fcampaign%2Fmobilephone%2Fgalaxys4%2Fimages%2FsubQQ%2Fme1.jpg
PROGRESSIVE JPEG
10%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
24%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
42%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
68%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
100%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
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
Progressive Speed Index
• 7% Faster on Cable• 15% Faster on DSL
Preserving copyright
exiftool -tagsfromfile src.jpg -copyright dst.jpg
• Deliver visible images first• Make the files as small as possible• Progressively deliver what’s left
Related Documents
