Хотите быстрый сайт? Гладкий сайт? Тогда вам следует позаботиться о WebP. Это делает веб-сайты легче и быстрее. WebP сочетает в себе функции PNG и JPEG. Это новый король формата изображений.

Что такое WebP

Это формат изображения, такой как PNG / JPG / GIF, но у него есть более интересные функции, которые делают его более универсальным. Собственно, он был разработан и выпущен компанией Google.

Некоторые из его основных функций:

  1. Он поддерживает сжатие с потерями и без потерь. ЕСЛИ вы не знаете, что такое с потерями или без потерь, прочтите мою предыдущую статью
  2. Размер изображений без потерь WebP на 26% меньше по сравнению с PNG и на 25–34% меньше по сравнению с JPEG.
  3. Благодаря меньшему размеру веб-сайт с большим количеством изображений становится легче, быстрее и оптимизирован для SEO.

Давайте посмотрим на изображение ниже.

Слева находится jpg-версия изображения, вес которой составляет 1,3 Мб. Версия изображения WebP находится справа и весит 430 КБ. Вы в это можете поверить? Между двумя изображениями нет заметной разницы, пока вы не увеличите масштаб.

Итак, ясно, что мы можем использовать WebP для уменьшения размера изображения без большой потери качества.

Но помните, что WebP не заменяет изображения JPEG и PNG. Все браузеры по-прежнему не поддерживают формат WebP. Вот почему вам также следует предоставить версию изображения в формате JPEG / PNG, если браузер пользователя не поддерживает WebP.

Как конвертировать изображения в WebP

Есть множество способов сделать это.

  1. Онлайн-конвертер изображений: вы можете использовать некоторые веб-сайты, на которых вам нужно загрузить изображение и преобразовать его. После конвертации вы должны скачать этот файл и использовать его в своем проекте. Мне нравится https://squoosh.app/ на этом веб-сайте для онлайн-конвертации изображений. Имейте в виду, что после загрузки файла вам может потребоваться выполнить некоторую настройку и выбрать WebP в качестве выходного формата.
  2. Программное обеспечение: некоторые программы позволяют экспортировать файл PNG / JPEG в формате WebP. Вы можете попробовать такое программное обеспечение, как Adobe Photoshop, Sketch и т. Д.
  3. Node JS: вы можете использовать скрипт nodeJs для преобразования любых изображений в WebP. Я в основном использую плагин imagemin-webp для преобразования изображений в WebP.
  4. Gulp: Gulp - это средство выполнения задач, которое вы можете использовать. Я считаю его самым простым в использовании. Но сначала вы должны узнать, как настроить gulp и использовать его. Я в основном использую плагин «gulp-webp» для преобразования изображений в webp. Вы можете "ворчать" другой бегун, чтобы выполнить задачу.
  5. Grunt: это еще одна программа для выполнения задач, которую вы можете использовать.
  6. Webpack: я этим не пользуюсь. Но вы можете использовать это, если хотите

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

Но проблема !!!!!!!!!!!

Как вы знаете, не все браузеры поддерживают формат WebP, поэтому вам нужно предоставить резервное изображение в HTML. Это сделано для того, чтобы гарантировать, что если какой-либо браузер не поддерживает WebP, он будет отображать изображение в другом формате, например jpg / png.

Обычно мы пишем так

<img src="image/fish.webp" alt="brown fish" />

Но если браузер пользователя не поддерживает WebP, он не увидит никаких изображений. Поэтому решение - использовать резервные изображения.

<picture>  
<source srcset="img/awesomeWebPImage.webp" type="image/webp">     <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Здесь происходят 3 вещи:

  1. Браузер, поддерживающий формат Webp, будет отображать изображение в формате webp из исходного тега 1s.
  2. Браузер не поддерживает формат WebP, изображение будет отображаться в формате JPG из второго исходного тега.
  3. Некоторые браузеры не поддерживают элемент изображения. Они будут показывать изображения из тега img

В HTML вы можете легко использовать резервные изображения. Но в CSS это немного сложно. Вы можете использовать библиотеку javascript под названием «Modernizr», чтобы решить эту проблему. Но я не думаю, что это необходимо, потому что. Нет функции, которая поддерживает все браузеры. Таким образом, вы можете игнорировать небольшую часть аудитории. В противном случае вы можете использовать «modernizr».

Минусы WebP

  1. Вы должны использовать два набора изображений. Один в формате WebP, а другой в формате png / jpg для обеспечения поддержки всех браузеров.

Но я думаю, что у него больше преимуществ, чем недостатков, потому что он ускоряет загрузку вашей веб-страницы.

Спасибо, что прочитали мою статью. Пожалуйста, подпишитесь на меня, чтобы увидеть больше статей в будущем

Некоторые другие ресурсы

  1. Https://www.smashingmagazine.com/2018/07/converting-images-to-webp/
  2. Https://github.com/imagemin/imagemin-webp#api
  3. Https://developers.google.com/speed/webp/faq
  4. https://www.smashingmagazine.com/2019/10/speed-up-your-website-webp/
  5. Https://web.dev/use-imagemin-to-compress-images/
  6. https://themeisle.com/blog/what-is-webp/
  7. Https://css-tricks.com/using-webp-images/