IMAGE OPTIMIZATION PIPELINE
BEFORE AFTER
SERGEY CHERNYSHEV
• Work at truTV/Turner
• Organize NY Meetup
• Developed ShowSlow and a few other tools
@SergeyChe, @PerfPlanet
WHY FASTER?
http://blog.kissmetrics.com/loading-time/
websiteoptimization.com
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
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
WHERE TO AUTOMATE?
• PhotoShop scripting
• CMS hooks
• Version control commit hooks
• Application logic (especially for UGC)
• File system monitors
SMUSHING (lossless compression)
• Removes meta-data
•Preserves quality
• Saves more then you think!
• Kudos to Stoyan & Nicole META-DATA
LOSSY COMPRESSION
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
Increase compression until quality visibly degrades
LOSSY COMPRESSION
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
But it heavily depends on size and content of an image
LOSSY COMPRESSION AUTOMATION
ImgMin
CSS SPRITES
• Games are cool!
• Reduces latency cost
•SpriteMe.org
• Don't overdo it
• We need automation for this!
RESIZE TO SIZE Responsive Design
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
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
LOAD LATER
LOAD LATER
LOAD LATER
<SPAN CLASS="POSTLOAD" DATA-URL="/AWESOME.JPG" DATA-ALT="AWESOME PIC" ></SPAN>
<IMG SRC="/AWESOME.JPG" ALT="AWESOME PIC" />
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?
CACHE FOREVER "POINTLESS 304S"
CACHE FOREVER
Far-future Expires and Cache-Control headers
CACHE FOREVER
Far-future Expires and Cache-Control headers
Finger-print the URL with hash of the content
Recommended
