X
X
Xapu3ma2019-03-06 10:55:13
safari
Xapu3ma, 2019-03-06 10:55:13

Webp vs Safari how to make friends?

Good afternoon!
There is a site on html + css + bootstrap + js, simple statics, nothing special.
Google encourages web.dev to use new image formats like webp. With this format, you get really good compression for images, and according to web.dev, the site loads faster.
Yandex, on its Zen, also compresses everything into the webp format.
But safari doesn't support it.
How to be? Abandon webp and lose download speed? I do not want to pile up complex logic. Maybe there are some simple solutions when you use webp everywhere, namely for safari will you give jpeg? Tell me how to implement this?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
RAX7, 2019-03-06
@Xapu3ma-NN

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

K
koekaverna, 2019-08-02
@koekaverna

1. We need a script that will convert png and jpg to webp and add them with the same name and postfix .webp
2. When requesting a .*\.(png|jpe?g)$ file, check the headers Accept: image/webp, if not return original picture. Otherwise, we move on.
3. Try to give $uri.webp first
4. If the file does not exist, then execute the script with the $uri parameter
5. The script creates .webp and outputs it
Look aside https://github.com/rosell-dk/webp-on-demand
Example config for 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
    ;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question