BEFORE     AFTERIMAGE OPTIMIZATION PIPELINE
SERGEY CHERNYSHEV       • Work   at truTV/Turner       • Organize   NY Meetup       • Developed     ShowSlow and a few    ...
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    ...
AUTOMATE• Extra      step in photo editors workflow• Not obvious to photo editors, they shouldnt care• User Generated Conte...
WHERE TO AUTOMATE?• PhotoShop   scripting• CMS    hooks• Version   control commit hooks• Application     logic (especially...
SMUSHING                (lossless compression)• Removes    meta-data• Preserves      quality• Saves   more then you think!...
LOSSY COMPRESSION       Increase compression until       quality visibly degrades 100%      90%    80%    70%        60% 5...
LOSSY COMPRESSION    But it heavily depends on     size and content of an image 100%    90%     80%    70%     60% 50%    ...
LOSSY COMPRESSION  AUTOMATION           ImgMin
CSS SPRITES• Games    are cool!• Reduces   latency cost• SpriteMe.org• Dont   overdo it• We   need automation for this!
RESIZE TO SIZE                Responsive Designhttp://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
RESIZE TO SIZE                                    Preserving Proportions• Thumbnails!• Never    resize in the browser• Cre...
LOAD LATER
LOAD LATER
LOAD LATER<SPAN      CLASS="POSTLOAD"      DATA-URL="/AWESOME.JPG"      DATA-ALT="AWESOME PIC"></SPAN><IMG        SRC="/AW...
REWRITE URLS<IMG              SRC="<?=U(/AWESOME.JPG) ?>"              ALT="AWESOME PIC"/>• Enabling/disabling   and   • C...
CACHE FOREVER"POINTLESS 304S"
CACHE FOREVERFar-future Expires and Cache-Control headers
CACHE FOREVER Far-future Expires and Cache-Control headers                       Finger-print the URL with hash of the con...
THANK YOU!@SergeyChe@PerfPlanetSergey.Chernyshev@turner.com
Image optimization pipeline
Upcoming SlideShare
Loading in...5
×

Image optimization pipeline

4,891

Published on

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!

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,891
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Image optimization pipeline

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

    Clipping is a handy way to collect important slides you want to go back to later.

×