WordPress + webp. Без лишних слов

Скачиваем плагин  WebP Converter for Media и активируем его.

Можно поиграться с настройками, но они там по умолчанию выставлены нормальные.

Всё, теперь все изображения при загрузке будут создавать копию себя же в webp формате.

Вывод через <picture>.

Теперь нам на сайте нужно вывести изображение в webp формате. Для этого в коде вместо вывода <img> вставьте следующий код:

<picture class="picture">
    <?php 
          $image_src = wp_get_attachment_url( get_post_thumbnail_id(), 'medium' );
          $webp_url = str_replace("uploads", "uploads-webpc/uploads", $image_src) . '.webp'; ?>
    <source srcset="<?php echo $webp_url; ?>" type="image/webp" />
    <source srcset="<?php echo $image_src; ?>" type="image/jpeg" />
    <img src="<?php echo $image_src; ?>" alt="" />
</picture>

Где $image_src – путь к файлу стандартного формата jpg/png.

Если по каким-то причинам webp изображений может не быть, можно сделать с проверкой на существование:

<picture class="picture">
    <?php 
          $image_src = wp_get_attachment_url( get_post_thumbnail_id(), 'medium' );
          $webp_url = str_replace("uploads", "uploads-webpc/uploads", $image_src) . '.webp';
          $webp_path = str_replace(get_home_url() . '/', "", $webp_url);
    if (file_exists($webp_path)) { ?>
       <source srcset="<?php echo $webp_url; ?>" type="image/webp" />
    <?php } ?>
    <source srcset="<?php echo $image_src; ?>" type="image/jpeg" />
    <img src="<?php echo $image_src; ?>" alt="" />
</picture>

Готово. Теперь будет выводиться тег picture с нужным форматом. Единственное, этот способ не подойдет для вывода изображений из WordPress редактора.

Если плагин выдает ошибку.

В зависимости от настроек хостинга или сервера плагин может выдавать ошибку. В этом случае лучшее решение это написать в поддержку вашего хостинга, описав данную проблему. Иногда помогает. Но мне однажды это не помогло — в тех поддержке мне культурно ответили что они ничего не будут исправлять, мол, если мне нужно управлять настройками, то чтобы переходил на VDS. В таком случае можно попробовать в настройках плагина поставить вот этот вариант:

Настройка режима загрузки изображений

Но тогда код вывода для такого варианта будет следующий:

<picture>
    <?php 
         $image_src = get_the_post_thumbnail_url(get_the_ID(), 'full');
         $webp_url = str_replace("uploads", "uploads-webpc/uploads", $image_src);
         $webp_path = "/" . str_replace(get_home_url() . '/', "", $webp_url) . ".webp"; ?>
    <source srcset="<?php echo $webp_path; ?>" type="image/webp" />
    <source srcset="<?php echo $image_src; ?>" type="image/jpeg" />
</picture>

Если вы знаете способ лучше, напишите пожалуйста в комменты.