Подключаем webp на сайты с поддержкой старых браузеров

  • Vadim Tsukanov
    Разработчик
  • Дата публикации
    28.12.2022
  • Категория
    Wordpress
Задача:Перейти на расширение WebP, но сохранить работу сайта на старых браузерах

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

Итак, каким образом мы будем конвертировать в webp — вопрос открытый, я использовал xnConverter, который на чипе M1 переконвертил 40к файлов, минут за 10. А вот дальше — самое интересное.

Логика работы то понятна, необходимо вместо jpg и png подставлять webp расширение. Но что делать, если браузер не поддерживает webp?  — оставляем фоллбэк… а как? Тут нам и тег picture может помочь. Однако, если у вас очень много картинок, то мы нагенерим огромное число узлов в html и это даст больше негатива, чем позитива для SEO. Поэтому выбор 1 — на сервере проверять, умеет ли браузер в webp.

function isWebPSupported(){
    if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
        return true;
    }else{
        return false;
    }
}

Вот таким методом можно легко проверить, поддерживает ли браузер webp. Буду рад, если кому-то понадобится. На сайте https://region82.su полная реализация выглядит так:

if(isWebPSupported()){
    echo getWebPImageUrl(get_the_post_thumbnail(get_the_ID(),'post-card',array('class' => 'lazy')));
}else{
    the_post_thumbnail('post-card',array('class' => 'lazy'));
}

А вот getWebPImageUrl делает следующее:

function getWebPImageUrl($imageCode)
{
    $search  = array('.jpg', '.jpeg', '.png');
    $replace = array('.webp', '.webp', '.webp');
    $image =  str_replace($search, $replace, $imageCode);
    return $image;
}

Иными словами — мы оставили весь натив от wordpress, который пилит кучу src-set и прочих аттрибутов, и просто меняем расширение файла на webp во всех входжениях. Чего добились?

2 Комментариев
  • muzanaka
    2023-01-08 11:23:58

    Добрый. Да, после конвертации у вас будут и jpeg и webp файлы. После - в месте вызова картинок для поста - можете вызывать getWebPImageUrl и все. Если вы хотите повсеместно изменить - можно написать фильтр (хук). Для изменения формата изображения. В текущей реализации вам необходимо в файлах заменить get_the_post_thumbnail на if(isWebPSupported()){ echo getWebPImageUrl(get_the_post_thumbnail(get_the_ID(),'post-card',array('class' => 'lazy'))); }else{ the_post_thumbnail('post-card',array('class' => 'lazy')); }

  • Александр
    2023-01-06 21:55:54

    Добрый день, Вадим! Возможно ли более подробнее описать решение данной задачи. Т.е. после конвертации в медиа библиотеке должны быть два формата файла и jpg и webp и в какие файлы необходимо добавить код? Заранее благодарен!

Оформить заказ в Devstages