More Info About Image specification especially DPI
When it comes to photos for the web, a lot of people talk about having it “set to 72 DPI”. Or even worse want it to be 300 DPI.
The following information will put the 72 DPI myth to rest. Firstly what is DPI?
DPI stands for ‘dots-per-inch’ while PPI stands for ‘pixels-per-inch’. Generally, the term DPI is used for printed images, and the term PPI is used for screens. In some ways, they are fairly similar and a lot of people use them interchangeably, which in turn does cause some confusion.
The size of an image in a web layout is very important. The proper alignment, getting the right amount of white space, as well as sizing photos and graphics beforehand are all important factors in creating a balanced look.
So the image DPI really matters… but it only matters if you’re printing it out. In print, dots per inch impact the size of an image on a page. DPI doesn’t apply to web imagery. Images on the web are measured in pixels.
All you have to do is look back to what the acronym actually stands for pixels/dots per inch. This refers to how many pixels/dots are squeezed into one inch of space on a printed page. Two images with the same pixel value (let’s say, 1000 pixels wide) will print at very different sizes depending on the set DPI. That image at 72 DPI will be 13.88 inches wide, while that same image at 300 DPI will be 3.33 inches wide. It’s just basic math. All DPI does is determine how many pixels your printer is going to cram into one inch of space on the page. That’s why a higher DPI image looks better than a lower DPI image – the more pixels you squeeze into a small area, the finer the detail in your printed image.
Pixels are all you ever need to think about. To determine how big an image should be on your website, you have to know what size in pixels it needs to fill. Your designer/developer should tell you something like “Please make sure that images for this particular section of your website are X pixels wide.” The target size of your image is determined by the size of the container it needs to fill, and that measurement is different from website to website (or even in different parts of the same website).
Remember your monitor resolution is in pixels, if you have an image 150 pixels by 150pixels it will be a small image on an 8k monitor, and huge on an old 640×480 resolution monitor, but the DPI will never change the size on the screen.
So if your web developer asks for images for your website and refers to DPI they either do not understand the technology or are from a printing background and are confused.
The images below are the same size when viewed on screen, yet are massively different in terms of DPI.
Image one 72DPI
Image Two 300 DPI