В версии PrestaShop 8.1 появилась поддержка WebP, современного формата изображений, который значительно улучшает производительность сайта. Однако эта функция пока находится в стадии эксперимента, поэтому для её использования необходимо выполнить несколько шагов по настройке.
Зачем нужен формат WebP?
WebP — это формат изображений, разработанный Google, который позволяет уменьшить размер изображений без значительных потерь в качестве. Это помогает ускорить загрузку страниц, что особенно важно для мобильных пользователей и сайтов с большим количеством изображений. Быстрая загрузка улучшает SEO и пользовательский опыт.
PrestaShop сообщает:
«Версия 8.1 позволяет конвертировать существующие изображения в WebP и новый формат Avif. Изображения теперь сохраняются с соответствующим расширением (.webp для WebP, .png для PNG и так далее). Новая версия также поддерживает генерацию изображений в нескольких форматах, что позволяет браузерам выбирать оптимальный формат. Для корректной работы этой функции может потребоваться дополнительная настройка темы.»
Как включить поддержку WebP в PrestaShop 8.1?
Поддержка WebP в PrestaShop 8.1 является экспериментальной функцией и отключена по умолчанию. Чтобы её активировать:
- Перейдите в "Расширенные параметры" административной панели.
- Зайдите во вкладку "New & Experimental Features".
- Включите поддержку WebP.
Пересоздание миниатюр
После активации функции WebP ваши изображения не будут автоматически преобразованы в новый формат. Чтобы начать использовать WebP, выполните следующие действия:
- Зайдите в "Дизайн" -> "Настройки изображений".
- Нажмите "Пересоздать миниатюры", выбрав генерацию изображений в WebP.
Тема с поддержкой новых форматов изображений
Если ваша тема уже поддерживает новые форматы, такие как WebP и Avif, она может использовать тег <picture>, который позволяет браузеру выбирать оптимальный формат изображения. Вот пример кода, который может быть реализован в такой теме:
<picture>
{if !empty($product.default_image.bySize.large_default.sources.avif)}<source srcset="{$product.default_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
{if !empty($product.default_image.bySize.large_default.sources.webp)}<source srcset="{$product.default_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
<img
class="js-qv-product-cover img-fluid"
src="{$product.default_image.bySize.large_default.url}"
{if !empty($product.default_image.legend)}
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
{else}
alt="{$product.name}"
{/if}
loading="lazy"
width="{$product.default_image.bySize.large_default.width}"
height="{$product.default_image.bySize.large_default.height}"
>
</picture>
Эта разметка даёт возможность браузерам выбирать между WebP, Avif и другими форматами, если они поддерживаются устройством пользователя.
Поддержка WebP в PrestaShop 8.1 — это шаг вперёд к оптимизации сайта, который позволяет улучшить производительность и скорость загрузки. Тем не менее, если ваша тема не поддерживает автоматическую генерацию изображений, может потребоваться дополнительная настройка для вывода изображений в нескольких форматах.
Если вы уже использовали эту функцию, поделитесь своим опытом в комментариях!
