Using PPI And DPI In Web Design

Posted on October 31, 2012 by

From smartphone salesmen to world-class photographers, we hear both phrases tossed around frequently. But what do they really mean and which one should web designers use? It depends entirely on the nature of your web design project. Knowing how your images will be used and what medium you’re focusing is the key to choosing between PPI and DPI. Before beginning a new web design project, make sure you understand these jargons:

Pixels are essentially smallest units of an image and measured by PPI or pixels per inch. The sharpness of an image is determined by the PPI value. Low PPI number because each object on the image to look jagged and pixilated, PPI is essential because it determines the image quality. You can resize or resample (adjust the number of pixels in an image) using sizing tools in any photo editing software. In Adobe Photoshop, you can do this using the “Image Size” menu.

In web design, images should have at least 72 PPI, which allow them to render nicely on most browsers. If you use full-sized photos remember that they must be wide enough to completely occupy the frame. 72 PPI images should be about 12” wide to fill the space without showing pixilation. Text quality is also determined by the PPI number, it determines whether text looks crisp and is easy to read. Text with low PPI number can be pixilated in the same way images can. When considering pixels for web design, web designers should consider ever changing display size and resolution. In the early days of the Internet, users are using only a few standards of display size. This necessitates the use fluid-width layouts, so it’s necessary to allow images expand proportionately with the web browser, but not beyond their actual sizes. This can help you maintain the quality and integrity of your images. While PPI allows you to determine images quality, it isn’t fully usable in the actual printing process. For printing professionals, understanding DPI (dots per inch) is much more relevant.

Since we are talking about dots and their correlation with image quality, it’s necessary to discuss a term commonly used in digital image processing – the megapixel. It’s commonly used in the digital camera industry can help consumers understand the size of images taken with a camera. When we boil it down, one million pixels are equal to one megapixel.

The term DPI (dots per inch) was first used as a way to define printing resolution and quality. When images are printed, they’re made of thousands or even millions of tiny colored dots. Each dot represents a hue in color spectrum. Higher DPI number equals to smoother and sharper images. Increasingly though, DPI is used to refer so many things and people often confuse PPI or pixels with DPI. Because some photo editing software use these terms interchangeably, they directly add to this confusion as well. But unless you’re working on a printing project, you shouldn’t be too concerned with DPI.

When we are looking at images displayed on the computer screen, it’s unlikely you’ll be able to tell the difference between a 300DPI image and a 100DPI image, because computers just don’t render images using dots. When working with web design projects, DPI is usually irrelevant. You may use it only for cross-platform graphic items, such as company logo used for business cards, leaflets and website. The importance of DPI comes in when a graphic item is transferred from digital form to printing materials. For example, 300DPI is the standard resolution for paper printing. It’s necessary to make sure that your final print project meets DPI specifications provided by clients so that printing device doesn’t shrink or enlarge your design, which might alter the quality and look of your final product.

When converting printed items to digital formats, DPI also comes into play. When we scan images at higher DPI, the quality of images displayed on the computer screen is typically better. Generally, scanning printed material at 200DPI can give you photo quality images. If you want to reprint or enlarge an image, consider using higher DPI when scanning.

Using proper PPI and DPI specifications properly can positively impact the overall quality of your next web design project. When working with web design and other digital application, you should stick with PPI and when preparing some web elements for a printing project, you can use DPI. Remember that these units of measurement can have some impacts on image quality. If you’re not sure about the necessary dot- or pixel- resolution, you should opt for quality over other competing factors such as size and file compression. You can always shrink the image or increase the compression rate later when needed.

Author :

  • Adam Scott