Ответ
Ретинизация (от англ. 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).
- Ленивая загрузка для экономии трафика.
Ответ 18+ 🔞
Да ты посмотри, какая хуйня придумалась! Ретинизация, блядь. Слово-то какое, ёпта, выговорить можно сломаться. А означает-то что? А означает, что экраны у нас теперь такие, что пикселей там овердохуища набито, как блох на бродячей собаке.
Вот раньше-то было просто: один пиксель на экране — один пиксель в коде. И жили, сука, не тужили. А теперь эти, с ихними Retina-дисплеями, приперлись. И теперь один твой, блядь, CSS-пиксель — это у них целых четыре, а то и больше, физических пикселя! Представляешь, какое наебалово? Картинка твоя обычная на таком экране выглядит, как расплывшаяся манда с ушами.
Ну и как с этим бороться, спросишь? А вот как, хитрая жопа!
Первое. Ты берёшь свою картинку logo.png и делаешь её в два раза больше, называешь logo@2x.png. И тащишь на сервер. Всё, ебушки-воробушки, основа готова.
Второе. Нужно этим картинкам умно голову подключать. Берёшь CSS и пишешь:
.logo {
background-image: url('logo.png');
}А потом, блядь, добавляешь волшебную проверку, не зашёл ли к нам пользователь с таким вот навороченным дисплеем:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
background-image: url('logo@2x.png'); /* Подсовываем увесистую версию */
background-size: contain; /* И говорим: "Сука, ужмись в эти рамки!" */
}
}Третье, самое умное. А можешь вообще не париться и использовать SVG. Это вектор, ёпта. Его можно растягивать, как резиновую бабу, — качество не пострадает, ни одной пиксельной ступеньки! Красота, блядь.
Но, внимание, ебать мои старые костыли! Если ты тащишь эти здоровенные @2x картинки всем подряд, то трафик у пользователя сгорит быстрее, чем моя надежда на адекватный мир. Поэтому:
- Жми их, блядь! Конвертируй в WebP, используй TinyPNG — делай что угодно, лишь бы вес уменьшить.
- Ленивая загрузка, отец! (
loading="lazy"). Пусть грузится только тогда, когда пользователь доползёт до неё взглядом. Экономия — мать порядка, ебать.
Вот и вся наука. Не так страшен чёрт, как его ретинизация.