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