In part 3 of our series, we explain why unoptimized images can slow your site down. We’ll also provide some ways to get them optimized without quality loss.
Optimize Images For The Web
Finding the perfect image to use on your website or blog is often a challenge. If you’re not the type to create or take your own, you know how frustrating it can be to find the perfect image that gets across exactly what you want it to.
Finding the image is only half the battle; making sure the image isn’t going to slow down your website is the other half. Normally, it’s not that big of a deal because a lot of people have broadband connections these days. But imagine you’re in an area that doesn’t have broadband — or their broadband is so slow it might as well be dial-up.
Trying to look through an album of photos that were taken at 10.1 megapixels or better in that situation would be nearly impossible — those images can take quite a bit of time to download, causing a lot of frustration.
Below is an image I took of a temple during my trip to India in March of 2008. The image is in various formats to illustrate the difference in load times. Click the image to view the full size and fully realize the difference in load times.
Optimize the photo using any image processing software you’d like — I use Photoshop CS5. Photoshop has a great “Save for Web & Devices” feature that allows you to change to various filetypes and image qualities to make the overall filesize smaller. The bigger the file, the longer it takes a visitor’s browser to download.
To get to the “Save for Web & Devices” menu in Photoshop, use the File menu, the keyboard shortcut: S on a Mac, or Control+Alt+Shift+S on Windows. The dialog looks like this:
The highlighted areas indicate the filesize and quality. Reduce the quality near the top right corner to make the file smaller and the image load faster.
In addition to adjusting the file type and quality of the image, you may want to resize the image itself. A 10.1MP photo is 3888px wide and 2592px tall, which is quite large and way to big to fit in any website design. Resize the image to have it fit nicely in your site’s layout, which will make the image will load faster.
To resize an image is simple, in Photoshop you can use the keyboard shortcut I on Mac, or Control+Alt+I on Windows. That will bring up the resize dialog:
Once the dialog box opens, you can enter new dimensions of your new image. In this case, I resized my image to 1024×683, but you can choose what dimensions will fit in your site’s layout. Another thing to consider is that most CMS applications will resize your image for you when you upload it. WordPress, for example, will create “Thumbnail,” “Medium,” and “Large” sizes of your image when you upload it, which will vary in size based on your image’s original proportions.
When you resize your image, take advantage of Photoshop’s “Constrain Properties” checkbox. Photoshop automatically adjusts the second property when you change the first. For example, if you change the width, the height changes automatically and the image remains proportionally correct. That saves you from trying to figure out what size to change the height to without skewing the image.
By no means is this a be-all and end-all of optimizing images. These are just a few easy to accomplish things that will guarantee faster loading times of any page containing images on your site.
- Adjust your filetype for web – JPG and PNG are better than BMP and GIF
- Resize your image to fit your site – Resizing with HTML is not optimal as the whole image still needs to load.
- Only use images that are absolutely necessary.
- Test your page’s load time – Use a third party service (I recommend Pingdom) to help you evaluate what’s slowing the site down.