Resolution and DPI are always getting confused. I regularly get asked: “What DPI should I use when creating a web image?”.
My first job was to work in a photography company developing their in-house software, it’s surprising how often the terms DPI and Resolution get mixed up. I believe Photoshop’s default settings when changing the image size and the fact that it uses the term “Resolution” instead of “DPI” has led to this confusion.
Resolution is the number of pixels either within an image or a monitor. This can be for virtual documents or physical devices.
For example, a full HD TV will have a resolution of 1920 pixels x 1080 pixels or a 34.6-megapixel camera can take photos with a resolution of 34.6 megapixels (7200 pixels x 4800 pixels). The resolution does not state how big the image or display or how big the camera’s sensor is. A full HD TV can be 42 inches or 60 inches and still have the same resolution.
DPI or “dots per inch” determines how many pixels or dots are used per inch on a physical medium. Example mediums can be photo printout or a computer monitor.
The DPI usually determines how physically large an image or display will be or how many dots an inkjet printer can make per inch. As the DPI increases while the resolution stays fixed the smaller the printout or monitor will be, the lower the DPI the larger it will become.
Where Photoshop Comes In
Photoshop today is used by a variety of people for different uses; web design, photos, prints etc. Photoshop will try to simplify all the settings by default by assuming that your main aim is to create a document at a fixed physical size measured in cm, mm or inches. So you if change the DPI (Photoshop calls this resolution) it will change the resolution (number of pixels in the image) to keep the same physic size. This can be disabled to by unchecking the “Resample” box to say to Photoshop my pixel width and height are correct, do not change them.
DPI of Images on a Website
So the next question really is
What DPI should an image be for a website?
My answer is: Does it matter?
An image on a website is a virtual presentation of the image, the computers use the pixels to display it, its just job of the monitor to display it according to a physical size and even then the image should be relative to the rest of the website. DPI in this context doesn’t matter It can be 72 dpi or 72,000 dpi, as long as the resolution is correct.
When working in Photoshop and creating images for websites always specify your sizes in pixels that way you know exactly what you are getting. If you specify 3 cm x 5 cm, the computer doesn’t necessarily know how big 3 cm by 5 cm is. What it does know is what a pixel is.
It has to be said that the two concepts can sometimes get confusing especially when you specify a resolution and DPI for an image, send them for printing and the printer has its own DPI. This might lead to the image being resized at which point artifacts may appear such as blurring or pixelation.
Another scenario is with high DPI monitors and phones displays, the operating system may change its “DPI” to make it easier to read and view the display as text might be displayed very small by the display. In this sense, it doesn’t mean dots per inch rather how small or large to render text and graphics at.
Good luck with that and I’m sure more things will come along in the future to make it that much more confusing!