This subject can be a bit confusing, but let's try to be clear!
When we talk about graphic design, the amount of DPIs (dots per inch) are totally linked to the quality of the printed material, because higher density of dots means greater sharpness and details of the material.
In web design, the DPIs won't make any difference, because if you have a 1000px image with 72DPIs, or a 1000px image with 300DPIs, the result and quality will be exactly the same !!
Okay, so what matters to the digital design? The answer are Pixels and PPIs (pixels per inch)
Oh right, but what's the difference between DPI and PPI?
In a short way, DPI is for printed material, and PPI is for digital material ... So basically the logic is similar between the two, but each with different units of measure... Now here is an example:
Have you ever visited a website where image is preety on the computer but blurred on your smartphone?
That's because the smartphones' PPI is much larger than the pcs' display, and this gives you to see much more details ... That is, the same space that would fit only 1 pixel on your monitor, depending on whether it is 4 pixels or more on your smartphone, so the big difference in sharpness!
Okay ... So... How to avoid this issue on web design?
First, let;s think you have an 500px image on the desktop version of your website... This image, to not get blurred on your smartphone or 4k screens, you will have to do one of these two options:
- Save the image at least twice the size (1000px)
- Or use the image on the 4k / Smartphone with at least half the size (250px)
To summarize, use the principle that for images not to blur and maintain sharpness on 4k monitors or smartphones and tablets with high PPI, you will always need the file twice as large as the original size!
We hope we've been clear! If you have any questions, feel free to ask us!
Did you like this tip? Do you have any questions or suggestions? comment below! ;)
