Фильтры для изображений

image_url

Фильтр для указания размера изображения.

Фильтр на вход принимает параметр в виде числа.
Например если указать 200, то изображение уменьшится с сохранением пропорций до 200px по длинной стороне. 200x400 = > 100x200.
Минимальный размер 16px.
Максимальный размер 2048px.

У фильтра есть второй не обязательный параметр - format.
Этот параметр принимает 2 значения - 'jpg' или 'webp'.
Параметр format преобразовывает png => jpg или любой формат в webp, что позволяет оптимизировать изображение.

! Если исходное изображение по размеру меньше указанного в фильтре, изображение будет растянуто до указанно значения.

! Не применяется к ассетам темы (содержимое папки media).

Параметр resizing_type дает возможность заставить картинку изменять размер по ширине.
Для этого необходимо выставить значение fit_width

Liquid

        
          <img src="{{ product.first_image | image_url: 800, resizing_type: 'fit_width' }}">
<img src="{{ article.image | image_url: 320, format: 'jpg' }}">
<img src="{{ collection.image | image_url: 600, format: 'webp' }}">

webp_picture_tag

Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом.

Фильтр принимает обязательное значение (размер изображения) в формате числа.

Через запятую можно указать атрибуты для тега img. Если у изображения товара заполнено имя, оно проставиться в атрибут title автоматически.

! Не применяется к ассетам темы (содержимое папки media).

Liquid

        
          {% assign image_title = product.title | escape %}
{{ product.first_image | webp_picture_tag: 600, class: 'product-image', data-index: 1, alt: image_title, title: image_title }}
На выходе получаем =>
<picture>
  <source srcset="https://static-eu.insales.ru/.../600/600/.../product.png@webp" type="image/webp">
  <img src="https://static-eu.insales.ru/.../600/600..product.png" class="product-image" data-index="1" alt="товар" title="товар">
</picture>
---
{{ collection.image | webp_picture_tag: 600 }}
На выходе получаем =>
<picture>
<source srcset="https://static-eu.insales.ru/.../600/600/.../image_original.jpg@webp" type="image/webp">
<img src="https://static-eu.insales.ru/r/.../600/600/.../image_original.jpg">
</picture>