Формат WebP — как использовать и зачем он нужен. Загадочный И Удобный Формат WebP В Веб-Дизайне И Для Photoshop
— это формат изображения, разработанный Google в 2010 году. Он был создан как альтернатива форматам PNG и JPG. С помощью WebP можно создавать изображения гораздо меньших размеров, чем традиционные форматы JPG и PNG без ухудшения качества картинки.
Зачем нужен WebP?
WebP — очень полезный формат изображений, поскольку он предлагает как оптимизацию производительности, так и богатый функционал. В отличие от других форматов, WebP поддерживает сжатие как потерями, так и без потерь, а также прозрачность и анимацию.
WebP | PNG | JPG | GIF | |
Сжатие с потерями | + | + | + | — |
Сжатие без потерь | + | + | + | + |
Прозрачность | + | + | — | + |
Анимация | + | — | — | + |
Даже с этим богатым функционалом формат WebP обеспечивает значительно меньшие размеры файлов, чем его альтернативы. В сравнительном изучении этих форматов изображений было обнаружено, что сжатые изображения с потерями качества WebP были в среднем на 30% меньше, чем JPG, а изображения без потерь WebP были в среднем на 25% меньше, чем PNG.
Как преобразовать изображения в WebP
Уже существует несколько инструментов для удобной конвертации JPG, PNG и других форматов файлов в WebP.
Онлайн-конвертеры в WebP
- Squoosh — инструмент для преобразования и сравнения форматов изображений от Google
- Online-Convert.com — онлайн-конвертер
Инструменты командной строки для WebP
Хотя это довольно много, этого недостаточно для того, чтобы не делать фолбэк для неподдерживаемых браузеров. Иначе все-таки часть юзеров не увидит изображение.
Резервные копии изображений можно создать с помощью элемента
Чтобы предоставить альтернативный источник изображения, мы используем
- type: MIME тип файла источника;
- srcset: Путь к файлу изображения. Для вывода одного изображения разных размеров можно использовать несколько файлов (см. )
- sizes: Список размеров каждого исходного файла (см. Статью выше)
- media: Медиа-запрос для определения, какой из источников будет использоваться для вывода картинки.
В дополнение к элементам