Understanding Image Resolution

If you building a web site you need to be familiar with image resolution. Your images need to render well on your web page
plus your web page should not take a long time to load.

What is Image Resolution?

Image resolution refers to the spacing of pixels in an image and is measured in pixels per inch, ppi, (sometimes called dots per inch, dpi). The higher the resolution, the more pixels in the image. Higher resolution allows for more detail and subtle color transitions in an image.

Image size refers to the physical dimensions of an image. Because the number of pixels in an image is fixed, increasing the size of an image decreases its resolution and decreasing its size increases its resolution. When scanning an image, the scanner translates the size of the image (inches) into pixels using resolution. When printing an image the printer translates pixels into inches using resolution.

What are pixels?

When you download pictures from your digital camera, scan pictures, or manipulate pictures with your photo editing software,
you work in pixels. Your computer monitor displays pixels, and your printer paints pixels onto paper. A pixel is the smallest unit in a computer image or display. Every image on your computer is made up of a colored grid of pixels.

Camera resolution

This is the number of megapixels (or millions of pixels) that a camera can capture in a single photo. A two-megapixel camera, operating at maximum resolution, creates an image of about two million pixels. Most cameras offer at least three different pixel-count settings for taking pictures with varying degrees of quality. At lower settings, the camera reduces the number of pixels to create a smaller image that requires fewer bytes to store in memory.

When taking a picture to place on a web page or send by email, you only need a low pixel-count setting. Images used for the Internet are kept to a small file size for quicker downloading and viewing. They are usually at a low resolution, 72 dpi since that is typically the monitor resolution. Images on the web should not be used for printing. They are usually not the correct image size or resolution and therefore will appear blurred.

Scanning Resolution

When you increase the scanning resolution of an image, you create files that are often too large for emailing or web publishing.
It’s best to scan an image for the Web at 72 ppi. If you want to use it for the printing purposes, scan it at 300 ppi. This will give you a higher pixel count and allow the printed image to display well.

To calculate the pixel dimensions of a scanned photograph, multiply the scanning resolution by the dimension in inches: Resolution x Inches = Pixels. Using this formula you can calculate the pixel dimensions, for example, of a 4″ x 6″ photograph scanned in using 300 ppi:

300 pixels/inch x 4 inches = 1200 pixels
300 pixels/inch x 6 inches = 1800 pixels

So your 4″ x 6″ photograph will be displayed as 1200 x 1800 pixels on your monitor. This is too large for most monitors.

Reduce image download times

You can decrease the download times of images on your web site by:

1. Keeping the resolution of your images to 72 ppi.
2. Not having too many images on one web page. Too many will make the page heavy.


Now that you understand image resolution better, you can create web sites that display well and load fast or if creating print images you will produce sharp looking photos.

Speak Your Mind