Optimizing images for the web

Modern digital cameras take very detailed pictures, but at a cost. Image file sizes can range from 3MB to as much as 25MB depending on how many MegaPixels your camera is capable of storing. If you have a website and choose to upload raw images from you camera, your page load times will suffer. Your web host may have limits on how much you can store on your web server. Uploading a bunch of large images will take up unnecessary space on your web server.

Many web sites and services have image file reduction scripts in place. So when you upload a 4MB image, it gets processed and stored at a reduced quality and file size. WordPress has no such system, and neither do many of the other content management systems. If you are building your own site from scratch or using a content management system, you will need to optimize your own images.

So what is a good "size"?

There are two things to consider when you are talking about size. First is the physical size of the image and second the file size. The two go hand in hand, the smaller the image the smaller the file size in general. Check out this table of camera raw image sizes:

I have a huge 1920px wide monitor and I rarely widen my web browser out to the full width. So as you can see in the chart above, all of the raw digital camera images are wider than my huge monitor. So it does not make sense to upload the full width version of the image. One exception would be if you have a Digital Photography site where people can download full resolution images.

What should I do?

If you are placing images in a sidebar or in amongst the content of a page, resize the image to the exact dimensions you want it. If there is room for a 300px x 300px image on your page, upload an image at this size.

WordPress has a handy feature called post thumbnails. When you upload an image, WordPress crops a couple different sizes for you and stores them. So typically WordPress crops a 150 x 150 and a 300 x 300 image for you to use to optimize your posts. You can simply insert the image right from the editor or link to the actual filename. WordPress adds the additional cropped sizes right to the filename: "-300x300.jpg"

The best bet is to size your image based on its display container. For instance, the main content areas on my sites are a maximum of 1000px, so I size my images to be 1000px wide.

Dealing with File Size

Optimizing the file sizes of images is easy. Simply resizing your raw image to 1000px and then saving it as a .jpg may reduce the size enough to consider it "optimized". I have a range of desired file sizes that I target when optimizing: 70-150kb. 100kb is a far cry from 4MB, its about one fortieth the size.

Most graphic/image editing programs have a quality setting designed for use when saving .jpg files. The .jpg format is a lossy format, this means that every time you save it, quality is lost. The advantage being that you can save a .jpg at 80%, load it again and save it again at 80% and the file size will be reduced. This is not the best technique but it works.

I recommend a fabulous Free Adobe Air App, http://toki-woki.net/p/Shrink-O-Matic/

This program is fabulous, you can just drag and drop images into it and it will resize for you. To whatever dimensions or quality you want. It also bulk processes, so you can drag 20 raw images into it and it will spit out copies at 1000px wide, or whatever you set it to.

In Summary

• Use common sense, size your images based on where and how they will be presented
• Keep your images physically small : 1000-1200 pixels wide
• Reduce the quality enough to be small but not so small that pixilation occurs : 70-150 kilobytes is a reasonable max size
• Make it easy on yourself, use a good program to bulk process your images

A small amount of effort when you first upload your images will save you a lot of time and headaches down the road. Going back and deleting images, then editing the HTML after the fact is time consuming. Uploading optimized and sized images the first time is the way to go!