Ignite Velocity: Image Weight Loss Clinic

6,291 views
6,193 views

Published on

Click the Notes tab to see what I talked about on each slide. These are slides from my Ignite Velocity talk. "ignite" means 20 slides changing automatically after 15 seconds, total of 5 minutes talk. For slideshare, I've expanded the transitions into slides so the slide count is more than 20.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,291
On SlideShare
0
From Embeds
0
Number of Embeds
2,280
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Let’s talk a little bit about cutting back on that bandwidth bill. Saving some money. And without touching the code. How do we do that?
  • One way is…
  • Images.
  • Ever since the dawn of times people have been using images.
  • Cavemen scraping on their cave walls…
  • and today…
  • Today we have websites.
  • Even some good ones. WithLOLcats.
  • Half of the average web page weight today is images. And most of these images are too fat. They could use a diet and lose some weight but without losing quality, not even a single pixel.
  • So, welcome to the Image Weight Loss Clinic. Our first patient today is… just some random page found on the Internets. What have we got here… Header graphic, speaker photos, logos, rotating banners – the usual stuff.
  • First problem - there are some GIFs.
  • We shouldn’t be using GIFs.
  • PNG is the format for graphics - buttons, icons, and so on. The palette type of PNG, also known as PNG8 is good as a GIF and actually better. And PNG filesizes are smaller. Well, except for really tiny GIFs, but let’s ignore these, they don’t matter much.
  • You should convert all your GIFs to PNG8. There’s a number of tools to do this in a batch. You can use ImageMagick for example. “Instant results or your money back”. Especially since ImageMagick is free.
  • For your JPEG photos, use JPEGTran. It’s free, cross-platform, command-line tool, easy to script. And it’s lossless, you keep the photo quality. If you run it without setting any options, that’s good enough. Run with the –optimize and you’ll get even better results.
  • Option –progressive makes JPEGs that render in the browser from low resolution to high, as opposed to top-to-bottom. If the JPEG is bigger than 10K (which is most JPEGs), the progressive encoding has a good shot at giving you a smaller image. You can always brute force – run with both options and take the smaller result.
  • Option –copy none strips all comments and meta data - camera model, geo location, everything. If you own the image, strip the meta data. You’ll be surprised how much bloat is in there. If you don’t own the image, check with the owner. Option –copy all keeps all meta data.
  • Next – PNG.
  • . There’s a lot of options to optimize PNGs - all lossless and scriptable on the command line. Some even have nice graphical UIs built on top of them, you know, for our command-line-challenged friends.
  • There’s even browser-based UIs, built on top of some of the tools. For example, smush.it, which is now part of YSlow runs PNGcrush. Google’s Page Speed runs OptiPNG.
  • With so many PNG tools, how do you decide which one to pick? They are all good tools and they do their best, so if you’re in a hurry, just pick one and go with it, script it. You’ll be pleasantly surprised by the outcome.
  • Now if you’re serious about PNG weight loss, you can run all the tools you can lay your hands on. Run the next tool on the result of the previous, try with their different options switches. They all do different things, and results may vary from one image to the next. Run them all in sequence and get an even smaller file at the end.
  • Or, if you’re hardcore – run PNGSlim. PNGSlim is actually a Windows batch file that runs most of the other tools. It’s very slow, it can take hours to go through a handful of files. But at the end, it will give you the leanest, most optimized PiNG.
  • Let’s see some results. That page has a total page weight of over 800K, including scripts, styles, everything. Over 80% of the weight is images. And what happens after optimization?
  • We can strip quite a bit, over 200K of unnecessary image information. 200K, that’s over 30% if the image weight. The page looks exactly the same, pixel by pixel. There was no manual work involved, just running some tools. I think 30% is pretty impressive.
  • To summarize, don’t use GIFs, run JPEGtran on your photos, and for the graphics - any PNG or all PNG tools.
  • So the tools are available out there, now all you need is a process that runs the tools before your images go live. Make image optimization part of the push process.
  • These are all lossless operations that don’t require you to look at the images to verify they’re OK. So you can only win! And often you’ll see some amazing and surprising results. Even if you normally do a good job with image sizes, there’s always a few that slip as you race against the deadline. The thing is – setup a process, so you don’t even need to think about it.
  • Thanks very much, everybody! I’m Stoyan from Yahoo! Search. Enjoy Velocity, it’s a great conference!
  • Ignite Velocity: Image Weight Loss Clinic

    1. 1. Image 
 Weight Loss 
 Clinic Stoyan Stefanov
 Yahoo! Search
 Ignite Velocity 2009, San Jose
    2. 2. 5
    3. 3. 4
    4. 4. 3
    5. 5. 2
    6. 6. 1
    7. 7. 50% images
    8. 8. GIF
    9. 9. GIF GIF GIF GIF
    10. 10. GIF GIF GIF GIF GIF
    11. 11. GIF GIF GIF GIF GIF GIF GIF GIF
    12. 12. $ convert in.gif PNG8:out.png
    13. 13. jpegtran
    14. 14. jpegtran -optimize -progressive 10K+
    15. 15. jpegtran -copy none -copy all
    16. 16. PNGOptimizer
    17. 17. PNGOptimizer AdvPNG
    18. 18. DeflOpt PNGOptimizer AdvPNG
    19. 19. DeflOpt PNGOptimizer AdvPNG PNGRewrite
    20. 20. DeflOpt PNGOptimizer PNGCrush AdvPNG PNGRewrite
    21. 21. DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
    22. 22. OptiPNG DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
    23. 23. OptiPNG DeflOpt PNGOut PNGCrush AdvPNG
    24. 24. PNGSlim
    25. 25. Before Image Weight: 694.3 Kb Page Weight: 839.5 Kb
 82% images
    26. 26. After 30.15% savings Image 
 Weight Loss: 209Kb
    27. 27. Summary 30.15% savings *  No GIFs *  JPEGtran *  PNG*
    28. 28. + Tools Process FTW
    29. 29. + Tools Process FTW
    30. 30. Thanks,
 Stoyan
 Yahoo! Search Photo credits:
 http://www.flickr.com/photos/astique/1859573734/in/photostream/
 http://www.flickr.com/photos/73645804@N00/2222523486/ 
 http://dezignerfolio.com
 http://www.flickr.com/photos/81506496@N00/3061563817/
 http://www.flickr.com/photos/85049097@N00/1858630581/
 http://www.flickr.com/photos/7566272@N02/3537213022/
 http://www.flickr.com/photos/vanz/2093902502/
 http://www.flickr.com/photos/84661389@N00/542537185/ 
 http://www.flickr.com/photos/ericskiff/471212653/ 
 http://www.flickr.com/photos/kjarrett/414147790/ 
 http://icanhazcheezburger.com 
 http://www.flickr.com/photos/sophiea/2057656323/in/set-72157602827807236/
 http://www.flickr.com/photos/brighton/2278072114/

    ×