Четкие изображения на мониторах повышенной плотности пикселей (ppi)

Использование изображений одного размера без учета разрешения устройств, может привести к проблемам их отображения.

В решениях вопроса адаптивности изображений используется атрибут srcset.

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

В частности, для получения четкого изображения как на обычных, так и на retina мониторах применяем атрибут следующим образом:

  1. В случае загрузки изображения через previewer:

    <img src="/previewer/r/imgSize/imgSize/?method=..." srcset="/previewer/r/imgSize∗2/imgSize∗2/?method=... 2x"/>

  2. В случае статичных картинок:

    <img src="img.png" srcset="img-big.png 2x"/>

где

  • img-big.png — изображение с разрешением в два раза больше, чем img.png,
  • 2x — дескриптор плотности пикселей.

В данном случае мы говорим браузеру, что если соотношение логических и физических пикселей 2x или выше, вместо img.png нужно загрузить img-big.png.

Значение обязательного атрибута src рассматривается как изображение с дескриптором плотности пикселей, равным 1х. Оно будет использовано на устройствах с низким разрешением, в браузерах, не поддерживающих srcset.