Вы когда-нибудь задумывались, почему ваш сайт загружается вечно? Вероятно, потому, что вы используете слишком большие изображения. Распространенными типами изображений являются PNG, JPG, SVG и GIF. Пришло время освоить современные форматы изображений! 

 Эта статья будет посвящена форматам изображений webP.

ЧТО ТАКОЕ WEBP?

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

КАК ПОЛЬЗОВАТЬСЯ WEBP

Во-первых, вам нужно преобразовать ваши изображения в форматы webP.

Любой распространенный формат файла может быть преобразован в WebP с сохранением исходного качества. 

Однако, как ни крути, webP поддерживается не всеми браузерами. Проверить поддержку для webP можно здесь.

Это не большая проблема, так как можно использовать этот формат, не нарушая изображения в неподдерживаемых браузерах, используя резервные копии!

HTML имеет два мультимедийных элемента изображения (img и picture )

С помощью элемента picture  вы можете загрузить zero во многие исходные элементы и один элемент img. Как это работает? Браузер рассмотрит каждый URL-адрес изображения в элементах и выберет из них наиболее подходящий. Если ни один из них не поддерживается браузером или браузер вообще не поддерживает элемент, он выбирает изображение в теге.

<picture>  <source srcset="image.webp" type="image/webp">  <img src="image.jpg">
</picture>

Если браузер не поддерживает форматы изображений webP, загружается изображение JPG. 

Так же можно создать для этого компонент, используя ReactJS 

const ImageWithFallback = ({  src,  fallback,  type = 'image/webp',  ...delegated
}) => {  return (    <picture>      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};

Когда вы хотите добавить изображение в свой код, вы можете легко импортировать компонент ImageWithFallback и использовать его в качестве тега изображения. 

<ImageWithFallback  src="/images/my-image.webp"  fallback="/images/my-image.png"  alt="My beautiful portrait"
/>

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