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

Вы можете использовать элемент <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 - это довольно впечатляюще по сравнению с другими форматами следующего поколения.

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

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

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

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

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

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, я создал подробный пост о том, как я это сделал, и о том, какой прирост производительности у меня был, вы можете проверить это здесь: Повысьте скорость вашего сайта с помощью форматов нового поколения

Я рекомендую вам использовать плагин «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. Используйте плагины, который автоматически конвертирует ваши загруженные изображения в оптимальные форматы.