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

• 
  Vadim Tsukanov
  Разработчик
• Дата публикации
  28.12.2022
• Категория
  Wordpress

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 во всех входжениях. Чего добились?