Автоматическая генерация изображений с поддержкой ретины (Retina support)

Для мониторов Retina с разрешением x2 PixelRatio необходимо указывать изображения с увеличенным размером @x2 (в два раза больше). Когда у вас небольшой сайт-визитка, и картинок не так много - можно использовать retina.js, и вручную закачать для ретины крупные изображения. А некоторым элементам и вовсе указывать через background в css не используя скриптов.

Так же можно сразу использовать крупные изображения, и задавать им меньший размер например через width в style. Но таким образом, на мониторах без ретины, которых на сегодняшний день большенство, будут грузиться крупные картинки. А ведь мы хотим оптимизировать наш сайт, длянаших посетителей, значит такой вариант нас не устроит!

Что же делать, если у нас крупный проект, и все изображения генерируются специальным сриптом, и кешируются с такими именами как например: /assets/components/phpthumbof/cache/name.632bede5d159470b43baaf61704064089.jpg

Как можно заметить из ссылки на файл, изображение генерируется с помощью phpthumbof в cms MODx. На его примере и разберем!

Выводим избражение 

<img class="hires" src="[+image:phpthumbof=`w=100&h=100`]" data-retina="[+image:phpthumbof=`w=200&h=200`]" alt="" />

Таким образом мы получим мелкое изображение размером 100х100, и в параметре data-retina мы генерируем изображение 200х200 пикселей, которое не отображается на экранах и соответственно не грузит наш сайт.

<img class="hires" src="images/image.jpg" data-retina="images/image-x2.jpg" alt="" />

Подключаем скрипт

var $images = $("[data-retina]");

if (window.devicePixelRatio > 1) {
$.each($images, function() {
var $this = $(this);

$this.attr("src", $this.data("retina"));
});
}

Разберем скрипт по порядку:

В первой строке мы уточняем, что нам нужны ТОЛЬКО изображения с атрибутом DATA-RETINA. Это сделано для того, что бы скрипт не заменял все наши изображения для ретины - вдруг мы не подготовили для всех картинок их дубликаты с высоким разрешением.

Далее мы просто указываем, что, если разрешение высокое (x2), то скрипт будет подставлять значение из data-retina в параметр SRC нашего изображения

Дополнительно:

  • Обязательно подключите jQuery перед подключением скрипта.
  • Проверить работу скрипта на обычном мониторе можно просто увеличив страницу до 200%

© 2016. Chillside. Разработка сайтов. Статьи