image optimization pipeline
DESCRIPTION
Images are the one of the oldest items on the web (right after HTML) and still so little has changed since we started to use them. That's if you don't count lots of creative talent that went into creating them, so much in fact that it created the web as we know now, rich, shiny and full of marketing potential. That being said, images on our websites are the largest payload shifted back and forth across the wires of the net taking big part in slowing down pages. Still we can safely assume that we are going to have only more images and they will only grow bigger, along with the screen resolutions on user computers. If you want to stop slowing down your pages and reducing user experience, it's time to take images seriously and implement image processing pipeline within your organization!TRANSCRIPT
![Page 1: Image optimization pipeline](https://reader034.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/1.jpg)
IMAGE OPTIMIZATION PIPELINE
BEFORE AFTER
![Page 2: Image optimization pipeline](https://reader034.vdocuments.site/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.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/3.jpg)
WHY FASTER?
http://blog.kissmetrics.com/loading-time/
![Page 4: Image optimization pipeline](https://reader034.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/4.jpg)
websiteoptimization.com
![Page 5: Image optimization pipeline](https://reader034.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/11.jpg)
LOSSY COMPRESSION AUTOMATION
ImgMin
![Page 12: Image optimization pipeline](https://reader034.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/15.jpg)
LOAD LATER
![Page 16: Image optimization pipeline](https://reader034.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/16.jpg)
LOAD LATER
![Page 17: Image optimization pipeline](https://reader034.vdocuments.site/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.vdocuments.site/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.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/19.jpg)
CACHE FOREVER "POINTLESS 304S"
![Page 20: Image optimization pipeline](https://reader034.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/20.jpg)
CACHE FOREVER
Far-future Expires and Cache-Control headers
![Page 21: Image optimization pipeline](https://reader034.vdocuments.site/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.vdocuments.site/reader034/viewer/2022052523/555849fad8b42a943b8b4697/html5/thumbnails/22.jpg)