/ 

Оптимизация верстки под retina дисплеи

Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений. Самые популярные это сделать иконочный шрифт или использовать SVG. Но что если нет возможности или не хочется с этим иметь дело, или вы очень любите PNG. Решение конечно же есть. В виде плагина для Photoshop, js-библиотеки и sass/less/stylus примеси.

Теория подготовки сайта к Retina дисплеям

Я буду объяснять своими словами. Из-за того что плотность точек на retina экранах больше, изображение оказывается размытым (поскольку растягивается). Чтобы это побороть, нужно использовать изображение в 2 или 3 раза больше оригинального и масштабировать средствами html и css до размеров x1. Тогда на retina экранах изображение будет выглядеть отлично. Но для этого нужно сначала нарезать 2 или 3 размера изображений, а потом использовать js библиотеку и примесь в препроцессоре (для удобства). Обо всем по порядку…

Photoshop плагин Retinize It

Retinize It — плагин для фотошопа для оптимизации графики под ретина
Retinize It — плагин для фотошопа для оптимизации графики под ретина

Как написано на официальном сайте: «Лучший плагин к Photoshop для оптимизации графики на сайте для iOS и Retina-дисплеев». Скачать его можно на странице проекта.

Плагин представляет собой записанные действия, которые можно будет воспроизводить через горячие клавиши или пункты меню. Плагин выделяет слои, создает новый файл с ними, делает трим (обрезку краев) и сохраняет изображение в 1-м, 2-х или 3-х размерах.

Работать с ним просто:

  • Выберите слои или или группу слоев
  • Запустите Retinize It (можно добавить сочетание клавиш)
  • Назовите ваши файлы
  • Получите ваши нарезанные изображения
Как работает плагин Retinize It
Как работает плагин Retinize It

Для дальнейшего использования рекомендую сохранять файлы с постфиксами @2x, @3x. К примеру: file.png, file@2x.png, file@3x.png.

Используем retina.js для тегов img

Тут все просто, подключаем js библиотеку, и она определит нужно ли загружать изображение для retina экранов. Если нужно, то ссылка на исходный файл заменяется на ***@2x.*** или ***@3x.***.

Примесь для LESS

Скачать примесь можно на сайте.

После подключения она будет доступна для использования. Написав следующее: .at2x(@path, @width, @height); (вместо @path, @width и @height нужно написать ваш путь к изображению и его размеры).

Пример:

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

Эта примесь раскроется как:

#logo {
  background-image:
  path: /assets/img/url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image:
  path: /assets/img/url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

Подробнее о retina.js и примесях можно прочитать на сайте, скачать можно там-же.

Если у вас есть вопроси, или нужно будет дополнить чем-то эту статью — напишите об этом в комментариях :-)

⌘ ⌘ ⌘
За и против. Оформление незагруженных изображений.
Фронтенд

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
Фронтенд

Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…

HTML5 Link Prefetch указывает браузеру какие ресурсы вам понадобятся в будущем на сайте и максимально подготовит их дальнейшую загрузку.

Фронтенд

Правильный сниппет медиа выражений для retina

Которкий сниппет media quires для определения retina дисплеев и старые сниппеты от которых нужно давно избавиться.