Современные форматы изображения JPEG 2000, JPEG XR и WebP

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

прошу помощи решить проблему при оптимизации сайта ,  гугл pagespeed просит "Используйте
современные форматы изображений" (JPEG 2000, JPEG XR и WebP) 
попробовал формат  

WebP - вроде работает но оказалось он не отображает в Firefox , Safari 

JPEG 2000 - вообще не могу вывести на Web как обычную картинку 

подскажите может кто-то сталкивался с такими форматами как с ними правильно работать
или как вывести на web JPEG 2000 , работает он вообще в других браузерах ?
    

Ответы

Ответ 1

Можно использовать тег picture:


    
    
    
    



Но тег picture тоже мало где поддерживается, поэтому нужен будет js:
https://github.com/scottjehl/picturefill
Достаточно просто подключить и всё:

 
 



Но я бы не стал заморачиваться и всё таки ПОКА проигнорировал рекомендации гугла.
Может быть в будущем к этому можно будет вернуться.

UPD от 26.01.2019: пример реалиализации отдачи webp на стороне веб-сервера, например
Nginx.

Как правило браузер передаёт серверу информацию о поддерживаемых технологий. Например
Chrome передаёт такие значения Accept: image/webp, */*;q=0.8. Поэтому можно отдавать
определённые изображения на стороне сервера.

Пример Nginx:

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:


  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]



  Header append Vary Accept env=REDIRECT_accept


AddType image/webp .webp


Примеры для разных веб-серверов можно найти здесь.