Что такое ретинизация изображений

Ответ

Ретинизация (от англ. retina — сетчатка) — это процесс адаптации графики и интерфейсов под экраны с высокой плотностью пикселей (HiDPI), такие как Retina-дисплеи Apple.

Как работает:
На обычных экранах 1 CSS-пиксель = 1 физическому пикселю. На Retina 1 CSS-пиксель = 2×2 (или больше) физических пикселя.

Решение:

Использование изображений в 2× разрешении (image@2x.png).
CSS-правило image-set или медиа-запрос:

.logo {
  background-image: url('image.png');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('image@2x.png');
    background-size: contain;
  }
}

SVG — векторные изображения масштабируются без потери качества.

Оптимизация:

Сжимать @2x изображения (например, через WebP).
Ленивая загрузка для экономии трафика.