As part of our web site redesign, we’re trying to focus more on the people and the school community rather than the institution. In the past, we’ve included a lot of pictures of our school facilities on our web site. While the buildings are certainly attractive, they don’t do much to convey the message that we are all about people.
As we’re prototyping the new site, I asked a coworker for some new pictures that we could use. She responded by putting some pictures onto a network drive for me. These pictures came from various people throughout the district, and were primarily collected for use on the web.
The pictures all ranged in size from 640 x 480 to 3000 x 2000. Even the smallest of these is WAY too big for use on a web page. The image to the right is part of an unresized image of the high school jazz band.
Most monitors display between 52 and 96 pixels per inch. For years, the standard rule of thumb has been 72 pixels per inch. At this rate, a 640 x 480 image would be more than 6″ by 8″. The 3000 x 2000 image would be almost 42″ x 28″. If you’re using this on a web page along with text or other information, even the small pictures have to be resized.
My first digital camera produced pictures that were 640 x 480. That’s 0.3 megapixels, and the camera cost $600. Last month, I bought some digital cameras for teachers to use in their classrooms. The cheapest ones I could find were 6 megapixel cameras, which produce images that would take eight monitors to display at full resolution. We paid less than $125 for them.
This is all really good news if you want to put digital pictures in high-quality publications. Even printing full-page pictures to color laser printers will take advantage of all of those pixels, and many more. But for web use, we need to resize.
I was going to create a handout and post it here detailing how to resize pictures for the web using the free Irfanview software. But why reinvent the wheel? There’s a perfectly good one here. There’s another one here. And another. Assuming you can use Google, you can probably find another dozen tutorials for this. And if you can’t use Google, I’ll help you.
Anyone who is going to post pictures online has to understand this. It’s easy to post content online now. Most blogs and content management systems are trivially easy to use. But pictures are a problem. Most packages will let you change how they’re displayed, but they won’t resample the picture. This results in a web page that takes forever to load, because it’s downloading all of those pixels that it’s not even displaying. The publisher has to resize the pictures before uploading them. If they don’t know to do this, the problem is only going to get worse.