In the past two columns, we’ve been talking about how to get images for your website and which file format to use for each different kind of image. Now we’re going to focus on the most technical aspect: actually optimizing your images for the web. Ideally, you’ll want to work with a professional for this, but we’ve created this quick guide for those times when that just isn’t an option.
Although we’ve seen Internet speeds constantly increase over time, there are still many areas, even in Canada, where Internet speeds are still fairly slow. As well, we’re seeing more and more mobile devices used to access the web, and this trend is only going to increase. Most mobile visitors pay for bandwidth, so you don’t want to overwhelm them with huge images that use up their bandwidth limit and cost them extra money.
Basically, what we’re looking to do when optimizing images is create the highest quality image we can, at the size we need, using the smallest file size we can. In a perfect world, Photoshop is probably the best tool for this, but there are some other options which may work well for you. Although WordPress does contain some tools for optimizing images, they don’t shrink the images as much as possible. We’ve found some online tools which go a long way to helping.
Once you’ve found the image you’d like to use on your site – and determined which format will work best for it – we recommend these two great web tools:
This tool is a great start when optimizing images, and you can upload an image up to 5MB, so you should be able to take images directly from your digital camera into this site. One note: you don’t want to leave it sitting for too long, as your session will expire.
Once you’ve uploaded your image, it will automatically do some resizing to optimize the image. You can see the original photo from my camera (at 1.25MB) has been optimized down to one 400px wide, and only 36KB. You may want to stop here, and simply click the download button to save the image. If you’d like to make more changes, there is an editing panel which will let you change the sharpness of the image, rotate it, make it larger or smaller, alter the colours, etc. I’d suggest making small changes, and click “Apply Changes” between each one to see what it is changing on the image.
Dynamic Drive Online Image Optimizer
This tool is great for looking at the impact of different file types and checking which one makes the sense for each format. One note: you’ll need to start off with a fairly small image, as it only allows uploads up to 300K. You likely want to start with the image you’ve gotten out of the tool above, to see if you can reduce the size further.
1) Upload the image you’d like to optimize for web, and choose the file format you’d like to see it as.
2) Look at all the image variations, comparing the quality of the image and the file size.
3) Select the image with the best quality for the smallest file size. Right-click, and choose “Save Image As” or “Save Picture As” to save this to your computer.
In this example, I’d select the 60% quality, as it looks almost the same as the original, but will load about twice as quickly. As you can see, if I chose the lowest quality (10%), I’d lose a lot of image quality, and save very little in terms of file size. Also, bear in mind that I’ve shrunk down these images for demonstration purposes. when using the tool you’ll see them at their actual size.
If this all seems a bit too complicated, or if you need any help with image optimization, please call us; we’d love to help.