Мой рейтинг по данным Google Page Speed Insights подвергается суровому наказанию из-за:
"Показывать изображения в форматах нового поколения" подробнее на странице справки Google здесь.
Однако, согласно this, this и this эти форматы поддерживаются очень немногими браузерами .
Что вы делаете в этом сценарии? Что
Вы можете использовать элемент <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 довольно впечатляет по сравнению с в другие форматы "следующего поколения".
WebP - это тот, который в настоящее время имеет более широкую поддержку, его поддерживают практически все основные браузеры, кроме Safari.
Как упоминалось в одном из ответов colossalyouth, вы можете использовать тег изображения для загрузки изображений webp, и в случае, если он не поддерживается, он вернется к любому другому формату, который вы выберете.
И если вы используете фоновое изображение, вы можете использовать что-то вроде 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. Я создал подробный пост о том, как я это сделал, и о том, какой у меня прирост производительности, вы можете проверить это здесь: Повысьте скорость своего сайта с помощью форматов следующего поколения
.myelement{ background: red; background: url(wrong-url-for-image.jpg); }
- person prettyInPink; 15.06.2020
До тех пор, пока основные браузеры не будут поддерживать эти форматы следующего поколения, вероятно, лучше продолжать использовать JPG / PNG, поскольку они имеют широкую поддержку. Большинство веб-сайтов действительно используют JPG и PNG, и потребуется некоторое время, чтобы браузеры соответствовали технологиям следующего поколения.
Вы всегда можете использовать CDN изображений, например ImageEngine. Полное раскрытие информации Я работаю в компании, стоящей за ImageEngine.
Он действует как CDN на основе вытягивания и автоматически преобразует ваши изображения в WebP или JPEG-2000, если устройство конечных пользователей поддерживает этот формат. Он также автоматически применяет сжатие и изменение размера для дальнейшей оптимизации содержимого изображения, но это определенно поможет повысить скорость вашей страницы.
Вы можете подписаться на бесплатную пробную версию и посмотреть, как это улучшит вашу оценку Google Page Speed.
Вы можете использовать такой инструмент, как https://www.imagecompress.org/ для преобразования ваших текущих форматов изображений, и следуйте примеру, чтобы обновить свои старые теги https://www.imagecompress.org/examples.
Я рекомендую вам использовать плагин «Enhanced Media Library», если вы пользуетесь WordPress. Это просто позволит вам напрямую загружать изображения Webp, ничего не настраивая вручную.
Формат WebP будет загружаться быстрее и потреблять меньше сотовых данных. Кто угодно может работать с форматом и предлагать улучшения в WebP с открытым исходным кодом.
В <picture> атрибут <source> может использоваться для загрузки альтернативных форматов файлов изображений, которые могут поддерживаться не всеми браузерами. Например, вы можете показывать изображение в формате WebP браузерам, которые его поддерживают, при падении вернуться к JPEG в других браузерах:
<picture>
<source type="image/webp" srcset="images/verz.webp">
<img src="images/banner.jpg" alt="Banner Image" width="100" height="100">
</picture>
Примечание. Этот элемент в настоящее время доступен в Chrome 38. Попробуйте использовать эмуляцию экрана в Chrome DevTools. Согласно Google, WebP поддерживается в Chrome и Opera и обеспечивает лучшее сжатие с потерями и без потерь для изображений в Интернете. WebP поддерживает не все браузеры. Для других браузеров вам потребуется резервное изображение в формате PNG или JPEG.
Если ваш сайт находится в WordPress. Используйте плагины, которые автоматически конвертируют загруженные вами изображения в оптимальные форматы.
