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!

1. BEFORE AFTER
IMAGE OPTIMIZATION PIPELINE

2. SERGEY CHERNYSHEV
• Work at truTV/Turner
• Organize NY Meetup
• Developed ShowSlow and a few
other tools
@SergeyChe, @PerfPlanet

3. WHY FASTER?
http://blog.kissmetrics.com/loading-time/

4. websiteoptimization.com

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. 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

7. WHERE TO AUTOMATE?
• PhotoShop scripting
• CMS hooks
• Version control commit hooks
• Application logic (especially for UGC)
• File system monitors

8. SMUSHING
(lossless compression)
• Removes meta-data
• Preserves quality
• Saves more then you think!
• Kudos to Stoyan & Nicole META-DATA

9. LOSSY COMPRESSION
Increase compression until
quality visibly degrades
100% 90% 80% 70% 60%
50% 40% 30% 20% 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. LOSSY COMPRESSION
AUTOMATION
ImgMin

12. CSS SPRITES
• Games are cool!
• Reduces latency cost
• SpriteMe.org
• Don't overdo it
• We need automation for this!

13. RESIZE TO SIZE
Responsive Design
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/

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. LOAD LATER

16. LOAD LATER

17. LOAD LATER
<SPAN
CLASS="POSTLOAD"
DATA-URL="/AWESOME.JPG"
DATA-ALT="AWESOME PIC"
></SPAN>
<IMG
SRC="/AWESOME.JPG"
ALT="AWESOME PIC"
/>

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. CACHE FOREVER
"POINTLESS 304S"

20. CACHE FOREVER
Far-future Expires and Cache-Control headers

21. CACHE FOREVER
Far-future Expires and Cache-Control headers
Finger-print the URL with hash of the content

23. THANK YOU!
@SergeyChe
@PerfPlanet
Sergey.Chernyshev@turner.com