Адаптивные изображения в Jekyll

29 августа 2015

Matt Biilmann написал статью о том, как можно отображать изображения из Jekyll на экранах с высокой плотностью пикселей. Этот пост является приблизительным переводом небольшой части оригинальной статьи и некоторых кусков документации, опубликованной в GitHub репозитории.

Итак, автор рекомендует использовать плагин Jekyll Srcset. После его установки, у вас в арсенале появится новая Liquid конструкция:

  {% image_tag src=page.thumbnail width="200" %}

В ответ на указанный выше код, плагин сгенерирует разметку, в которой будут предусмотрены все необходимые варианты, для качественной презентации изображений:

  <img src="/thumb-200x200.jpg" srcset="/thumb-200x200.jpg 1x, /thumb-400x400.jpg 2x, /thumb-600x600.jpg 3x">

На этом моменте, автор заканчивает с конкретикой и начинает философствовать, о том, что недавно появившийся атрибут srcset очень полезен с практической точки зрения и прост в использовании. Поэтому, я перехожу к документации.

Установка плагина:

  $ gem install jekyll-srcset

Настройка:
Добавьте следующую запись в конфигурационный файл (в _config.yml)

  gems:
    - jekyll-srcset

Ещё один пример использования:

  {% image_tag src = "/ image.png" width = "100"%}

Вы должны указать либо width, либо height, но ни в коем случае нельзя указывать и то, и другое одновременно. Ширина или высота будут использоваться для определения базовой версии используемого изображения (для устройств, экран которых имеет плотность 1 пиксель). Основываясь на указанном вами размере, плагин сгенерирует до трех версий изображения, два из которых будут предназначаться для устройств с повышенной плотностью: image.jpg 2x и image.jpg 3x. Плагин не масштабирует изображение.

Плагин установит их в качестве значений атрибута srcset (для тега <img>), после чего современные браузеры смогут определять, какую версию изображения требуется загрузить.

Переменные:
Рассматриваемый нами плагин позволяет использовать переменные:

  {% image_tag src = page.cover_image height = page.cover_image_height %}

В этом примере, с помощью переменных мы указали путь до конкретного изображения и его высоту.

На этом у меня всё.

jekyll