Экраны с высокой плотностью пикселей (Retina, DPR — Device Pixel Ratio) имеют больше физических пикселей на один логический пиксель, что делает изображение более чётким и детализированным.

Например, экран с DPR=2 означает, что на каждый CSS-пиксель приходится 2×2=4 физических пикселя.

Чтобы изображения выглядели чётко на таких экранах, нужно предоставлять ресурсы с более высоким разрешением. Обычно это делается так:

Подготавливают изображение в два раза (или больше) больше по размеру, чем требуется для отображения.
В HTML/CSS указывают размеры в логических пикселях, а браузер масштабирует высокодетализированное изображение под экран.

Пример использования в HTML:

<img src="image@2x.png" width="100" height="100" alt="Example">

Здесь файл image@2x.png имеет размер 200×200 пикселей, но отображается как 100×100 CSS-пикселей, что обеспечивает чёткое изображение на экранах с DPR=2.

Также можно использовать атрибут srcset для автоматического выбора нужного варианта:

<img src="image.png" srcset="image@2x.png 2x, image@3x.png 3x" alt="Example">

Таким образом, браузер подберёт подходящее изображение в зависимости от плотности пикселей устройства.

Как работают экраны с высокой плотностью пикселей (Retina, DPR)? Как правильно подготавливать изображения для таких экранов?