Служить изображениям в форматах следующего поколения

Question

Мой рейтинг от Google Page Insights for Speed ​​серьезно наказывается из-за:

"Служить изображениям в форматах следующего поколения". Дополнительная информация на странице справки Google здесь .

Однако, согласно , , , и , , эти форматы поддерживаются очень немногими браузерами.

Что вы делаете в этом сценарии?Что

Answer 1

WebP - это та, которая в настоящее время имеет более широкую поддержку, почти все основные браузеры, кроме Safari, поддерживают ее.

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

А если вы используете background-image, вы можете использовать что-то вроде modernizr , чтобы обнаружить поддержку функций браузером и в конечном итогес помощью CSS, подобного следующему:

my-selector {
    background: url('../images/home-bg.webp') no-repeat scroll center center
}

.no-webp my-selector {
    background: url('../images/home-bg.jpg') no-repeat scroll center center
}

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

Answer 2

Вы можете использовать такой инструмент, как https://www.imagecompress.org/, чтобы конвертировать текущие форматы изображений, и следуйте примеру, чтобы обновить старые теги https://www.imagecompress.org/examples.

Answer 3

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

Answer 4

Вы всегда можете использовать образ CDN, например ImageEngine .Полное раскрытие Я работаю на компанию позади ImageEngine.

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

Вы можете подписаться на бесплатную пробную версию и посмотреть, как это улучшает ваш показатель Google Page Speed.

Answer 5

Вы можете использовать элемент <picture> для доставки изображения WebP пользователям с браузерами, которые его поддерживают, с отступлением до JPEG или PNG для тех, кто этого не делает.Преимущество использования элемента <picture> по сравнению с другими резервными методами заключается в том, что браузеры, которые не поддерживают этот элемент, будут использовать любой источник, указанный в теге <img>.

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

Вот метод для преобразования исходных изображений в WebP .

. Если вы используете WordPress, есть плагины, которые будут автоматически генерировать изображения WebP из вашей медиатеки и включать в себя функции резервирования.Единственное, что я использовал, - это WebP Express, но он достаточно хорошо мне помог, когда клиент был встревожен тем, что его счет 100/100 PageSpeed ​​Insight резко упал до 30 за ночь с развертыванием Lighthouse.

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