WebP — будущее изображений, которое уже наступило. WebP в SEO

WebP — будущее изображений в интернете, которое уже настало

• В API появилась опция передачи геопозиции примерного местоположения, а не точного;
• Поддержка HDR video. Режим картинка в картинке для тега video. Улучшения в части работы progressive web application;
• Поддержка HTTP/3. Но пока только при включении соответствующего флага.

Преимущества WebP

• В сравнении с PNG при сжатии без потерь файл по размеру меньше на 24%;
• В сравнении JPEG при сжатии с потерями файл по размеру меньше на 25-34%.

WebP в поисковой оптимизации сайтов

• Улучшение показателя конверсии посредством повышения скорости. Уменьшение расходов пользователя на трафик;
• Поисковая оптимизация сайта за счет повышения скорости загрузки и улучшения поведенческих факторов;
• Оптимизация ресурсов. Уменьшение нагрузки на сервер сайта. Уменьшение расходов на исходящий трафик.

Как внедрить WebP на сайте?

• Если браузер поддерживает WebP, то на странице выводить WebP;
• Если браузер не поддерживает WebP, то выводить JPG.

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

Выводы