Подключаем картинки WEBP

Статья для панели управления ISP Manager 6.

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

На всякий случай перед правками конфигурационного файла, сделайте бэкап всего что там написано себе на компьютер.

Дальше перед вторым

server {

вставляете

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Вот скрин

Дальше после

root $root_path;
	location /

Вставляете

{
    	location ~* ^.+\.(png|jpe?g)$ {
            add_header Vary Accept;
            try_files $uri$webp_suffix $uri =404;
            expires max;
        }

Вот скрин

Дальше нужно нажать кнопку сохранить

Все, сервер мы настроили.

Да, так просто)

Теперь достаточно положить рядом с картинкой картинку в формате webp и она будет отдаваться браузеру если устройство поддерживает webp.
В коде будет подключена картинка 1_0.png, а по факту будет подгружена картинка 1_0.png.webp
Чтоб убедится в этом попробуйте скачать картинку, увидите что скачивается уже webp.

Пример для понимания:

Это работает для любых картинок на сервере.


Как переделать массово картинки в webp?

Есть программа XnView MP

С ее помощью можно выбрать несколько картинок и сделать пакетную обработку.

Для .png картинок рекомендуем ставить следующие настройки.
Качество 100%.

Для .jpeg картинок рекомендуем ставить следующие настройки.
Качество 90%. если больше, то разница между размерами будет не так заметна.

Когда подготовите картинки, закачайте их на сервер.

1 лайк

Спасибо- попробуем, хотя, с первого взгляда, кажется трудоемким в части того, что файлы webp должны иметь те же названия, что и jpeg на серевере, которые были автоматически переименованы сервером в момент загрузки. в то время как на компьютере лежат файлы с другими названиями, попробуй разберись)

Что мешает скачать файлы с сервера в отдельную папку?

1 лайк

Если они еще раз сервером не пережаты во время первой закачки, то да- выход.

Если вы про картинки товаров, то в папке \images\product_images\original_images
лежат оригинальные картинки без обработки, при большом желании :wink: можно взять их, нарезать нужного размера без сжатия и сделать для них webp

Тогда уж надо поле в админке добавить для паралельной загрузки на сервер сразу и webp вместе с jpeg при первичном размещении товара.

Возможно в будущем так и будет, пока есть такой вариант :wink:

Попробуем, спасибо

1 лайк

Во всех вложенных папках images сделать рекомендуется, или кроме product_images другие папки лучше не трогать?

Скриншот 16-11-2022 121257

Попробовал на одной карточке с 4 фото, уменьшение веса примерно процентов на 40 у попапов и иконок не показало статистически достоверного увеличения скорости проверки pagespeed, пожалуй, оставлю все как есть.

Думаю имеет смысл сделать для превью категорий, баннеров и слайдов.

images\product_images\thumbnail_images
images\banner
images\slider

Для баннеров еще полезно что меньше разметки кода нужно, просто рядом картинку в webp.

Картинки попапов не рекомендую делать, чтоб качество не потерять.

Для категорий и главной с баннерами заметно на глаз на мобильных.

1 лайк

Стоит что-то менять или оставить как есть?

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->

<source data-srcset="images/slider/1/1x3840x760.webp" media="(min-width: 1920px)" type="image/webp">
<source data-srcset="images/slider/1/1x2800x650.webp" media="(min-width: 1366px)" type="image/webp">
<source data-srcset="images/slider/1/1x2048x560.webp" media="(min-width: 1024px)" type="image/webp">
<source data-srcset="images/slider/1/1x1280x460.webp" media="(min-width: 640px)" type="image/webp">

<source data-srcset="images/slider/1/1x3840x760.jpg" media="(min-width: 1920px)">
<source data-srcset="images/slider/1/1x2800x650.jpg" media="(min-width: 1366px)">
<source data-srcset="images/slider/1/1x2048x560.jpg" media="(min-width: 1024px)">
<source data-srcset="images/slider/1/1x1280x460.jpg" media="(min-width: 640px)">

<!--[if IE 9]></video><![endif]-->
<img class="sw-lazy" data-src="images/slider/1/1x640x360.jpg" alt="Адаптивный интернет- 
магазин для продажи любых товаров">
</picture>
<div class="sw-lazy-preloader"></div>

получается так адреса поменяются у абсолютно всех картинок,из статей и т.д, и надо их все конвертировать, вот это сложность, учитывая что они могут быть разбросаны по разным папкам…
жаль что это не только для картинок, такой рецепт.
да и не факт, что на каких-то хостингах такое позволят сделать

Да, можно вот это убрать

<source data-srcset="images/slider/1/1x3840x760.webp" media="(min-width: 1920px)" type="image/webp">
<source data-srcset="images/slider/1/1x2800x650.webp" media="(min-width: 1366px)" type="image/webp">
<source data-srcset="images/slider/1/1x2048x560.webp" media="(min-width: 1024px)" type="image/webp">
<source data-srcset="images/slider/1/1x1280x460.webp" media="(min-width: 640px)" type="image/webp">

только переименовать картинки которые в webp не забудьте.

Вы видимо не поняли фишку.
В том то и дело что никаких правок в код на стороне сайта делать не нужно.
Названия картинок как были в коде так и останутся.

Сервер посмотрит есть ли файл с названием картинки в vebp и устройство поддерживает vebp если есть отдаст его по запросу файла картинки.

Пример: файл картинки 1.png достаточно положить рядом картинку 1.png.webp и все.

Как раз только для картинок .png и .jpeg

Тут уже вопрос к хостингу.

Спасибо

У маленьких 6 баннеров

<picture>
  <source srcset="images/banner/banner1.webp" type="image/webp">
  <source srcset="images/banner/banner1.jpg" type="image/jpeg"> 
  <img src="images/banner/banner1.jpg" alt="Игрушки">
</picture>

это <source srcset="images/banner/banner1.webp" type="image/webp"> можно убрать?

ISP Manager, который позволяет по инструкции все сделать самому, есть у подавляющего числа хостингов- это самая продвинутая и распространенная панель управления хостингом, только где-то ее стоимость входит в стоимость пакета, а где-то, чаще, ее можно подключить вместо бесплатного малофункционального аналога за отдельную плату,

Для них достаточно оставить только

<img src="images/banner/banner1.jpg" alt="Игрушки">
1 лайк

Получается если webp не будет на сервере, будет выдана картинка как и раньше? та которая и задумана?
мой вопрос был не про изменения в коде, а именно про то- принудительно ли будет сервер webp все искать, или будет выдавать только тогда когда есть…иначе много будет пустых мест на картинках

Если нет webp, то будет показывать jpeg или png- пустых мест не будет

2 лайка