Webp vs Safari как подружить?

Question

[Xapu3ma]

Добрый день!
Есть сайт на html+css+bootstrap+js, простая статика, ничего особенного.

Гугл рекомендует web.dev использовать новые форматы для картинок, например webp. С этим форматом действительно получается хорошее сжатие для изображений, и по показателям от web.dev загрузка сайта происходит быстрее.

Яндекс на своем дзене тоже все пережимает в формат webp.

Но вот safari его не поддерживает.

Как быть? Отказываться от webp и терять скорость загрузки? Нагромождать сложную логику не хочется. Может быть есть какие-то простые решения, когда ты используешь везде webp, а именно для safari будешь отдавать jpeg? Подскажите как такое реализовать?

Answer 1

[RAX7]

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Comments

[Xapu3ma]

то что нужно!) я сначала не вкурил как работает этот picture, а потом понял, что движок браузера сам определяет, если формат поддерживается берет его, если нет то основной img. Спасибо за подсказку)

Answer 2

[koekaverna]

1. Нужен скрипт который будет конвертировать png и jpg в webp и складывать с тем же именем и постфиксом .webp
2. При запросе файла .*\.(png|jpe?g)$ проверить заголовки Accept: image/webp, если нет отдать оригинал картинки. Иначе идём дальше.
3. Пробовать отдать сначало $uri.webp
4. Если файла нет то выполнять скрипт с параметром $uri
5. Скрипт создает .webp и выводит его

Смотреть в сторону https://github.com/rosell-dk/webp-on-demand

Пример конфига для nginx:

location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    $uri.webp
    /webp-on-demand.php?xsource=x$request_filename
    ;
}

Comments

[toha_man]

SeokkySss, при чем тут вордпрессер совсем не понял. человек предложил хорошее решение, в отличии от вашего комента. да и логику не понимаю - дал логичное решение = вордпрессер оО

[Dealaxer]

Костыль на костыле, такая чушь!