Image Quality & Resolution For The Web

What is a High-Resolution Image

A high-resolution image can come in two forms, one that’s at least 300 DPI (dots per inch) or 300 PPI. For example, if you print out a photo, the printer will showcase 300 microdots of ink for every inch of your photograph. DPI is used when approaching the settings of printers, however, when we talk about monitors, we switch to PPI which is known as the “pixels per inch.” Take a look at the example below showcasing the same photograph of a parrot displayed within two different DPI scales.

As you can see the 72 DPI image looks a bit blurry compared to the image within a 300 DPI sale. The same metrics apply to using lower and higher scaled pexel per inch “PPI” for images on the web.

Printed Images vs Web & Digital Images

Monitors or digital screens use pixels much more sparingly than what a printer calls for. While a printer uses 300 DPI to set a high-res image, your monitor may only use 72 PPI that produces the same clarity. For example, a printed 2400 x 3000 pixel photograph used to create an 8 x 10 inch print would display about 72 PPI when viewing 2 feet away. Believe it or not, there’s a bit of math involved and a lot of squinting when speaking of printed images.

On the other hand, sizing a high-resolution image for the web or digital screens is a bit easier as long as you stay updated on the most current Pixel Per Image scale. Digital screens use to all comply with a scale of 72 PPI, however, with the advancement of technology and more devices entering the digital/physical market; there has been a variety of options as well as increased PPI scales.

To make things a bit easier, when working with photos for websites, software applications, or digital assets in general, we want to ensure all images are within the high-resolution standards. Meaning the minimum size of a high-res image should be at least 1200-1600 pixels wide. No matter if the image is within a portrait or landscape orientation. This allows for the image to be scaled at smaller or larger lengths without getting pixelated. To help with selecting a minimum resolution for your website project, follow our recommendations below.