Сколько у вас будет IF в коде?
Не обязательно каждый раз делать проверку, пишем один раз функцию
<?
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' )!== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' )!== false )
{
$webp_support = true; // webp поддерживается
} else {
$webp_support = false; // webp не поддерживается
}
function alternateImg ($value,$webp_support)
{
$info = pathinfo($value);
$src = $info['filename'];
$ext = ($webp_support === true)? '.webp' : '.jpg';
$img = $src.$ext;
return $img;
}
?>
а в коде вызываем так:
<?
$img = '/path/to/images/picture-1.webp'; // путь к картинке берем из БД, пляшем от .webp, альтернативная картинка должна быть с таким же именем
?>
<div class="slide" style="background-image: url(/path/to/images/<? echo alternateImg ($img,$webp_support); ?>);">
</div>
В div class="slide" как раз пример верстки, где <picture></picture> ну никак не вставишь, либо переверстывать
И гнаться за пейдспидом )) такое себе удовольствие ) сколько вам надо от него 100 баллов в мобильной версии?
Нормально настроенное кэширование статики угоняет пейдспид обычно в 80 баллов куда больше?
Вот как раз сейчас такой проект, где в ТЗ есть четкий пункт: "Показатели Google Page Speed должны быть в зеленой зоне", а на одной только главной странице 5 картинок в слайдере (полноэкранном, размер картинок 1920*800, даже в очень сжатом виде весят от 120Кб (webp примерно 60Кб), и на самой странице где то 20-25 картинок, в том числе и фоновые. Кэш и LazyLoad не втащат полюбому такую страницу в зеленую зону. Сжатие JS и CSS тоже. Вот приходится плясать с бубнами))