Лучше формат изображения, чем PNG? (для скорости страницы) - PullRequest
1 голос
/ 10 марта 2020

Тест скорости Google предлагает мне переключить фоновое изображение PNG на целевой странице в формат следующего поколения, основываясь на объяснении:

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

Это правда? Я не сталкивался с использованием таких форматов на сайтах, которые посещаю. Просто хочу подтвердить.

Ответы [ 2 ]

2 голосов
/ 11 марта 2020

Это правда?

Да, это правда.

Файл .png обычно на 15-25% больше, чем файл .jpg.

Файл .jpg обычно примерно на 25-30% больше, чем .webp.

Фактически, если вы посмотрите на свой отчет, он скажет вам приблизительно, какой размер вы можете сохранить, переключившись. в рекомендуемый формат (Google рекомендует формат WebP и поэтому на этом основывает свои цифры).

Во всех приведенных выше примерах я предполагаю сложные изображения без прозрачности, которые должным образом оптимизированы.

Прозрачные пленки, используйте .png, все остальное используйте «форматы следующего поколения», где вы можете.

Я не сталкивался с использованием таких форматов на сайтах, которые я посещаю

Какой браузер вы используете? В зависимости от того, какой браузер вы используете, вы можете не видеть эти форматы, так как веб-сайты будут искать возможность отображать эти форматы, прежде чем предоставлять их вам.

https://www.ebay.co.uk/ часто использует .webP, если Вы хотите сайт, где вы можете увидеть разницу между браузерами.

Другие сайты, такие как YouTube et c. используйте их, но не всегда.

Это потому, что поддержка по-прежнему не фантастическая c: -

Поддержка WebP

JPEG Поддержка 2000

Поддержка JPEG XR

Из-за того, что каждый формат связан с конкретным поставщиком браузера, если вы используете все 3, вы можете получить покрытие более 95%.

Какой формат (ы) мне следует использовать?

В действительности, использование WebP с анализом функций более чем достаточно для большинства сайтов.

Если вы В WordPress существует множество плагинов для формата WebP, которые в значительной степени подключаются и работают.

Если нет, поддержка WebP встроена в PHP 5.4 и выше , так что это действительно легко накатить свои собственные.

К сожалению, поддержка JPEG2000 не так уж и велика - что удивительно, поскольку это iOS предпочтительный формат.

Мы свернули свои собственные, но это был кошмар - найти библиотеку PHP, которая действительно работала, и я помню, что мне нужно было установить несколько модулей на сервере (так что, если вы используете общий хостинг, это, скорее всего, нет go).

Это могло бы измениться, поскольку это было пару лет назад, go мы все настроили. (попробуйте ImageMagick )

JPEG XR для того, когда вы сделали все остальное и если вы действительно хотите быть на переднем крае производительности в IE9 + (так что, в основном, это только гайки, как я, даже попытаться использовать этот формат, и я бы никогда не рекомендовал его в коммерческих целях!).

Мы даже не могли заставить это работать на сервере, и нам пришлось настраивать изображения извне, используя онлайн-сервис - по этой причине было сделано всего c ресурсов для якорных страниц.

1 голос
/ 10 марта 2020

PNG довольно большие, и вы не можете сжать их так же сильно, как JPEG.

Вы можете сжимать PNG, но я заметил, что ни один сервис на самом деле не делает это без проблем с качеством.

Вот ссылка, чтобы попробовать его (png & jpeg - инструмент сжатия): https://tinyjpg.com/

...