Ignite Velocity: Image Weight Loss Clinic

September 2nd, 2009. Tagged: images, performance, speaking

A few months ago I gave a 5 minute Ignite talk at the Velocity conference. (My previous post talks about the Ignite experience.) I thought they recorded the video and wanted to share but seems like it's not happening. So below are the slides from slideshare.

The ignite talk rules are: 20 slides that change automatically after 15 seconds. But I took the liberty of hacking the format a little bit. For one, the 18th (and 19th) slide which was my main point is duplicated. And then I had some transitions, like in the first two slides for example, where different text or pictures change after a timeout. I expanded those transitions for slideshare, so the slide count is 40-something, but at the presentation it was still total of 20 slides in 5 minutes.

If you follow the slides on slideshare, be sure to click the Notes tab which has what I said, more or less, at each slide. The full script is below.

And yes, if you like it, please vote for my South by Southwest panel proposal. It has the same name "Image Weight Loss Clinic" but will be a much longer version of this 5 minute Iginite and what is more - Derek Tonn of graphicsoptimization.com will share the stage with me. Pretty exciting, so cast you votes, leave a comment and help me get to SxSW.

The Script

Here's what I said, more or less:

  1. 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…
  2. Images. Ever since the dawn of times people have been using images. Cavemen scraping on their cave walls… and today… Today we have websites. And LOLcats.
  3. 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.
  4. So, welcome to the Image Weight Loss Clinic. Our first patient today is... some random page found on the Internets. Hmm, what have we got here… Header graphic, speaker photos, logos, rotating banners – the usual stuff.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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?
  16. 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.
  17. To summarize, don’t use GIFs, run JPEGtran on your photos, and for the graphics - any PNG or all PNG tools.
  18. 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.
  19. 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.
  20. Thanks very much, everybody! I’m Stoyan from Yahoo! Search. Enjoy Velocity, it's a great conference!

Tell your friends about this post: Facebook, Twitter, Google+

32 Responses

  1. Too bad about the video not being put up – would’ve liked to see this version of the talk.

    Here’s hoping this panel gets approved for SXSW. Definitely one of the talks near the top of my list for next years conference.

  2. Yes, it is really important to retain the sizes of web pages as low as possible. Now Google takes this factor in ranking search results.

  3. Great article on lowering our bandwidth usage. I will definitely be using your advise on my web pages.

  4. great slideshow, I am going to try one of the png tools you recommend with my websites…thanks for the post

  5. Even though I’ve worked on the internet and with webpages for a couple of year I’d never heard of JPEGTran. Thanks for the great information and hope the conference went well.

  6. I just located your site, I bookmarked it and i ‘m looking at the blogposts. I undoubtedly enjoy it. Helpful subject in any event you actually look on it. I come by way of this mindset that will view comments as akin of tuning in.

  7. fantastic script and tips. Ill implement this on my sites in order to greatly lower my bandwidth.

  8. Thank you for your article. But please consider an article about “fastest way to lose weight”. It’s an article that must be writen, so hopefully I’ll read something about it here in your blog.

  9. Good article thanks

  10. As a webmaster I am always looking for ways to do things better and to save my clients bandwidth, this is something that I need to see if I can implement. Thanks

  11. Yeah, I have the same situation as Dan above here. As a person who deals with businesses and builds websites its good to always keep it fresh and improving. Thanks for the tips!

  12. Thanks for posting – Great article on lowering our bandwidth usage. I will definitely be using your advise on my site. Cheers, James.

  13. Pretty nice post. I just stumbled upon your weblog and wished to mention that I’ve really loved browsing your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!

  14. Nice post. I was watching continuously this site and I’m impressed! Extremely useful info especially the last part I care for such info much. I was looking for this particular information for a long time. Thank you and best of luck.

  15. I am unable to beleive just how much dedication you set in to this particular ! inventive could be the only way to begin with to explain this particular. Continue the truly great work !wonderslim shakes

  16. Wow that was strange. I just wrote an really long comment but after
    I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again.
    Anyway, just wanted to say superb blog!

  17. Really when someone doesn’t know after that its up to other people that they will help, so here it occurs.

  18. Well worded. My thanks for posting this. I will come to this site to see what’s new and recommend my people about your website.

  19. I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it
    much more enjoyable for me to come here and visit more often.
    Did you hire out a designer to create your theme? Outstanding work!

  20. Yes! Finally someone writes about doctor cohen diet.

  21. Very soon this site will be famous among all blogging and site-building
    visitors, due to it’s good posts

  22. Pretty! This has been an extremely wonderful article.
    Many thanks for providing this information.

  23. Every weekend i used to go to see this web site, as i want
    enjoyment, since this this web site conations really fastidious funny data too.

  24. Great weblog right here!Additionally your web site so much up very
    fast! What host are you the usage of? Can I get your affiliate link in your host?
    I wish my site loaded up as quickly as yours lol

  25. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your site?

    My blog is in the exact same niche as yours and my visitors would genuinely benefit from
    some of the information you provide here. Please let me know if this alright with
    you. Appreciate it!

  26. What’s up, I read your blog regularly. Your writing style is awesome,
    keep up the good work!

  27. Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your website?
    My website is in the very same area of interest as yours and my visitors would truly benefit
    from a lot of the information you present here.
    Please let me know if this ok with you. Regards!

  28. Write more, thats all I have to say. Literally, it seeems as though yyou relied on the vijdeo to make your point.

    You clearly know what youre talking about, why throw away your intelligence
    on just posting videos to your site when you could be giving us something informative to read?

  29. This is very interesting, You are a very skilled blogger.
    I’ve joined your rss feed and look forward to seeking more of your wonderful post.
    Also, I have shared your website in my social networks!

  30. Awesome blog! Do you have any hints for aspiring writers?
    I’m planning to start my own blog soon but I’m a little lost on
    everything. Would you recommend starting with a free platform
    like WordPress or go for a paid option? There are so
    many options out there that I’m completely overwhelmed ..
    Any ideas? Bless you!

  31. Great weblog here! Additionally your web site quite a bit
    up very fast! Whatt web host are you the usage of?

    Can I get your affiliate hyperlink for your host? I want my web site loaded up as fast as yours lol

  32. Your method of explaining ɑll in thiѕ piece oof writing іs trulƴ nice,
    all bе ble to effortlessly Ьe aware of іt, Thanks a lot.

Leave a Reply