In this article, we will discuss high pixel density in the display of phones and computers. And we will answer the question why on the screens of some devices the photos on your website look blurry.
Recently, increased pixel density in displays of mobile devices and computers has become widespread.
For example, Apple's Retina display has twice the pixels per inch of the competitors. Accordingly, we see the image 2 times sharper.
Now enlarge the window in the browser with Ctrl and + in Windows, in MacOS you will see the difference immediately. The first picture is normal, the second is Retina.
image x1 (normal)
image x2 (high definition)
How can I make the image clear on any device?
There are two options:
- Upload a photo with a resolution 2 times larger than the required screen size in Windows.
- Make a script that replaces the photo (higher resolution or lower) depending on the pixel density of the screen or its resolution.
Read another article on SVG.