Modern image formats JPEG 2000, JPEG XR and WebP

Question

Modern image formats JPEG 2000, JPEG XR and WebP

I ask for help to solve the problem when optimizing the 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 display it on the Web at all as a normal image

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

4

php веб-программирование webp

Author: Alexander Semikashev, 2018-12-04

Source

1 answers

score 13 · Accepted Answer

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>

UPD from 26.01.2019: example of implementing the return webp on the web server side, for example Nginx.

As a rule, the browser sends the server information about the supported technologies. For example, Chrome passes the following values to 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.