At Bluekea, we often receive one of the following questions: What resolution should I use to prepare my photos so they look right on my website? Is 72 DPI the correct resolution for the web?
The answer is simple: resolution is irrelevant on screens and has no impact on sharpness, file size, or any other aspect.
The size of a photo on a web page depends on the website’s design and the screen size. Additionally, modern websites adapt their layout based on the device they’re viewed on. For example, the same photo might take up one-third of a laptop screen, half of a tablet screen, and the full width of a mobile device, regardless of its resolution.
What is DPI resolution used for?
Resolution is essential when printing an image on paper or other materials, as it determines the size and sharpness of the print. If a photo is printed at 72 DPI, it will be much larger -and less sharp- than if printed at 300 DPI. In other words, resolution controls how closely the color dots that make up an image are packed together. A higher resolution increases sharpness but reduces the print size, while a lower resolution expands the image at the cost of sharpness.
This happens because, on paper, we can control the density of pixels. However, on a screen, we cannot, since pixels are phisically fixed. For example, if we view a 900-pixel-wide photo at its full size in Photoshop, and our screen has a density of 100 dpi, the resolution will always be 100 dpi. The image will always appear as 9 inches wide (900/100), regardless of whether it’s set to 72, 300, or even a million dpi.
So, what determines image sharpness on a website?
The key to displaying sharp photos online is ensuring they have enough pixel dimensions for the space they will occupy on the page. For example, for a full-screen background image, Bluekea recommends a width of 2100px. If the image only needs to cover half the screen, 1050px wide may be sufficient. In this article, we provide more details on these dimensions and how to keep file sizes optimized.
