WebP не открывается в старых браузерах: как добавить fallback без дублей

Современные браузеры поддерживают WebP, но старые версии и некоторые встроенные webview могут показать пустое место. Надежный сайт не определяет браузер по user-agent, а предоставляет несколько форматов через HTML picture или корректное согласование содержимого.

Для обычной страницы используйте picture: WebP/AVIF в source, исходный JPEG/PNG в img. Сервер должен отдавать правильный Content-Type, CDN — различать варианты, а fallback сохранять размеры, alt и визуальное качество.

Что проверить в первую очередь

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

• Проверьте файл напрямую и Content-Type image/webp.
• Посмотрите итоговый HTML: есть ли img fallback внутри picture.
• Проверьте CDN/cache key и заголовок Vary, если формат выбирает сервер.
• Уточните конкретную версию браузера/webview и поддержку picture.

Почему возникает проблема

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

• В img указан только .webp без альтернативы.
• Сервер отдает WebP как application/octet-stream или text/plain.
• CDN закешировал WebP и отдает его клиентам без поддержки.
• Polyfill загружается позже изображения или ломается CSP.
• URL fallback существует, но возвращает тот же WebP после rewrite.

Пошаговая диагностика

Диагностику проводите на тестовой записи или отдельном окружении. В журналах скрывайте токены, пароли и персональные данные. Для каждого шага сохраняйте измеримый результат: идентификатор события, код ответа, версию записи, состояние процесса или контрольную сумму.

• Откройте Network и сравните URL, status, Content-Type и decoded preview.
• Отключите CDN и проверьте origin на тестовом домене.
• Запросите варианты с разными Accept и проверьте Vary: Accept.
• Проверьте HTML без JavaScript.
• Сравните размеры и aspect ratio fallback/modern форматов.

Два надежных способа fallback

HTML picture проще и прозрачно кешируется. Серверное content negotiation полезно для существующих URL, но требует аккуратной настройки CDN.

• В picture браузер сам выбирает первый поддерживаемый source.
• Последний img обязателен и содержит src, alt, width и height.
• При negotiation один URL может отдавать разные bytes только при корректном Vary/cache key.
• Форматы генерируются из одного исходника с контролем качества и цветового профиля.
• SEO и accessibility опираются на img/alt, а не на CSS background для смыслового изображения.

Как исправить проблему

Исправление лучше разбить на небольшие обратимые изменения. Сначала устраните подтвержденную причину, затем повторите исходный сценарий и проверьте соседние функции. Массовую обработку данных запускайте на ограниченной выборке с отчетом и только после сверки расширяйте на весь объем.

• Добавьте JPEG/PNG fallback в img и WebP/AVIF в source.
• Настройте MIME types и удалите rewrite, подменяющий fallback.
• Исправьте CDN cache variation или используйте разные URL форматов.
• Сгенерируйте размеры/качество с проверкой прозрачности и цветового профиля.
• Оставьте lazy loading и responsive srcset согласованными для всех форматов.

Безопасный порядок внедрения

• Сохраните затрагиваемые данные, конфигурацию и текущие журналы, заранее проверив способ отката.
• Повторите проблему на тестовом объекте без реальных списаний, рассылок и изменений клиентских данных.
• Внесите одно логическое изменение и зафиксируйте его в системе контроля версий или журнале работ.
• Не отключайте авторизацию, валидацию, шифрование и другие защитные механизмы ради быстрого исчезновения ошибки.
• После выкладки контролируйте логи, метрики и полный пользовательский сценарий, а не только один успешный запрос.

Как проверить результат

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

• Современный браузер загружает WebP, старый — JPEG/PNG.
• При отключенном JavaScript изображение и alt остаются доступными.
• CDN не отдает формат вопреки Accept клиента.
• Layout не прыгает, качество и прозрачность соответствуют исходнику.

Типичные ошибки при исправлении

• Определять поддержку только по user-agent.
• Менять расширение файла на .jpg без перекодирования.
• Использовать один cache key для разных форматов.
• Удалять исходники после конвертации без возможности пересоздания.

Как предотвратить повторение

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

• Автоматизируйте генерацию форматов из мастер-изображения.
• Добавьте browser matrix/webview в визуальные тесты.
• Проверяйте Content-Type и размеры в CI.
• Мониторьте ошибки загрузки изображений и cache hit по формату.

Что подготовить для технического разбора

• Описание ожидаемого и фактического поведения, а также точную последовательность действий.
• Время проблемы, идентификатор тестового объекта и версии затронутых компонентов.
• Фрагменты журналов до и после ошибки без секретов и персональных данных.
• Перечень последних изменений и уже выполненных проверок.
• Безопасный доступ к тестовой среде или способ воспроизвести сбой без влияния на клиентов.

Частые вопросы

Нужен ли JavaScript-polyfill?

Обычно нет, если использовать picture с img fallback. Это работает декларативно и надежнее при отключенном JS.

Можно ли отдавать WebP по тому же .jpg URL?

Можно через negotiation, но CDN и proxy обязаны учитывать Accept. Разные URL проще диагностировать и кешировать.

Когда нужна помощь специалиста

Если после оптимизации изображения пропали в части браузеров, я могу проверить HTML, MIME, CDN и генерацию форматов, добавить надежный fallback без ухудшения скорости и качества.