One of the great advantages of using the Web to promote your business is the ability to add your own cutting edge graphics, photos, product samples, and action photos of your cat shredding a roll of toilet paper. Let’s face it, that’s the only thing that really separates us from the apes, is our ability to snap a good pic. So you’ve got your handy digital camera, set up some model products, and you’ve made sure that you’ve got plenty of natural light (or Pabst Blue Ribbon, whichever you prefer actually). You snap some great pics, and post them to your site, only to realize that your page load time slows down…to a CRAWL.
One of the most overlooked elements of website design is image optimization. These days, even your $139 point-and-click camera is capable of taking some high quality photos, many of them print ready. This gives you great flexibility, as you can easily use your high quality graphics for a variety of purposes, but this high quality means a large file size, sometimes up to 5-6 mb. So, in order to reduce your file size, follow these simple tips.
Find A Good Image Editing Program
Photoshop, Photoshop Elements, or Fireworks are probably the best programs to use to adjust, crop, or resize images, but unfortunately, they’re pretty expensive. If you need to perform advanced editing features on your images, then by all means, pop down the money and buy one of these programs, but if all you need is a program to resize your photos, then your Windows Image Viewer should have a tool to do the trick.
Only Use JPG Files for Photos
This typically isn’t an issue, as your digital camera typically takes photos using a JPG format, but on the odd chance that your photo is a TIFF or BMP file, you’ll want to convert to JPG format. I won’t go into detail about the technical differences between the file types, because you probably don’t care. If, however you do want to know, there are plenty of articles on Google to explain it.
A JPG is actually a compressed BMP file, and the quality is slightly lower. I know what you’re saying…. you want the best quality that you can get, and you’re right, however, even though JPG files are compressed and therefore lower quality than BMP files, it’s almost unnoticable to the naked eye.
Reduce Your Resolution to 72 DPI
While your high quality camera might take pictures at 300-1200 dpi, this resolution is largely useless on the Web. A higher resolution means that there are more pixels in each inch of photo, and that typically means a much clearer quality. Since most monitors can’t resolve more than 72-96 DPI, that higher resolution will be lost, but you’ll still have a slow load time because the computer still has to download that large image. Step 1 in optimizing your photos would be to reduce the resolution to 72 dpi. You’ll notice an extreme drop in file size by simply performing this simple step.
Reduce the Physical Size of the Image
If you’re only going to use the image in a space of 300 x 225, then don’t insert a picture that’s 2400 x 1800 and simply resize it down using HTML or CSS. This is the easy way out, but considering that the average Web user has the attention span of a goldfish on crack, they’re not going to stick around long enough for your 4 mb picture to load. Take the time to use your editing software to shrink the image down to the actual physical size that you’re going to be using in your site.
Reduce the Quality of Your Photo
Reducing the quality of your photo will also drastically reduce the file size of the picture. While it’s possible to take the quality TOO low, image editing programs such as Photoshop and Fireworks can easily reduce the quality by 20-25% without changing the physical appearance.
Crop Your Photo
Cropping your photo probably won’t reduce the file size drastically, but if you’ve taken your pictures with a great deal of useless space, then cropping your photo can eliminate useless background scenery, photobombers, or the plain white wall behind your subject. Don’t crop too much, because white space isn’t a bad thing, but too much white space can be awkward.
Once you’ve taken these steps, I think you’ll find that your web page loads MUCH faster, which will lower your bandwidth as well as keeping those impatient potential customers and clients.