logo

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

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

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

JS
Скопировать код
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:

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

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

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

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

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

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

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

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

JS
Скопировать код
let webpSupport;

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

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

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

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

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

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

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

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

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

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

JS
Скопировать код
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 для изображений, чтобы пользователи с программами чтения с экрана могли полноценно воспринимать содержание вашего сайта:

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

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

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

БраузерПоддержка формата WebPСигнал
ChromeДа🟢
FirefoxДа🟢
IEНет🔴

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

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

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

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

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