webp_picture

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

Фильтр создает из объекта изображения тег 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>