Зачем Google предлагает мне JPEG 2000, JPEG XR и WebP вместо JPEG и PNG и как оптимизировать изображение?

Здравствуйте. На сайте PageSpeed Insights мне сообщили, что у меня плохая оптимизация сайта и посоветовали изменить тип изображений на JPEG 2000, JPEG XR или WebP

Я открыл список поддерживаемых браузеров, которые они дали
https://caniuse.com/#feat=jpeg2000
https://caniuse.com/#feat=jpegxr
https://caniuse.com/#feat=webp

В итоге, как я понял, больше всего поддержки у webp, но посмотрите: нет поддержки ни у ios, ни у safari. На этих браузерах изображение вообще не откроется? Что делать тогда?

И вопрос 2: как оптимизировать изображение без потери качества, чтобы этого косяка не было? Есть ли какой-нибудь более подходящий формат?

Дополнительно:

Что делать тогда?

Вариант "забить на попытки Гугля продвигать новые форматы за ваш счет" не рассматривали? Мало ли что он там предлагает, у вас своя голова на плечах есть, вот вы уже и определили, что вам это не надо.
Но на всякий проверьте, не уменьшатся ли ваши JPEG-и при пересохранении в других программах в том же формате? Формат достаточно хитрый, чтобы результат мог быть сильно разным в Gimp и PS, например.

Ответы:

погуглите тег picture и imgsrc
надо просто одновременно передать ссылку на вебп и на обычный жпег, и тогда браузер, который умеет вебп(правильно читается "веппи"), покажет его. А остальные покажут обычный жпег. Точно там же указывается ссылка на картинку для ретины, потому на ретине будет отображаться она, в высоком разрешении, а остальные покажут обычную жпежку.
Как то так.

зыж про Жпег2000 и ЖпегХР забудьте. Они пытались педалировать, но кроме вебп ничего не получило хоть какого-то распространения.

• Странно что пишут что то кроме этого, так как это и есть ответ того что хочет гугл.

Про себя скажу, на vps сделал такую фишку, когда wordpress закидывает картинку, обычный jpg, в папку uploads, то запускается оптимизация, а именно создается 2 файла:
webp и mozjpeg (по сути тот же jpeg только оптимизированный).
А на сайте, через picture прописываю оба формата и тот, который поддерживается, тот и загружается.
Подробнее про picture можно посмотреть:
https://www.youtube.com/watch?v=gHLPBlzGRT8

PS. Рейтинги у меня 100/100

• Ну так оформляй плагин и на-гора.
• php-плагин это полдела, там половина функционала это скрипты bash и python, т.е. на хостинге это не реализуемо!

в ios работает с атрибутом type
<source type="image/webp" srcset="/img.webp">

Vincent Orback Предложил вот что: использовать подмену JPEG на WebP с помощью mod_rewrite. Для этого добавим в .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>

Если браузер работает с форматом webp, то проверяем, есть ли на сервере файл с тем же именем, но расширением .webp, и, если да, отдаем его вместо запрошенного. Если нет — отдаем файл как обычно.

Таким образом получаем, что в HTML-коде сайта менять ничего не требуется, а достаточно конвертировать файлы графики в WebP.

Из недостатков этого решения можно назвать разве что некоторое увеличение нагрузки на дисковую систему сервера из-за необходимости проверять существование двух файлов, а не одного.

• при добавлении строк оценка загрузки сайта по оценке гугл падает на 18 пунктов (до заливки дубликатов изображений!!!).

  Показатели до добавления строк :
  Время загрузки первого контента 2,8 сек.
  Индекс скорости загрузки 7,3 сек.
  Время загрузки для взаимодействия 8,4 сек.
  Время загрузки достаточной части контента 2,8 сек.
  Время окончания работы ЦП 8,1 сек.
  Максимальная потенциальная задержка FID 770 мс

  После:
  Время загрузки первого контента 2,9 сек.
  Индекс скорости загрузки 8,3 сек.
  Время загрузки для взаимодействия 27,4 сек.
  Время загрузки достаточной части контента 2,9 сек.
  Время окончания работы ЦП 11,4 сек.
  Максимальная потенциальная задержка FID 1 210 мс

  Понаблюдаю еще за данными после добавления дублей изображений...

• после заливки изображений .webp, в Хроме отображается все равно jpeg...(

  и все так же пишет гугл :

  Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.

• VK-19, спасибо, что проверили. Тут важный момент, некоторые хостеры, используют Apach & Nginx для отдачи статики и динамики, и возможно как раз изображения отдаются Nginx, и эти правила могут не работать. На моем хостинге именно так.
• Виталий, значит других вариантов подмены для таких хостов нет?
• VK-19, если хостинг не дает доступ, то нет.

squoosh.app

Решил спросить что по вопросу думают в Bitrix (ссылка на топик в форуме https://dev.1c-bitrix.ru/community/forums/forum6/t... ответа пока не получил.

Из перечисленных решений считаю оригинальным то что предложил Виталий с htaccess