Определение поддержки WebP с помощью JavaScript

Быстрый ответ

Для проверки поддержки формата изображений WebP вашим браузером воспользуйтесь следующим простым фрагментом кода на JavaScript:

const testWebP = new Image();
testWebP.onload = testWebP.onerror = function() {
    console.log('Поддержка WebP:', testWebP.width === 1);
};
testWebP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' +
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';

Этот код позволяет незамедлительно определить поддерживает ли текущий браузер формат WebP.

Подробное объяснение

Разбираем быстрый тест

Рассмотрим подробнее приведенный выше скрипт:

1. Создаем экземпляр Image.
2. Назначаем обработчики для событий onload и onerror, которые срабатывают в зависимости от результата.
3. Вставляем в атрибут src данные изображения WebP, закодированные в формате base64.
4. Выявляем поддержку формата WebP в результате загрузки изображения и отображаем соответствующий статус.

Подробнее об этом расскажет наш спикер на видео

Использование canvas для проверки в старых браузерах

Canvas — это дополнительный способ проверки поддержки WebP. С его помощью можно проверить работу браузера с canvas:

const canvas = document.createElement('canvas');
if (canvas.getContext && canvas.getContext('2d')) {
    // Браузер поддерживает рисование на канвасе 🎨
    // Можно начинать рисовать!
}

Если canvas не поддерживается, рекомендуется использовать альтернативные методы, такие как Modernizr или элемент <picture>.

Работа с элементом <picture> HTML5

С помощью элемента <picture> вы можете предложить альтернативные версии изображений в случае, если WebP не поддерживается:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Альтернативное изображение для браузеров без поддержки WebP 🍰">
</picture>

Таким образом, разные браузеры получат подходящую для них версию изображения.

Использование кэширования для оптимизации рабочего процесса

Не забывайте о принципе DRY (Don't Repeat Yourself – "Не повторяй себя") и кэшируйте результаты проверки поддержки WebP, чтобы оптимизировать использование ресурсов. Если проверка уже была выполнена ранее, используйте сохраненный результат:

let webpSupport;

function checkWebP(callback) {
    if(webpSupport !== undefined) {
        // Я уже знаю ответ и быстро отвечаю! 🧠
        return callback(webpSupport);
    }
    // в противном случае делаем проверку, как в обычном режиме…
}

Ваш процессор будет вам благодарен.

Детальное исследование возможностей формата WebP

WebP предлагает различные возможности, такие как 'lossy', 'lossless', 'alpha', 'animation'. Проверить каждую из них можно, используя определенные тестовые изображения. Будьте точны в своих запросах.

Обработка колбэков и асинхронности

JavaScript — это постоянная работа с асинхронностью. Используйте колбэки или Promise для контроля асинхронного поведения при проверке поддержки WebP:

function checkWebPSupport() {
    return new Promise((resolve) => {
        if(webpSupport !== undefined) 
            resolve(webpSupport);
        // проводим обнаружение, как обычно...
    });
}

Продвинутые техники

Асинхронная загрузка изображений в сложных веб-приложениях

В сложных веб-приложениях целесообразно использовать асинхронную загрузку изображений, чтобы не блокировать основной поток:

function detectWebPSupportAsync() {
    return new Promise((resolve) => {
        const testImage = new Image();
        testImage.onload = () => resolve(testImage.width === 1);
        testImage.onerror = () => resolve(false);
        testImage.src = // данных изображения WebP в формате base64...
    });
}

Особенности работы разных браузеров

Не забывайте, что браузеры работают по-разному! Например, в Firefox 65 есть определенные проблемы с синхронным определением поддержки WebP. Продумывайте тщательно этот момент в своем коде.

Доступность — приоритет

Поддержка формата WebP не освобождает вас от необходимости соблюдения лучших практик веб-доступности. Не забывайте использовать атрибут alt для изображений, чтобы пользователи с программами чтения с экрана могли полноценно воспринимать содержание вашего сайта:

<img src="image.webp" alt="Подробное описание, словно идиллия">

Визуализация

Обзор поддержки формата WebP разными браузерами:

Прежде чем использовать формат WebP, убедитесь в его совместимости:

if (canUseWebP()) {
    // 🟢 Можем спокойно использовать WebP
} else {
    // 🔴 Стоит воспользоваться форматами JPEG или PNG
}

Помните, что поддержка различных возможностей всегда на вахте! 🚦

Полезные материалы

1. Руководство по типам и форматам изображений на MDN
2. Страница WebP от разработчиков Google
3. Репозиторий Modernizr на GitHub
4. Статья Cloudflare о WebP и новогоднем настроении
5. Инструкция по переводу изображений в формат WebP от Smashing Magazine