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

Question

[del993788]

Здравствуйте. На сайте 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: как оптимизировать изображение без потери качества, чтобы этого косяка не было? Есть ли какой-нибудь более подходящий формат?

Comments

[Adamos]

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

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

[sim3x]

И в чем проблема совместить все три формата для выдачи разным браузерам?

[Rustam Bainazarov]

https://css-tricks.com/using-webp-images/

[Антон]

Сколько не ужимай, гуглу всегда мало, он всегда считает, что хоть на 0,000001%, но можно ужать картинку. Где слово "ужать" происходит от слова "Ужас".

А сайт не на битриксе случайно?

[del993788]

Антон, нет. Самопис. Изображений просто много.

Answer 1

[lukoie]

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

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

Comments

[bro-dev]

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

Answer 2

[Анатолий]

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

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

Comments

[bro-dev]

Ну так оформляй плагин и на-гора.

[Анатолий]

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

Answer 3

[Fwwll]

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

Answer 4

[Виталий]

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.

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

Comments

[Василий Иванов]

при добавлении строк оценка загрузки сайта по оценке гугл падает на 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, если хостинг не дает доступ, то нет.

Answer 5

[Анастасия]

squoosh.app

Answer 6

[Евгений Николаев]

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

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