Получите этот Hundo 💯 (Часть 2) - Используя WebP, не опасаясь поддержки браузера

В моем предыдущем посте мы увидели, как я смог улучшить свои результаты маяка, отойти от Font-Awesome и использовать SVG-спрайты. Мы остановились в прошлый раз, когда я получил забивание маяка внизу

Во второй части «Получите That Hundo», я поделюсь с вами, как я смог реализовать одну из оптимизаций, рекомендованных Lighthouse:

Использование формата изображения следующего поколения

Одним из предложений, сделанных Маяком, было использовать формат изображения следующего поколения, который меньше по размеру. Некоторые из этих форматов изображений webp , JPEG XR или JPEG 2000 Анкет Зачем вообще служить вашим изображениям в этом формате? Ну, эти форматы изображений являются превосходными как в сжатии, так и в качестве по сравнению с их предшественниками Png и Jpeg Анкет

Из трех форматов следующего поколения я выбрал WebP, потому что он поддерживается в большем количестве браузеров, в настоящее время он разрабатывается Google, а также поддерживает сжатие как с потерями, так и без потерь.

Чтобы преобразовать изображения в WebP, мы можем легко использовать такие сайты, как webp-converter.com Анкет Этот конкретный инструмент даже имеет возможность выполнять сжатие без потерь или убыточного.

Теперь при использовании WebP основной проблемой, с которой вы сталкиваетесь, является совместимость браузера. Webp даже не поддерживается на Safari, за исключением последней версии, которая на момент написания этого блога составляет 14. Вот где HTML <рисунок> Тег вступает в игру.

Тег изображения берет один тег и ноль или более источников в детском элементе. <рисунок> Затем тег автоматически выберет источник изображения, который будет соответствовать браузеру пользователя или другим условиям, таким как максимальная ширина экрана, если все источники не соответствуют условиям, он будет отступать в Источник тега. Ниже приведен код, показывающий вам, как мы могли бы воспользоваться этим:

Теперь мы можем обрабатывать изображения в нашем HTML таким образом, но как насчет фоновых изображений, которые установлены стилем CSS. Есть решение для этого.

В Google Developers WebP FAQ Страница Уже есть реализация ванильного JavaScript, чтобы проверить, поддерживает ли браузер форматы WebP. Реализованный код принимает небольшую часть определенного изображения WebP (то есть потерянного или без потерь) и пытается расшифровать, что если операция успешна, это означает, что браузер поддерживает изображения WebP. Функция реализована таким образом

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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];
}

Давайте посмотрим, как мы можем воспользоваться этой функцией для отображения других форматов для браузеров, которые не WebP. Первое, что нам нужно сделать, это создать один обычный стиль CSS с фон WebP и еще один стиль с фоном PNG.

.full-screen-hero {
  background-image: url("../assets/header-background.webp");
}

.full-screen-hero.no-webp {
  background-image: url("../assets/header-background.png");
}

Далее мы проверяем, поддерживает ли браузер WEBP на загрузке окна, и добавляем .no-webp класс, если это не поддерживает это. Я буду использовать без потерь Проверка функций для сейчас, потому что это было так, как я преобразовал свое фоновое изображение в WebP.

window.onload = function () {
    check_webp_feature('lossless',  function(feature, success){
        if(!success){
            // Recurse theough elements with WebP background and add the no-webp class 
            fullScrenHero.forEach(function(bgElement){
                bgElement.classList.add('no-webp');
            })
        }
    });
}

Эта оптимизация не оказала большого влияния на оценку производительности маяка, потому что я уже использовал WebP в качестве фонового изображения перед всем этим Но теперь я смог решить проблемы совместимости в Safari.

Вот и теперь, сайт готов обслуживать WebP в поддержку браузеров и PNG в браузерах, которые не поддерживают Webp.

Оригинал: “https://dev.to/abdulhamidoumer/get-that-hundo-part-2-using-webp-without-fearing-browser-support-4dck”

Использование формата изображения следующего поколения

Читайте ещё по теме: