Формат WebP — как использовать и зачем он нужен

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (23 оценок, среднее: 4,70 из 5)
Загрузка...

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

Зачем нужен WebP?

WebP — очень полезный формат изображений, поскольку он предлагает как оптимизацию производительности, так и богатый функционал. В отличие от других форматов, WebP поддерживает сжатие как потерями, так и без потерь, а также прозрачность и анимацию.

WebPPNGJPGGIF
Сжатие с потерями+++
Сжатие без потерь++++
Прозрачность+++
Анимация++

Даже с этим богатым функционалом формат WebP обеспечивает значительно меньшие размеры файлов, чем его альтернативы. В сравнительном изучении этих форматов изображений было обнаружено, что сжатые изображения с потерями качества WebP были в среднем на 30% меньше, чем JPG, а изображения без потерь WebP были в среднем на 25% меньше, чем PNG.

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

Уже существует несколько инструментов для удобной конвертации  JPG, PNG и других форматов файлов в WebP.

Онлайн-конвертеры в WebP

  • Squoosh — инструмент для преобразования и сравнения форматов изображений от Google
  • Online-Convert.com — онлайн-конвертер

Инструменты командной строки для WebP

cwebp — самый популярный инструмент командной строки для преобразования изображений в формат WebP. После установки его можно использовать для преобразования форматов с различными опциями, такими как уровень качества, желаемые имена файлов и другие.

# cwebp -q [quality] [input_file] -o [output_file]

cwebp -q 75 image.png -o image.webp

Инструменты Node

imagemin , и его плагин imagemin-webp — самая популярная библиотека Node.jsв для преобразования изображений в формат WebP.

Ниже приведен пример сценария, который преобразует все PNG и JPG-файлы изображений в папке в формат WebP.

/* convert-to-webp.js */

const imagemin = require("imagemin");
const webp = require("imagemin-webp");

imagemin(["*.png", "*.jpg"], "images", {
  use: [
    webp({ quality: 75})
  ]
});

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

node convert-to-webp.js

Sketch

В Sketch уже можно экспортировать любой элемент в формате WebP.

Как использовать WebP на сайте

На момент написания обзора формат изображения WebP поддерживается в 72% браузеров, используемых во всем мире.

Data on support for the webp feature across the major browsers from caniuse.com

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

Резервные копии изображений можно создать с помощью элемента <picture>элемента. Это HTML5 элемент, который позволяет нам использовать несколько исходных файлов для одного изображения.

<picture>
    <source type="image/webp" srcset="sunrise.webp">
    <source type="image/jpeg" srcset="sunrise.jpg">
    <img src="sunrise.jpg" alt="Sunrise Image">
</picture>

Чтобы предоставить альтернативный источник изображения, мы используем <source>элемент внутри элемента <picture>элемента.
У элемента <source> есть атрибуты для определения типа  изображения и инструкций, когда какой тип использовать:

  • type:  MIME тип файла источника;
  • srcset: Путь к файлу изображения. Для вывода одного изображения разных размеров можно использовать несколько файлов (см. Адаптивные изображения с помощью атрибутов srcset и sizes )
  • sizes: Список размеров каждого исходного файла (см. Статью выше)
  • media: Медиа-запрос для определения, какой из источников будет использоваться для вывода картинки.

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


1 Comment

  1. Валерий09.07.2019

    Огромное спасибо очень помогли!

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll to top