Определить, поддерживает ли браузер формат WebP? (серверная сторона)

Сегодня вы должны проверить заголовок accept на наличие image/webp. Все браузеры, поддерживающие WebP, будут отправлять это как часть строки принятия для всех запросов (изображений и не изображений). Короче:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
    // webp is supported!
}

(вместо этого вы можете использовать preg_match и добавить проверку границ слов и нечувствительность к регистру, но в реальном мире это должно быть хорошо)

Вот мой первоначальный ответ несколько лет назад, когда вышеизложенное не было надежным.

«Правильный» способ — проверить отправляемый заголовок accept, но ошибка в Chrome означает, что он не будет отображать image/webp, даже если он его поддерживает.

Это соответствующая ветка форума: https://groups.google.com/a/webmproject.org/forum/#!topic/webp-discuss/6nYUpcSAORs

который ссылается на этот багтрекер: https://code.google.com/p/chromium/issues/detail?id=169182, который, в свою очередь, ссылается на этот: https://code.google.com/p/chromium/issues/detail?id=267212

Конечный результат? Хотя это еще не реализовано, вскоре Google Chrome будет явно перечислять image/webp в качестве допустимого типа как для изображений , так и для запросов без изображений. Таким образом, ваш скрипт, который обслуживает HTML, может проверить это. Opera уже отправляет image/webp как часть своего стандартного заголовка accept (опять же, независимо от того, является ли это запросом изображения или нет).

Итак, вы можете проверить так:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
    // webp is supported!
}

(вместо этого вы можете использовать preg_match и добавить проверку границ слов и нечувствительность к регистру, но в реальном мире это должно быть нормально. Вы также можете проверить, по крайней мере, версию 6 Chrome, но почти никто не использует out- актуальная версия, так что толку мало)

Ответ Дэйва хорош, но работает не со всеми браузерами. Я использую этот метод:

function GetBrowserAgentName($user_agent) {
    if (strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR/')) return 'Opera';
    elseif (strpos($user_agent, 'Edge')) return 'Edge';
    elseif (strpos($user_agent, 'Chrome')) return 'Chrome';
    elseif (strpos($user_agent, 'Safari')) return 'Safari';
    elseif (strpos($user_agent, 'Firefox')) return 'Firefox';
    elseif (strpos($user_agent, 'MSIE') || strpos($user_agent, 'Trident/7')) return 'Internet Explorer';
    return 'Other';
}

Итак, после проверки браузера:

  $BrowserAgentName = GetBrowserAgentName($_SERVER['HTTP_USER_AGENT']);
  If ($BrowserAgentName == 'Chrome' || $BrowserAgentName =='Opera') {
  // webp is supported!

  }

Здесь я просто добавляю Opera и Chrome, вы можете использовать более глубокий детектор для версии браузера и добавить больше агентов в свой if{}. Но вам нужно обновить этот код, поскольку браузеры обновляются для поддержки image/webp.

Просто небольшая вещь, которую я заметил в Facebook: их бот facebookexternalhit (тот, который сканирует ваш веб-сайт, когда кто-то публикует на нем адрес) еще не распознает веб-изображения. Поэтому я добавил следующую проверку, чтобы отключить веб-изображения на веб-сайте моего клиента для ботов Facebook:

if (strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "facebook"))
    return false;

В противном случае при совместном использовании веб-страницы будет отображаться неправильное изображение (первый JPG, найденный на странице).

В моем случае я использовал C# Asp.Net MVC. SO не указал технологию, поэтому я обнаружил, что просматриваю эту тему. Для всех, кто случайно столкнулся с этим в поисках подобного, вот решение, которое я придумал:

bool acceptsWebP = Request.AcceptTypes.Contains("image/webp");
string ext = Path.GetExtension(image.ImagePath);
string webP = image.ImagePath.Replace(ext, ".webp");
if (acceptsWebP)
{
    <img class="img-fluid lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="\Uploads\@webP" alt="@item.ProductName">
}
else
{
    <img class="img-fluid lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="\Uploads\@image.ImagePath" alt="@item.ProductName">
}