Firefox больше не включает в заголовок HTTP_ACCEPT формат image/webp?

Здравствуйте. <br/> Ранее я использовал заголовок HTTP_ACCEPT для определения поддержки браузером формата webp: если заголовок содержал "image/webp", то отдавал изображение в этом формате, иначе - jpg. <br/> <pre><code class="php">if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// Поддерживает
}</code></pre> <br/> Однако сейчас у меня Firefox версии 132.0.2, и в заголовке не указан "image/webp". Кажется, Firefox считает этот заголовок несущественным, и поддержка webp подразумевается по умолчанию? <br/> Я также пробовал на одном проекте предоставлять только webp, но некоторые пользователи сообщали о том, что "картинки не загружаются". <br/> Как сейчас лучше всего определять поддержку webp на бэкенде?
  • 22 ноября 2024 г. 21:03
Ответы на вопрос 2
С учетом изменений в браузерах и их поддержке форматов изображений, таких как WebP, может возникнуть ситуация, когда заголовок `HTTP_ACCEPT` не будет содержать ожидаемого значения для проверки поддержки формата. Хотя браузеры, такие как Firefox и Chrome, довольно активно поддерживают WebP, их поведение относительно заголовка может меняться.

Ваша проблема может быть связана с тем, что не все пользователи имеют актуальную версию браузера, поддерживающую WebP, а также с настройками браузеров и предпочтениями на стороне пользователя. Чтобы в более надежном режиме определять поддержку WebP на бэкенде, вы можете использовать несколько подходов:

### 1. Использование JavaScript
Вы можете проверить поддержку WebP на стороне клиента, используя JavaScript, и затем отправить соответствующий запрос на сервер:

```javascript
function supportsWebP(callback) {
    const img = new Image();
    img.onload = function() {
        callback(true);
    };
    img.onerror = function() {
        callback(false);
    };
    img.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAABAAEAAwAAABAAZ9QHABAAAAAA";
}

// Использование
supportsWebP(function(supported) {
    if(supported) {
        // Загрузка изображений в формате WebP
    } else {
        // Загрузка изображений в формате JPEG
    }
});
```

### 2. Использование `<picture>` и `<img>`
HTML5 предоставляет элемент `<picture>`, который позволяет указать несколько источников изображений в разных форматах:

```html
<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Image description">
</picture>
```

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

### 3. Проверка через JavaScript с последующей серверной логикой
Считайте флаг поддержки WebP на клиенте и отправьте его на сервер с помощью AJAX или в скрытом поле формы. На сервере вы можете адаптировать ответ в зависимости от полученных данных.

### 4. Заголовок `Accept` как доп. проверка
Если вы все же хотите использовать заголовок `HTTP_ACCEPT`, можно дополнительно проверять наличие других значений, помимо `image/webp`, а также рассмотреть возможность ведения таблицы "флагов" для различных браузеров, если это будет оправдано.

### Резюме
Метод проверки поддержки WebP сильно зависит от вашей аудитории и специфики проекта. Наиболее универсальным и гибким решением на сегодняшний день является использование HTML `<picture>`, который позволяет браузеру автоматически выбирать наиболее подходящий формат изображения.
Специально обновил панду, проверил. У меня этот заголовок отправляет: 
Может у вас запрос построен так, что браузер не понимает, что запрашивается картинка?
Похожие вопросы