Understanding the proper resolution for an image greatly improves the quality of the photos in your website and also the load time, both important considerations for web developers. This is the first in a series of discussions on image resolution, image size and how to edit the photos for your website using both. Today’s post explains image resolution.
What is image resolution?
Digital images are composed of tiny dots called, pixels. Each pixel is a different color, so all the pixels put together form the details of the image.
The inset above is magnified to 1600% to show how the colored dots make up the details of the boy’s hair.
Resolution is the density of pixels as measured by “pixels per inch (ppi).” The more tightly-packed the pixels into each inch of space, the more detail (quality) there is in the image.
For example, the 10 ppi image below left is blurry because there are only 10 pixels per inch in the photo. The middle image is an improvement at 20 ppi, but is still not a very good quality. The image on the right gives the greatest detail of the three at 72 ppi.
Is there a standard resolution for web images? While print materials most often use a very high resolution for the most detail, the standard resolution for web images is 72 ppi. This give the most detail we humans can see on a digital screen while allowing the image to open (load) quickly. The next post will discuss image size.