In this three-part series I’ll go over the different types of images used on the web, what formats are best for which situations, and how to prepare your photos and graphics before uploading them to your website. This topic can get pretty technically complex, and to make things even more confusing, terms like pixels and resolution can mean different things depending on the context. For the purposes of this blog, I’ll keep it as simple and easy to understand as possible. If you really want to see how far down the rabbit hole goes, you are welcome to click on the links to more in-depth information. In this post, we’ll cover how things are measured and what resolution is best for photos on the web.

How things are measured on the web

Pictures and other elements of the online world are measured in pixels, not inches or centimeters. The term pixel is short for “picture (pix) element (el)” and has been in use for 100 years or more. Simply put, a pixel is a point sample of color, and your digital photos are made up of many of these little point samples arranged in a grid. Everything else on the web, like background colors and borders, is measured in pixels too.

Furthermore, the display resolution of your computer determines how much of a webpage you can see. The term display resolution is typically used to refer to the number of pixels wide and high your screen is. For example, the screen resolution on my laptop as I write this is 1366×768, meaning that my screen is 1366 pixels wide and 768 pixels high. When visitors use a computer monitor with a high resolution, they’ll see more of your website, and when they use a computer with a low resolution, they’ll see a smaller portion of it.

Websites are built with this in mind, to allow as many visitors as possible to see a reasonable amount of the page. As monitors with higher resolutions become more popular, web designers build websites that fill a wider portion of the screen. You’ll see what I mean if you run across a website that hasn’t been updated since the 1990′s, such as this one:  www.halletcinemas.com. You can see that the background covers the whole page, but the area with actual content (pictures and text) is pretty narrow. In this case, it’s about 600 pixels wide. That was pretty standard back in the 90′s, since monitors were much smaller than they are today. Now there’s no reason to keep your website so narrow, because 99% of internet users have screens with resolutions of 1024×768 or higher. That’s why most modern websites have average widths of about 960-980 pixels (this site, for example, along with YouTube, Yahoo!, and Bing).

Photo resolution on the web

So, what resolution is best for photos that are being displayed on the web? The industry standard is 72ppi, which means 72 pixels per inch. However, as mentioned above, there’s no such thing as inches on the web, because everything is measured in pixels. Pixels per inch (ppi) actually refers to the pixel density of your screen, which is determined by the screen resolution settings and physical size of your monitor. No matter what size your monitor, a screen resolution setting of 1680×1050 would have a higher ppi than a setting of 800×600. You’re simply crowding more pixels into the physical area of your screen, so there will naturally be more pixels per inch.

The industry standard 72ppi is based on the ability of computer monitors to display pixel detail. The quality of a photo on a computer screen can look fuzzy or pixelated if you display it at a much larger size than the actual pixels allow. For example, if you take a photo that is 200×150 and force it to resize to 600×450 pixels, it’s not going to look nice.

Columbia Gorge, 200×150 (original size)

Columbia Gorge, 600×450 (resized larger than original)

As you can see in the above example, the photo resized to larger than the original looks fuzzy. On the other hand, resolutions higher than 72ppi will simply make the file size larger, and will not look any better on the screen. So just remember to stick with 72ppi when saving your photo (if your photo editing program allows you to specify), and don’t enlarge a photo beyond its original size.

In part two, I’ll show you how to figure out the pixel measurements your photos should be before you upload them.

Preparing your pictures for the web, part two