Photos can make or break a website, in more ways than one. Great photos can grab attention and improve the appeal of your site. Poor photos choices, including good photos that have bad resolution quality can bring down your site's image. 

Using photos on a website that have 4 Megabytes of file size, such as directly from a digital camera, can slow down your website's load time and even "break" your site's layout by expanding outside of the desired space. The main thing to pay attention to when preparing images for the web is image size - measured in pixels (not inches). Computer screens can range from 800 to over 2000 pixels wide, but a picture from a digital camera is usually even bigger. That’s great for printing, but for use on a website that is 800 pixels wide, the file has much more quality than is necessary.

Another thing to know is that computer monitors all have a screen resolution of 72 pixels per inch (or dots per inch). When you print a picture, you want to have more pixels per inch, about 300 dpi, so the image will show more detail and look sharper. On a computer screen, all image resolutions over 72 dpi will appear the same, so the pixel size is what really matters – that’s how large it will appear on every screen.  

The same photo, without any change in file size, can be 13 inches wide when at a normal screen resolution of 72 dpi, or only 3 inches wide with a high quality resolution of 300 dpi. That’s why inches are not good measure for web photos – the pixel size is how large will really appear.

It is also a bad idea to use photos on your website of too poor quality that appear pixilated. An image is pixilated when the edges of elements in your image appear jagged instead of smooth. This can happen if you stretch an image to fill a larger space, because the photo only has a certain number of unique pixels in it, so it duplicates pixels to fill the space. This means more abrupt and noticeable changes in colors. So it is important to make sure that the photo you want to use has more pixels than there are in the space it needs to fill.

The image file type is another factor that can change the appearance of your images. JPG files are the most common files created by a digital camera, and also the best choice for photos on the web. GIF and PNG files are better choices for logos, simple illustrations, and images with transparent sections. GIFs are good for creating small files, but by eliminating colors for their compression, it will give a very pixilated appearance to a full color photo. JPGs also have different quality levels that you can set when saving an image that can compress their file size.

You can see above that smaller file sizes sacrifice quality, but setting your JPG files somewhat below 100% quality may be acceptable for your use.

So when you want to add a photo to a website, the first thing you need to know is how big the photo needs to be. There are several free Ruler applications available that make it possible to measure anything on your screen such as JR Screen Ruler and Measure It, a Firefox Extension. I like to use Cropper, which also allows you to save an image of whatever you measure.

Once you know what size your photo should be, then it’s time to edit your image. There are many programs you can use change your photos sizes and "optimize" them for web use. An Adobe program such as Photoshop or Fireworks would be the most professional choice, and would be worth purchasing if you work with photos and websites often.

There are also free or inexpensive programs available for download that can fill some of your needs, without some of the fancy special effects. Check out Powertoys from Microsoft, Paint.net , Irfanview, BIMP, PIXresizer, or Quick Image for Macs. The Preview Application included on Mac OS X Leopard also has some photo editing functionality built in. Some of these programs also allow you to resize many photos at once, which is called a batch resize.

There are also websites that allow you to upload, edit, and save photos directly through their sites. If you won't need to work with photos very often, then DrPic.com and Resizr.com are good places to start.

For some web environments, you won't need to resize photos exactly because the site will have a built in function to do it for you (such as photo sharing sites like Flickr.com). But a digital photo may exceed file limits that a site could have set on uploads, so you would then need to downsize it a bit. In part 2 of Basic Photo editing, we will compare some of the tools you can use to edit your photos, and explain some ways to jazz them up with options like borders and shadows. But for now just remember to pay attention to pixels.