One of the classic newbie errors in creating images for the Web is to upload the original source file produced by their digital camera. I’ve seen tiny profile pictures less than an inch across rendered from 3MB source files. But that’s not what this post is about. There are plenty of pages that explain how to properly resize images for the web. Here’s one good one.
No, I want to discuss a thornier issue. Once you know how to make your files smaller, how small should you make them, exactly? This decision is not nearly as easy. Sure, your 40 X 60 profile picture should be very small indeed, but what about the art shot you want to use to illustrate a blog post? What about a photo of a restaurant designed to entice customers to call for reservations? Make the photo too small and it won’t catch your readers’ eye. Make it too big and it will take too long to load and they’ll be surfing along to the next page before you can say “fettucine Alfredo.”
Some web designers actually create several different images, and even different versions of their web site that load differently on different platforms. That way if you’re reading their site from your cell phone you won’t choke on the 800 X 600, 180K photo that wouldn’t be a problem on a DSL or cable modem line. Let’s assume that you don’t have that level of design resources and you want to settle on a compromise that will work all right for everyone.
Personally I’ve settled on about 100K as the maximum size I’ll use for an illustrative graphic (as opposed to navigation buttons or ancillary images like profile pics, which should be MUCH smaller). If I must use a larger picture, I create a smaller preview picture and link it to the larger version. I try to keep all pictures for my blogs less than 600 pixels wide (again, using a preview if the picture must be bigger). On CogDaily, the site’s design limits me to 500 pixels, which is really fine for nearly every picture. Here on Word Munger I’ll sometimes break my own rule, because this site is mainly for my personal use. I’m happy for others to visit, but it’s my house, so my guests will have to put up with my quirks.
Note that the 600-pixel rule doesn’t preclude pictures being much smaller than 100K. Always use your image editor to make the file size as small as possible. The images in this post are all about the same size, but the first picture is nearly 80K, while the rest are all under 10K. I saved over 200K by optimizing each individual image.
That may not seem like much in these days of 8mbps internet connections, but you should remember that your readers may not always be reading your site the same way you do. Sometimes they’re on their home network, but sometimes they may be on a shoddy hotel dial-up connection, or on a cell phone, or worse. The more you do to accommodate everyone, the more readers you’ll have coming back for more.