Average web page size is now ~1.5MB – MOST of it is images (source: http://t.co/zefuad9cS5). Compress and prescale where possible, folks.
— Addy Osmani (@addyosmani) September 2, 2013
One easy thing that I notice sites don’t optimize are their images. I often see large images that are uploaded into a CMS or other page and just sized down. Most often though, sites don’t optimize their images.
Here’s an example. I took a screenshot on my Mac of the network load of this website (under 300k, not bad.) Here’s the screenshot:
At full size, the original size of that file was 338k. I ran it through one of the methods I’ll write about in this post, ImageOptim, and it was able to cut the file size by 38%, down to 208k.
Here are five online and offline tools you can use to optimize your images quickly and easily.
JPEGMini is some sort of black magic, I think. It managed to take JPEGs, and JPEGs only, even those saved using Photoshop’s Save for Web and get considerable size savings out of them, with little to no image degradation. You can do all the optimizing via the web with no login required, but the downside is you can only do 1 image at a time. A free login allows you to upload multiple images at once for processing.
Here’s a photo I took when I was on vacation in England and Wales in February. It’s 2.4MB. JPEGMini was able to get it down to 742k, reducing it by 3.2x. Here’s the reduced, full-size photo for comparison.
If you’re a Mac user, you should definitely grab ImageOptim. It handles all types of images and gives power users control over which optimization algorithms to try, how many passes and so on. It uses all the best: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. These are the types of options you’d normally see in a command-line based tool. I like the fact it adds a menu item so you can right click on any image on your Mac and select Services ->Image Optimize and it will launch ImageOptim and start working on the image right away.
TinyPNG works only on PNG files, hence the name, but it does a great job in reducing file size. It handles transparency just fine, and I’ve given it 24-bit PNG file for better transparency and it’s reduced them to 8-bit, with no bad transparency issues and greatly reduced file size. TinyPNG has also released a plugin for Photoshop to connect to their service.
SpriteMe is a great service that will look at your website and see if any of your images can be made into sprites, and using CSS, pull them in when needed to reduce image size and download times. It will make the sprites for you, along with the CSS needed to implement them. Have lots of little images or social media icons, you should be spriting them. Each one you add removes the need for another http call and a faster site.
Smush.It is built by Yahoo and offers the ability to upload a file or give it a URL for it to optimize. Smush.it can handle many different types of image files, though it has no guarantee of uptime or reliability. I’ve gone to use it a few times and it’s been down or not giving files back. There’s a WordPress plugin, WPSmushIt, that will connect to the service automatically to smush your images down in size. It usually works, but there’s no public API for SmushIt, and Yahoo may decide to block this plugin without warning or notice for using some sort of backdoor code or scraping technique.
At the time of writing this post, Smush.it wasn’t working. YMMV.