В данной статье мы обсудим большую плотность пикселей в дисплее телефонов и компьютеров. И ответим на вопрос, почему на экранах некоторых устройств фотографии на вашем сайте выглядят размытыми.
В последнее время большое распространение получила повышенная плотность пикселей в дисплеях мобильных устройств и компьютеров.
К примеру, разрешение экрана Apple Retina имеет в два раза больше пикселей на дюйм чем у конкурентов. Соответственно, мы видим изображение в 2 раза четче.
Теперь увеличьте окно в браузере Ctrl и + в Windows, в macOS разницу увидите сразу. Первая картинка — обычная, вторая — Retina.
изображение x1 (обычное)
изображение x2 (повышенной четкости)
Как сделать, чтобы изображение было четким на любом устройстве?
Существует два варианта:
- Закачивать фотографию с разрешением в 2 раза больше, чем требует размер экрана в Windows.
- Сделать скрипт, подменяющий фотографию (большего разрешения или меньшего) в зависимости от плотности пикселей экрана или его разрешения.
Прочтите еще статью про SVG.