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

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

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

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

И вопрос 2: как оптимизировать изображение без потери качества, чтобы этого косяка не было? Есть ли какой-нибудь более подходящий формат?
  • Вопрос задан
  • 18805 просмотров
Пригласить эксперта
Ответы на вопрос 6
lukoie
@lukoie
погуглите тег picture и imgsrc
надо просто одновременно передать ссылку на вебп и на обычный жпег, и тогда браузер, который умеет вебп(правильно читается "веппи"), покажет его. А остальные покажут обычный жпег. Точно там же указывается ссылка на картинку для ретины, потому на ретине будет отображаться она, в высоком разрешении, а остальные покажут обычную жпежку.
Как то так.

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

PS. Рейтинги у меня 100/100
Ответ написан
@adrontek
в ios работает с атрибутом type
<source type="image/webp" srcset="/img.webp">
Ответ написан
Комментировать
daruvayc0
@daruvayc0
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.

Из недостатков этого решения можно назвать разве что некоторое увеличение нагрузки на дисковую систему сервера из-за необходимости проверять существование двух файлов, а не одного.
Ответ написан
nastya97core
@nastya97core
Начинающий программист
squoosh.app
Ответ написан
Комментировать
Решил спросить что по вопросу думают в Bitrix (ссылка на топик в форуме https://dev.1c-bitrix.ru/community/forums/forum6/t... ответа пока не получил.

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

Войдите, чтобы написать ответ

Похожие вопросы