@CoCoCoder
Новичок в веб-программировании,только учусь. :)

Как оптимизировать графику в верстке под Retina?

В общем, сверстал заказчику макет (не адаптивная, а обычная вёрстка), PixelPerfect пройден, всё идеально, но! Он говорит, что нужно оптимизировать изображения под все Retina дисплеи (ну, я так понял, под формат 2х2 пикселей). Всё это круто, но как это сделать? Потому что раннее с ними никогда не работал. Есть только изображения в макете, половина SVG, половина PNG-JPEG, что с ними делать,как их оптимизировать под Retina? Использую препроцессор LESS.
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
IonDen
@IonDen Куратор тега CSS
JavaScript developer. IonDen.com
С SVG ничего делать не нужно.

А вот с обычными картинками нужно.
1. Представьте себе квадрат 100х100 пикселей
2. В обычной ситуации вы вставите в него картинку 100х100 пикселей и все прекрасно
3. Но! На ретина экранах эта картинка будет выглядеть ужасно размыто и пикселизовано.
4. Чтобы этого избежать - вам нужно вставить в этот квадрат картинку 200х200 пикселей, но ширину и высоту задать по прежнему 100 пикселей (или если это фон, сделать background-size: cover;)
5. Примерно так в кратце это выглядит.

А дальше читайте хабр:
https://habr.com/ru/post/150071/
https://habr.com/ru/post/139682/
https://habr.com/ru/post/155683/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы