02 Feb

Preparing Your Photos for the Web

As a web designers we resize images all day, every day. To us it is a walk in the park. But web site owners really struggle with it, so here are some plain language pointers:

  1. Images on the web are saved at 72 dpi. Dpi means “dots per inch”. Why is 72 the magic number? Well, more will not improve the quality of the image. In other words, screens have 72 dpi and giving them 150 dpi or 300 dpi images will not improve the quality of an image.
  2. Images on the web have to be small. By “small” we are talking around 400 to 600 pixels across. “Pixel” is a contraction of “picture element”, but for sensible people it is one tiny dot on your screen.  Images on the web should be small because otherwise they take too long to arrive for people on dial up and mobile connections. If you want to show people a really big image, you can “pop up” that image with a magnify link or some such device, but the important thing here is to give people the choice to see a larger image and not impose it on them.
  3. Images on the web have to be saved as JPEGs or GIFs and definitely not BMPs. Jpeg stands for “joint photographic experts group” and not surprisingly it is the file format best suited to photos. GIFs, short for “graphic interchange format” on the other hand is good for things like logos where there are only a few colours.

Now I know what dpi, screen size and file format I have to make, what next?
You need some software to do the resize, sharpen and save with compression. Photoshop Elements or Paint Shop Pro would be great options, or for free software IfranView. What ever you choose, there will be menu options for resizing, sharpening and saving out your images. Start with the “Image>Resize Image” menu options.

When resizing always work on duplicates of your photos and NOT their originals. The worse thing you can do is resize and reduce the quality of a valuable original image.

Print Friendly, PDF & Email