In the world of graphic design and web design, you would be encountering several jargons that you become accustomed to shortly, but seldom pay attention to what it means. Most of us usually try to understand the jargons in our own way by trying to figure out the manner of its use. From designers and visual creators to the iPhone salesman and amateur photographer, we hear them all say and toss the words DPI and Pixels in a very casual manner. However, how do these jargons affect the image quality and what does it signify? Unless you can find the answer to the question, you can never be sure about how to use these in design projects.

The important things to consider are the medium you choose to work with and the way you would like to use the images. These factors would help to determine the appropriate size of the image and the right number of pixels or DPI. For graphic designers working with any Boston SEO company, it is essential to be conversant with the jargons related to image quality so that they can make the right selection that brings out the best in design.

Pixels explained

Pixel is a frequently used term in web design, which is an acronym for the word picture elements. It represents the smallest unit of a grid on which you display the image. The unit of measurement is pixels per inch or PPI. When an image has more PPI, the image appears much sharper due to the size of each pixel. Any image that is low on pixels (PPI) suffers from a condition known as pixilation in which the edges of each pixel become visible.

The importance of PPI is due to its reference to the picture quality. It is possible to change the number of pixels in an image or resample it by using image-sizing tools available with photo editing software. By using the same tool, you can resize images, which means changing the size of each pixel in the image without altering the number of pixels. The implications of pixels vary according to the medium, as it is different for the web and the print media.

Images that display on screens

Any good quality image will render well on computer screens without any distortion or pixilation if it maintains the web standard of 72 PPI. The full-size photo should occupy the frame completely. You can calculate the ideal width of the image that fits on the frame by knowing the width in pixels. The text is equivalent to pictures in the context of pixels because more pixels per inch produce sharp and distinct text that is easy to read.  It becomes legible even on small screens as compared to the text of lesser pixels, and it could become pixilated just like images.

The consideration of browsers is essential when choosing pixels for web design because the design has to take care of varying browser sizes. Make provision in the design so that the images can adjust to the different browser sizes but not beyond its actual size.

Dots per inch (DPI) – what is it?

DPI is a term related to resolution and printing quality that people use to describe the quality. When you print an image and se it under a powerful magnifying glass, you will discover that it is made of thousands of minute dots that each ink color overlays. The spectrum of colors that become visible is the result of ink mixing on each dot. The figure associated with DPI is the number of dots per inch. High DPI means smooth image.

The problem is that people often use DPI and PPI interchangeably although these are radically different. Despite the mention of DPI in photo software dialog boxes, it essentially belongs to the realm of printing.

DPI in relation to the web

DPI is not at all relevant for web images because the monitors do not use dots for rendering images on the screen. However, you must pay attention to it if the project spreads over across different platforms beyond the web. Items like company logo can appear on business cards and flyers as well as on websites. The image that appears in print should have higher DPI for better clarity and sharpness when used on business cards.


The digital camera industry uses Megapixels to describe the quality of the image and its size when you take a photograph on a particular camera. Since camera images are much sharper than graphic images, the digital camera industry uses a higher unit of Megapixels, which translates in a million pixels. In the end, it boils down to pixels only.

Having a proper understanding of PPI and DPI would help to impact the overall quality of the design by taking into account the media that would use it.

Author bio: Angelina Croft is a graphic designer and Boston SEO expert who has assisted in numerous web design projects. She is passionate about photography and wants to include it in her professional portfolio. A mother of two kids, she and her husband Peter loves to get lost in the mountains occasionally.