Поддержка Retina и HDPI: высококачественные изображения и шрифты

Что такое Retina и HDPI? 🤔

Экраны Retina (Apple) и HDPI (High Dots Per Inch) — это дисплеи с повышенной плотностью пикселей. Они отображают картинку намного чётче, но требуют вдвое больше пикселей для того же визуального размера. Проще говоря: если обычный экран показывает изображение 100×100px как есть, то Retina «раздваивает» пиксели, и чтобы не было размытия, нужно поставлять версию 200×200px.

Как проверить плотность экрана? 🕵️‍♂️

Используем CSS-медиаправило min-resolution или его алиас min-device-pixel-ratio:

/* Для экранов с плотностью 2x и выше */
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    /* Стили для Retina/HDPI */
}

💡 dpi (dots per inch) — это стандартная единица измерения. 96dpi = 1x, 192dpi ≈ 2x.

Оптимизация изображений 🖼️

1. Используем srcset для ретинизации

HTML-атрибут srcset позволяет браузеру самому выбрать подходящее изображение:

<img 
  src="image-1x.jpg" 
  srcset="image-2x.jpg 2x, image-3x.jpg 3x" 
  alt="Чёткое изображение"
>

2. CSS: фоновые изображения с медиазапросами

.logo {
  background-image: url('logo-1x.png');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo-2x.png');
    background-size: contain; /* Масштабируем до исходного размера */
  }
}

⚠️ Не забывайте указывать background-size, иначе 2x-изображение займёт в 2 раза больше места!

Вектор vs Растр 🥊

Когда использовать SVG:

• Логотипы
• Иконки
• Простые иллюстрации

<!-- SVG всегда чёткий на любых экранах! -->
<img src="logo.svg" alt="Логотип">

Когда использовать PNG/JPG:

• Фотографии
• Сложные текстуры
• Графика с градиентами

Шрифты для Retina 🅰️

1. Выбираем правильные форматы:

• WOFF2 — лучшая компрессия (поддержка ~95% браузеров)
• WOFF — запасной вариант

@font-face {
  font-family: 'CoolFont';
  src: 
    url('font.woff2') format('woff2'),
    url('font.woff') format('woff');
}

2. Улучшаем читаемость

body {
  -webkit-font-smoothing: antialiased; /* Для macOS */
  -moz-osx-font-smoothing: grayscale;
}

🔥 Этот трюк делает текст на Retina-экранах особенно гладким!

Практический пример: кнопка с иконкой 🎯

Создадим кнопку, которая идеально выглядит на любых экранах:

<button class="retina-btn">
  <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20">
    <path fill="currentColor" d="M10 0..."/>
  </svg>
  Нажми меня
</button>

.retina-btn {
  padding: 12px 24px;
  font-family: 'CoolFont', sans-serif;
  font-size: 16px;
  border: 2px solid #2c3e50;
  background-image: url('button-bg-1x.png');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina-btn {
    background-image: url('button-bg-2x.png');
    background-size: 100% 100%;
  }
}

/* SVG-иконка не требует 2x версии! */
.btn-icon {
  margin-right: 8px;
  vertical-align: middle;
}

Итоговая таблица решений 🏁

Проверь себя! 🔍

1. Какой медиазапрос сработает на MacBook Pro с экраном Retina?
2. Почему SVG — идеальный выбор для иконок?
3. Что произойдёт, если не указать background-size для 2x-изображения?

💎 Профессиональный совет: Всегда тестируйте вёрстку на реальных Retina-устройствах. Эмуляторы в DevTools не всегда точно передают нюансы!