Why does Google offer me JPEG 2000, JPEG XR and WebP instead of JPEG and PNG and how do I optimize the image?

Question

Google

Hello. PageSpeed ​​Insights told me that I had poor site optimization and advised me to change the image type to JPEG 2000, JPEG XR or WebP

I opened the list of supported browsers they gave
https://caniuse.com/#feat=jpeg2000
https:/ /caniuse.com/#feat=jpegxr
https://caniuse.com/#feat=webp
As a result, as I understand it, webp has the most support, but look: neither ios nor safari has support. On these browsers, the image will not open at all? What to do then?
And question 2: how to optimize the image without losing quality so that this jamb does not exist? Is there any more appropriate format?

Answer 1

google the picture and imgsrc tags,
you just need to pass a link to webp and a regular jpeg at the same time, and then a browser that can webp (read "weppy" correctly) will show it. And the rest will show the usual zhpeg. The link to the image for the retina is indicated in the same place, therefore it will be displayed on the retina in high resolution, and the rest will show the usual flicker.
Something like this.
Zyzh about Zhpeg2000 and ZhpegHR forget. They tried to pedal, but apart from the webp, nothing really caught on.

Answer 2

I’ll tell you about myself, I made such a trick on vps, when wordpress throws a picture, a regular jpg, into the uploads folder, then optimization starts, namely, 2 files are created:
webp and mozjpeg (essentially the same jpeg only optimized).
And on the site, through picture I prescribe both formats and the one that is supported is loaded.
You can see more about picture:
https://www.youtube.com/watch?v=gHLPBlzGRT8
PS. My ratings are 100/100

Answer 3

in ios works with type attribute
<source type="image/webp" srcset="/img.webp">

Answer 4

Vincent Orback Suggested this: use a JPEG to WebP replacement using mod_rewrite. To do this, add the following lines to .htaccess:

<IfModule mod_setenvif.c>
  # Vary: Accept for all the requests to jpeg and png
  SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

If the browser works with the webp format, then we check if there is a file on the server with the same name, but with the .webp extension, and if so, return it instead of the requested one. If not, we give the file as usual.
Thus, we get that nothing needs to be changed in the HTML code of the site, but it is enough to convert graphics files to WebP.
Among the shortcomings of this solution, one can only name a slight increase in the load on the server disk system due to the need to check the existence of two files, and not one.

Answer 5

squoosh.app

Answer 6

I decided to ask what they think about the issue in Bitrix (link to the topic in the forum https://dev.1c-bitrix.ru/community/forums/forum6/t... I have not received an answer yet.
Of the listed solutions, I consider the original one suggested by Vitaly with htaccess