Images are Important

…and they need to be handled wisely. I was in a client’s website last week and was concerned to discover that a scheduled full site backup had not run recently. Digging further, I discovered that the full site backup was failing, most likely due to the fact that the file was coming out at 1.15GB. Yes, that’s over a gigabyte. On a fairly new site.

After I caught my breath, I went digging to find the culprit, although I was pretty sure I knew. Sure enough, my client had forgotten the instructions I’d given for preparing images for the site, which was now rapidly reaching critical mass.

Here’s the thing. Images are large, larger than ever nowadays. Thankfully, hard drives are large, too, so we don’t usually worry about how big the images are. But when it comes to putting images on a website, it’s really important to make sure that what you put on the site is lightweight so it loads quickly for your reader. I have a DSLR which takes lovely images, and the files are ginormous. But you don’t have to have a fancy camera to end up with a large file—the images coming out of the camera on my phone are routinely 3-4 megabytes. If I put up a post with ten of those images, that one page suddenly “weighs” 30-40 megabytes in pictures alone. If, however, I take the time to prepare those images, they’ll each weigh in at more like 100-200 kilobytes, which makes the entire page 1-2 megabytes. That’s what, 5% of the original? It’s a huge difference on the internet, and can mean the difference between someone enjoying your site and leaving it.

Put Your Images on a Diet Before You Put Them Online

First, check your media settings in WordPress. You can adjust the default sizes of your thumbnails, medium size images, and large images. Any time you upload an image to your site, WordPress makes copies of it at the sizes set here. This is its standard behavior, to help your pages load faster. I usually do not change the thumbnail and medium size images, but I will usually set the large to be one of two things:

1. The width of the content (here on my site, that’s 700 pixels wide). If you plan on mainly using full size images in a post, this is the size image you want to upload to your site anyway.
2. The width of your standard “gallery” image, which could be 720 pixels, or maybe 900 pixels. If you’re a photographer putting up great pictures, bigger is better, and this would work just fine. If you upload a lot of 900 pixel wide images but have your large setting at 720, then WordPress will make a 720 wide copy of each and every one of those images, which can, again, add up–so if you plan on doing a lot of galleries, make that be your large setting.

There are a lot of image programs out there which can help you resize your images. I use Lightroom most often, or Photoshop. You could use Picasa, Photoshop Elements, iPhoto, or even (gasp!) MS Paint. I’m not going to tell you how to resize (honestly, I’d have to figure it out myself in some of these programs), just what you should pick for your settings (if you can):

• Set your width to be 900 pixels wide. The program will figure out the height. For vertical images, you won’t want to go that tall, though—maybe 720 pixels tall.
• If you just need a small image, like the one I put at the top of this post, go ahead and save it at the size you need. That one’s 300 pixels wide.
• If you can set your resolution, pick 72 dpi. 300 is for printing.
• If you can strip out the metadata (camera model, focal length, etc.), do it. Lightroom and Photoshop can handle this easily and leave just the copyright info, if you’ve set it. If you don’t know what this is, or can’t find it, don’t worry about it.
• Not size related, but name your files something relevant to your content. Hint: DSC_0031 is not relevant. Search engines see your pictures—give them something to work with. Also, use hyphens or underscores instead of spaces in your file names—spaces won’t usually break the Internet but they can cause problems.

These are pretty basic tips, but they can make a huge impact.

When you upload your images to WordPress, you can make them even more visible and useful to search engines by editing the title and alt text. These can have spaces in them. If your reader’s browser doesn’t load images, or if they have accessibility options turned on, the alt text comes into play. So, the title and alt text are not just for search engines (which can’t actually see your pictures, since they are computers, remember, just what you name them and how you identify them), but also for your visitors.

So, how much difference can sizing your images correctly make? I spent some time cleaning up the client’s site, resizing images, and ended up with a new backup file that weighed in at 312 megabytes. That’s a 900 megabyte diet, which brings their site to a manageable size, makes their webhost happy (even with “unlimited” hosting, trust me, your host cares), and, most importantly, makes their readers happy.

Hope you enjoyed this little client tutorial. I’ll be adding more of these as I go along.