I ask for help to solve the problem when optimizing a site, Google pagespeed asks "Use modern image formats" (JPEG 2000, JPEG XR and WebP) tried the format

WebP - it seems to work but it turned out that it does not display in Firefox, Safari

JPEG 2000 - I can’t put it on the Web at all like a normal image

can someone come across such formats how to work with them correctly or how to output JPEG 2000 to the web, does it even work in other browsers?

  • just use a big 10-20% compression ratio - Jean-Claude
  • pictures seem to have squeezed, I want to raise the figures for pagespeed, but he asks for modern formats, it turns out he forces me to display partially non-working pictures - Evgeny Kolesnik
  • You never know what he asks, you also have to think with your head, find a balance for yourself - either the highest score of Google or comfort for users. - Jean-Claude

1 answer 1

You can use the picture tag:

<picture> <source type="image/webp" srcset="path/to/image.webp"> <source type="image/jp2" srcset="path/to/image.jp2"> <source type="image/jxr" srcset="path/to/image.jxr"> <img src="path/to/image.jpg"> </picture>

But the picture tag is also supported in few places, so js will be needed: https://github.com/scottjehl/picturefill It is enough just to connect everything:

 <script async=true src=/path/to/picturefill.js></script> <script async=true src=/path/to/jxr.js></script> <script async=true src=/path/to/jp2.js></script>

But I would not bother and yet YET ignored the recommendations of Google. Maybe in the future this will be possible to return.

UPD from 01/26/2019: an example of webp kickback webp on a web server, for example, Nginx

As a rule, the browser transmits information about supported technologies to the server. For example, Chrome passes such Accept: image/webp, */*;q=0.8 values Accept: image/webp, */*;q=0.8 . Therefore, you can give certain images on the server side.

Nginx example:

 location / { # проверка заголовка Accept и наличия версии файла в .webp if ($http_accept ~* "webp") { set $webp_accept "true"; } if (-f $request_filename.webp) { set $webp_local "true"; } # если WebP есть, то передать Vary if ($webp_local = "true") { add_header Vary Accept; } # если клиент поддерживает WebP, то передать файл if ($webp_accept = "true") { rewrite (.*) $1.webp break; } }

Apache example:

 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

Examples for different web servers can be found here .

  • Thanks for the advice I will consider this moment - Eugene Kolesnik
  • @YevgeniyKolesnik added an answer, it can be useful. - Alexander Semikashev