Image optimization pipeline
-
Upload
sergey-chernyshev -
Category
Technology
-
view
3.846 -
download
1
description
Transcript of Image optimization pipeline
![Page 1: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/1.jpg)
IMAGE OPTIMIZATION PIPELINE
BEFORE AFTER
![Page 2: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/2.jpg)
SERGEY CHERNYSHEV
• Work at truTV/Turner
• Organize NY Meetup
• Developed ShowSlow and a few other tools
@SergeyChe, @PerfPlanet
![Page 3: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/3.jpg)
WHY FASTER?
http://blog.kissmetrics.com/loading-time/
![Page 4: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/4.jpg)
websiteoptimization.com
![Page 5: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/5.jpg)
WHY IMAGES?
• Largest Payload (63%)
• Grew 21% in size in 2011
• Main connection blocker
• The visual indicator
• We will only get more of them
598K
![Page 6: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/6.jpg)
AUTOMATE• Extra step in photo editor's workflow
• Not obvious to photo editors, they shouldn't care
• User Generated Content can't be manually processed
![Page 7: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/7.jpg)
WHERE TO AUTOMATE?
• PhotoShop scripting
• CMS hooks
• Version control commit hooks
• Application logic (especially for UGC)
• File system monitors
![Page 8: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/8.jpg)
SMUSHING (lossless compression)
• Removes meta-data
•Preserves quality
• Saves more then you think!
• Kudos to Stoyan & Nicole META-DATA
![Page 9: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/9.jpg)
LOSSY COMPRESSION
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
Increase compression until quality visibly degrades
![Page 10: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/10.jpg)
LOSSY COMPRESSION
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
But it heavily depends on size and content of an image
![Page 11: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/11.jpg)
LOSSY COMPRESSION AUTOMATION
ImgMin
![Page 12: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/12.jpg)
CSS SPRITES
• Games are cool!
• Reduces latency cost
•SpriteMe.org
• Don't overdo it
• We need automation for this!
![Page 13: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/13.jpg)
RESIZE TO SIZE Responsive Design
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
![Page 14: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/14.jpg)
RESIZE TO SIZE
• Thumbnails!
•Never resize in the browser
• Create a map of sizes for each image type
• Changing proportions is hard
• Do not resize on the fly
Preserving Proportions
Changing Proportions
![Page 15: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/15.jpg)
LOAD LATER
![Page 16: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/16.jpg)
LOAD LATER
![Page 17: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/17.jpg)
LOAD LATER
<SPAN CLASS="POSTLOAD" DATA-URL="/AWESOME.JPG" DATA-ALT="AWESOME PIC" ></SPAN>
<IMG SRC="/AWESOME.JPG" ALT="AWESOME PIC" />
![Page 18: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/18.jpg)
REWRITE URLS
• Enabling/disabling and moving CDNs (including SSL)
• Domain sharding
• Different setups in DEV/QA/PROD
<IMG SRC="<?=U('/AWESOME.JPG') ?>" ALT="AWESOME PIC" />
•Caching forever
• Data URIs?
![Page 19: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/19.jpg)
CACHE FOREVER "POINTLESS 304S"
![Page 20: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/20.jpg)
CACHE FOREVER
Far-future Expires and Cache-Control headers
![Page 21: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/21.jpg)
CACHE FOREVER
Far-future Expires and Cache-Control headers
Finger-print the URL with hash of the content
![Page 22: Image optimization pipeline](https://reader034.fdocuments.us/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/22.jpg)