Techniques for Optimizing Images on the Web
The days of text-only websites without styling or images are mostly gone. An effective website likely uses interesting photos or graphics to inform and inspire visitors. Though many image effects like drop shadows, gradients and shape transforms can be achieved through CSS now, image files are still required in almost all cases.
But adding images makes for a slow, complex website that, if not optimized properly, could mean a drop in visitors – and, in turn, profits.
Why Optimize?
Studies have shown that the longer your website takes to load, the more visitors you will lose. In fact, nearly half of the population will leave a website if it takes three seconds or longer to fully load. Add onto this the popularity of mobile devices, which are usually slower than desktops or laptops, and you have a real need to reduce your page load time.
Optimizing images reduces the file size and helps your website load faster. Luckily, there are several techniques and applications that can make optimization easier.
Stand-alone Applications
ImageOptim
ImageOptim is a free Mac OS X application for compressing images of any type. It’s dead simple to use and relatively quick when resizing multiple images. In fact, the images used in this blog post were batch compressed using ImageOptim.
My fellow developer Tim pointed out there is also an ImageOptim CLI available on GitHub. Simply install it and you can set up an alias to quickly compress a folder of images. Check out the example below:
ImageAlpha
From the creators that brought us ImageOptim, ImageAlpha is a Mac OS X application created specifically for PNG image types. It comes with many options, including friendly IE6 transparency. Like ImageOptim, ImageAlpha is also free.
Shrink O’Matic
Shrink O’Matic is a free Adobe Air application for all systems. It handles batch compression of JPG, PNG and GIF file types.
RIOT
For Windows lovers, there is RIOT. RIOT stands for “Radical Image Optimization Tool” and is compatible with most versions of Windows. RIOT works with JPG, PNG and GIF file types.
JPEG Mini
JPEG Mini is a powerful JPEG optimizer for both Windows and Mac OS X. There is a free trial version available for 30 days. Try out some of the website demos to see how much space can be saved without losing quality.
Web Applications
If a stand-alone application isn’t your thing, give a few of the web applications below a shot.
TinyPNG
TinyPNG is a stand-alone web application that allows compression of PNG images. It’s very effective and also comes with a developer API.
Smush IT
Smush.It is a web application originally developed by Yahoo and kept alive by several developers. It works with most images. There is also a Smush.It-based WordPress plugin.
Compressor.io
Compressor.io is another web application for compressing images. What sets Compressor.io apart is its ability to also compress SVG images, making it great for shrinking logos and other SVG-related images.
Coding and Programming Techniques
If you’re a developer or programmer, there are a few very powerful CLI techniques you can use to compress images. Let’s dig into some command line fun.
ImageMagick
ImageMagick is a command line tool that allows you to edit an image in almost any way imaginable. One of the many features is setting a quality flag when converting an image, which will allow you to strip down the file size. In addition, you can strip the metadata from the image to squeeze out even more file size. Install ImageMagick from the homepage and then give the below code a try on a sample image:
- Strip out any EXIF/Meta data from the image
- Set the quality to 85%, you can and should play with this number to get it where you like it. I’ve found 80-85% works best without noticeable quality loss.
- Set the compression type.
- Set the name of the new image, in this case compressed.jpg.
In many cases, you can get the file size even smaller by setting a very small Gaussian blur on the image. See this StackOverflow comment for more details. This is just the tip of the iceberg when it comes to ImageMagick features. I highly recommend you install it and check out the docs to see what cool ideas you may come up with.
Gifsicle
We’ve talked about JPEGs, PNGs, SVGs and regular GIFs – but what about animated GIFs? There’s a tool for that, too. Gifsicle is another extremely powerful animated GIF CLI tool. Though it can do all kinds of things when it comes to animating GIFs, we’ll focus on how to compress an animated GIF. Install Gifsicle from the website, then try out the code below on an animated image:
The talented developer David Walsh has a blog post up with other compression options that I encourage you to take a look at. Be sure to check out the Gifsicle docs for all of the neat things you can do with this tool.
WordPress
A note about WordPress image optimization: WordPress will automatically try to crush uploaded media images. However, it’s been my experience that the other tools listed can do a much better job than the built-in WordPress optimizer. I recommend you reduce the image size using the above techniques, then upload the image to WordPress. You’ll get maximum compression doing it this way.
By now you have several tools at your disposal to compress and minimize almost any image type. It’s worth the few extra seconds it takes to do so, and will end up saving you money and visitors in the long run.
Do you have any favorite apps or techniques for image optimization? I’d love to hear about them in the comments.
