Используем формат изображений webp в wordpress

Limitations

  • Only English is currently supported.
  • Only «RGB Color» image mode is currently supported.
  • WebP images cannot exceed 16383 x 16383 pixels.
  • The Timeline data is not used; thus animations rely on layers for defining frames (set duration as «(123 ms)» in each layer’s name), and they need to be rasterized before saving.
  • On some images, lossless compression might produce smaller file sizes than lossy. That’s why the quality slider is not linear. The same problem exists with the radio buttons controlling the compression effort.
  • This plug-in does not extend neither .
  • Encoding and decoding are done in a single pass. It is not currently possible to cancel such actions, and it might take some time on big images.
  • Only the latest Photoshop release is supported.

Использование изображений в качестве контента

Важно понимать, что изображения могут использоваться в разметке, тег — для изображений, являющихся контентом, а также в CSS, свойство — для изображений, являющихся оформлением. Все дальнейшие изыскания связаны с тем, что нам нужно не просто указать изображение в формате WebP, а еще и предоставить запасной вариант (фолбэк) в виде JPEG/PNG изображения, если WebP не поддерживается браузером

В идеале было бы предоставлять запасные варианты стандартными средствами, но это не всегда возможно


Все дальнейшие изыскания связаны с тем, что нам нужно не просто указать изображение в формате WebP, а еще и предоставить запасной вариант (фолбэк) в виде JPEG/PNG изображения, если WebP не поддерживается браузером. В идеале было бы предоставлять запасные варианты стандартными средствами, но это не всегда возможно.

В Drupal оформление сосредоточено в темах, этот вариант использования мы разберем подробно на практике, в следующей части статьи.

Изображения в разметке могут быть добавлены разработчиком/контент-менеджером сайта как в виде непосредственно самой разметки (в редакторе), так и с помощью полей, в которые могут загружаться файлы изображений. В последнем случае за формирование разметки будет отвечать один или несколько модулей Drupal. Эти варианты мы разберем поверхностно, ниже.

В стандарте HTML5 был представлен элемент , который может содержать пути к нескольким изображениям, и отображать нужное в зависимости от контекста. В основном это используется для показа нужного изображения в зависимости от ширины и плотности экрана. Но этот механизм может применяться и для показа WebP, если формат поддерживается браузером или показа JPEG/PNG, если не поддерживается.

Вариант использования элемента с двумя типами изображений в виде разметки:

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

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

Существует модуль WebP (на момент написания статьи в стадии beta), который может автоматически генерировать WebP версии загружаемых изображений, и с помощью файла конфигурации веб сервера Apache подменять пути к изображениям. Этот способ лично мне не подошел, так как я использую веб сервер Nginx. Да и просто я не уверен, что это правильный подход.

Но для модуля так же существует с попыткой реализации подхода с элементом на основе ядерного модуля Responsive Image

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

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

Обновление

Подробное описание использования контекстных изображений, включая WebP, читайте в статье Отзывчивые изображения в Drupal 8.

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

WebP изначально поддерживается в браузерах Chrome и Opera и во многих инструментах редактирования изображений. Вы все еще можете столкнуться с проблемой безопасности с WordPress. Есть несколько способов использовать WebP с WordPress. Вы можете конвертировать ваши файлы, но лучший вариант – использовать плагин.

Плагины преобразования WebP

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

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

Другой способ – позволить вам загружать файлы WebP на ваш сайт. Этот метод не рекомендуется, так как не все браузеры поддерживают этот формат. Это означает, что некоторые из ваших посетителей не смогут просматривать ваши изображения.

Есть несколько бесплатных и премиальных плагинов, которые конвертируют изображения в WebP. Вот посмотрите на несколько бесплатных вариантов.

EWWW Image Optimizer

EWWW Image Optimizer – это бесплатный плагин с функцией преобразования WebP. Он генерирует WebP-версию ваших файлов JPEG и PNG. Он включает в себя множество параметров, таких как Apache-совместимые правила перезаписи, и альтернативный вариант перезаписи WebP. Он совместим как с кешами, так и с CDN, и работает с плагином Cache Enabler от KeyCDN.

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

ShortPixel Image Optimizer

ShortPixel Image Optimizer – это бесплатный плагин, который будет конвертировать любые JPEG, PNG или GIF в WebP. Он использует сжатие с потерями и без потерь. Он также работает с плагинами кэша, которые поддерживают WebP. Он предоставляет изображения WebP браузерам, которые могут их просматривать, а другие форматы – тем, которые не могут.

Также имеется возможность добавлять изображения WebP на интерфейсные страницы с использованием HTML. Для этого вы можете использовать тег вместо обычного тега

WebP Express

WebP Express – это бесплатный плагин, который создает изображения размером менее половины размера JPEG. Он направляет файлы JPEG и PNG в конвертер изображений для преобразования или в уже преобразованное изображение. Работает независимо от того, как изображения попали на сервер. Он работает с медиа-библиотекой, галереями и изображениями тем, на которые ссылается CSS.

Он не работает с сервером Microsoft IIS или WAMP и не был протестирован с мультисайтом. Это требует некоторой настройки для методов преобразования, но у вас есть несколько вариантов на выбор. Изображения сначала будут использовать метод преобразования вверху, и если этот метод не пройден, он будет двигаться вниз по списку, пока не найдет метод, который работает с изображением. Вы можете перетащить их в том порядке, в котором вы хотите их использовать.

Opti MozJpeg Guetzli WebP

Opti MozJpeg Guetzli WebP – бесплатный плагин, созданный с учетом Google Pagespeed Insights. Для конвертации изображений используются Mozilla MozJpeg, Google Guetzli и Google WebP. Кодировщики могут быть установлены локально или вы можете использовать встроенный ssh-клиент. Он обращается к кодировщикам удаленно, используя ssh-соединение с виртуальной машиной автора.

Он может конвертировать все ваши PNG-файлы не альфа-канала в формате JPEG. Резервное копирование ваших изображений перед внесением изменений. Вы можете вернуть ваши изображения обратно в любое время.

Does WebP support progressive or interlaced display?

WebP does not offer a progressive or interlaced decoding refresh in the JPEG or PNG sense. This is likely to put too much pressure on the CPU and memory of the decoding client as each refresh event involves a full pass through the decompression system.

On average, decoding a progressive JPEG image is equivalent to decoding the baseline one 3 times.

Alternatively, WebP offers incremental decoding, where all available incoming bytes of the bitstream are used to try and produce a displayable sample row as soon as possible. This both saves memory, CPU and re-paint effort on the client while providing visual cues about the download status. The incremental decoding feature is available through the .

Конвертеры онлайн WEBP в Jpg

В Интернете есть конвертеры, которые конвертируют разные форматы файлов и сохраняют их на компьютер. Список конвертеров:

  • image.online-convert.com/ru/convert/webp-to-jpg;
  • www.iloveimg.com/ru/convert-to-jpg/webp-to-jpg;
  • webptojpg.com/ru/.

Конвертеры работают бесплатно, не требуют регистрации от пользователей. Разберем конвертацию файлов на последнем конвертере из списка.

Нажимаем на кнопку «Загрузить» или переносим картинку с компьютера левой кнопкой мыши на конвертер (Скрин 3).


Далее, жмите кнопку «Конвертировать» (Скрин 4).

После этого, нажимаете «Скачать», чтобы картинка загрузилась на компьютер в формате Jpg.

Использование изображений в теме оформления

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

Объединить запись в одно свойство, как в случае с элементом , в CSS, к сожалению, не получится, но можно сделать, например, так:

Добавить класс к корневому элементу (тег ) может JS библиотека Modernizr, которая кстати присутствует в ядре Drupal 8, но в практически минимальном виде, без поддержки WebP.

Это можно исправить, скачав собственную сборку библиотеки на странице загрузки. Передя по этой ссылке, будет отмечен пункт «Webp» а так же пункты «Touch Events» и «details Element», которые как раз используются в ядре Drupal. В результате скачается файл , который надо положить в папку вашей темы оформления .

Теперь надо определить этот файл как библиотеку в файле :

И переопределить аналогичный файл, который идет в составе ядра, в файле :

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

Для пакетной генерации WebP изображений есть плагин gulp-webp.

Для автоматического добавления класса к объявлениям картинок есть плагин gulp-webpcss.

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

Процесс установки Gulp и плагинов я опущу, но приведу фрагмент описания задачи в :

Добавление класса в моем примере происходит в рамках задачи по компиляции SASS, но фактически преобразования совершаются уже на скомпилированном CSS, так что в данном случае это не принципиально.

На этом этапе мы уже решили обе основные задачи, создание WebP изображения и добавление объявления для него. Но это решение можно улучшить.

По умолчанию, плагин gulp-webpcss генерирует правила подобные тому, что приведено в качестве примера выше. И получается, что до отработки JavaScript мы имеем объявления с ненужными изображениями, даже если браузер поддерживает WebP. Думаю, что в теории возможна ситуация, когда ненужное изображение даже начнет загружаться. Так мы ничего не оптимизируем. Нужно действовать в интересах прогресса и большинства. Настройки gulp-webpcss позволяют переопределить классы как для WebP объявлений, так и для исходных:

Это даст нам в итоге CSS вида:

Класс будет добавлен библиотекой Modernizr, если формат WebP не поддерживается. И теперь по умолчанию будут загружаться именно WebP изображения.

Причем остальные свойства сохранят исходную специфичность, то есть плагин делает свою работу с умом. Правда есть одна особенность CSS, которая все же не учитывается. Если свойство определено в сокращенном виде (как ), то повторное определение обнулит объединенные значения (, , и прочие). При использование отдельных свойств такой проблемы не будет.

Но и это решение можно улучшить. Хоть JPEG и PNG и отошли на второй план, почему бы их все равно не оптимизировать? Для этого есть плагин gulp-imagemin. Плагин использует под капотом уже упомянутые выше и . Все шикарно работает даже с настройками по умолчанию:

И раз уж мы используем Gulp, то поручим ему и всю остальную рутинную работу: сборку SASS c составлением карт (sourcemaps), расстановку браузерных префиксов и отслеживание изменений в файлах для запуска задач.

Полный код файла приводить, пожалуй, не буду, но зато, я подготовил стартовый шаблон темы оформления со всеми необходимыми файлами, описанными выше. Я назвал его Dr Webper.

Webper 8.x (ZIP, 506 Кб)

Для его использования надо иметь установленный node.js и Gulp. Сначала надо скачать все зависимости выполнив команду:

Файлы изображений нужно поместить в папку либо отредактировать путь в файле .

Запуск сборки выполняется командой:

Запуск отслеживания изменений:


или просто:

Немного истории

Основными графическими форматами в вебе сейчас являются JPEG и PNG, как и на заре появления интернета. Тогда, правда, к ним можно было отнести еще и GIF, который сейчас уже практически не актуален. Всем этим форматам уже более 20 лет.

И тем не менее, оба формата неплохо себя зарекомендовали. JPEG, формат с потерями качества — для изображений фотографического типа. PNG, без потерь — для пиктограмм, иконок и изображений с альфа каналом (прозрачностью). Для обоих форматов есть способы уменьшить размер файла, например, использование современных кодеков для JPEG (Guetzli, MozJPEG), или использование меньшей разрядности (квантование) для PNG изображений с небольшим количеством цветов. Об этом уже написано сотни статей.

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

WebP в Joomla

Бесплатное расширение WebP Joomla  от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательским агентом (чтобы браузеры Chrome сразу же сопоставлялись) и дополнительного обнаружения JavaScript (так что другие браузеры WebP также совпадают). Если обнаружен WebP, расширение проанализирует вывод HTML, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены изображениями WebP. Для установки вам нужно будет сделать следующее:

  1. Запустите WebP на вашем хостинге
  2. Установите плагин в диспетчере расширений
  3. Включите плагин в диспетчере плагинов

Резюме файла WEBP

У нас есть шесть существующие программные обеспечения, связанные с файлами WEBP (как правило это программное обеспечение от Adobe Systems Incorporated, известное как Adobe Photoshop), и их можно отнести к категории основных типов файлов один. Традиционно эти файлы имеют формат Google Image File Format . Основную часть этих фацлов классифицируют, как Raster Image Files.

Файлы WEBP были обнаружены на платформах Windows, Mac и iOS. Они подходят для настольных ПК (и мобильных устройств). Рейтинг популярности основного типа файла WEBP составляет «Низкий», что означает, что эти файлы встречаются на стандартных настольных комьютерах или мобильных устройствах достаточно редко.

Улучшенный JPEG

Каково текущее состояние с форматами JPEG в интернете?

tl;dr: поддержка в браузерах сильно отличается. Если использовать современные разработки, то часто придётся выдавать разным браузерам разные форматы.Различные современные форматы (и оптимизаторы) показывают качество сжатия при целевом размере файла 26 КБ. Качество сравнивается инструментами SSIM (структурное сходство) и Butteraugli, которые мы более подробно рассмотрим позже.

  • JPEG 2000 (2000) — улучшение сжатия за счёт замены дискретного косинусного преобразования на вейвлеты. Поддержка в браузерах: десктопный Safari и iOS.
  • JPEG XR (2009) — альтернатива JPEG и JPEG 2000, поддерживающая HDR и широкие цветовые гаммы. Создаёт файлы меньшего размера, чем JPEG, со слегка с меньшей скоростью кодирования/декодирования. Поддержка в браузерах: Edge, IE.
  • WebP (2010) — основанный на прогнозировании блоков формат от Google поддерживает сжатие с потерями и без потерь. Обеспечивает лучшее сжатие, чем JPEG, и поддерживает прозрачность, как PNG. Не хватает настройки цветовой субдискретизации и прогрессивной загрузки. Скорость декодирования ниже, чем у JPEG. Поддержка в браузерах: Chrome, Opera. Экспериментальная поддержка в Safari и Firefox.
  • FLIF (2015) — формат сжатия без потерь, превосходящий PNG, WebP без потерь, BPG без потерь и JPEG 2000 без потерь по коэффициенту сжатия. Поддержка в браузерах: нет, но есть JS-декодер.
  • HEIF и BPG. С точки зрения сжатия они одинаковы, но поставляются в разных обёртках:
  • BPG (2015) — замена JPEG более эффективным сжатием на основе HEVC (High Efficiency Video Coding). Кажется, обеспечивает меньший размер файлов по сравнению с MozJPEG и WebP. Вряд ли получит широкую поддержку из-за проблем с лицензированием. Поддержка в браузерах: нет, но есть JS-декодер.
  • HEIF (2015) — формат для изображений и последовательностей изображений, закодированных HEVC с межкадровым предсказанием. Apple анонсировала на WWDC, что будет изучать переход c JPEG на HEIF в операционной системе iOS, что даст уменьшение размера файлов до двух раз. Поддержка в браузерах: нет на момент написания статьи. Должна появиться в десктопном Safari и iOS 11.

одинподдержка в браузерах сильно отличаетсяуказать content-type

Чем открыть формат WEBP, программы и браузеры

Итак, чем открыть формат WEBP? На самом деле здесь нет сложностей. Есть специальные программы для открытия формата:

  1. Adobe Photoshop с плагином WebP File Format.
  2. WebP Codec.
  3. WebP File Format – этот плагин работает с форматом WEBP.
  4. XnView.
  5. Google Фото.

Браузеры поддерживающие формат WEBP:

  • Opera;
  • Mozilla Firefox;
  • Google Chrome;
  • Microsoft Edge;
  • открывается в последней версии Яндекс браузера.

Рассмотрим на примере, как открыть WEBP через браузер. Для этого нажмите по картинке правой кнопкой мыши, выберите меню «Открыть с помощью» (Скрин 1).

Далее, кликните на браузер Google. После этого картинка должна открыться в этом браузере (Скрин 2).

В Яндексе и в других браузерах, картинка WEBP открывается по аналогии.

Лучшее приложение для открытия таких картинок – это Гугл Фото. Перейдите на сервис и войдите в Гугл аккаунт. Далее, загрузите туда изображение, с помощью кнопки «Загрузить». Нажмите по загруженной картинке, чтобы ее открыть в полноэкранном режиме.

Troubleshooting

If the plug-in is not detected or does not behave as expected, the steps below might help:

  • Update Photoshop to the latest version.

  • Double-check that the plug-in binaries match the Operating System and the architecture.

  • The plug-in should be listed in the «Help > About Plug-In» submenu if it is found by Photoshop.

  • If it is undetected, disable any antivirus program or allow the plug-in execution (including in MacOS and Windows built-in protections).

  • If it is still undetected, try each of these folders (Windows paths):

  • If it is still undetected, remove all plug-ins from all folders and copy WebPShop in only one of these folders, in case there is a plug-in conflict. Restart the computer and/or Photoshop.

If the issue still occurs, please file a bug at https://github.com/webmproject/WebPShop/issues

Команды для конвертации и оптимизации изображений

В рамках статьи команды для конвертации нам не понадобятся, но они могут иногда пригодиться в работе, поэтому пусть тоже будут:

Установка пакетов для конвертации и оптимизации в Ubuntu:

Установка в macOS c помощью Homebrew:

Конвертация из PNG в WebP (здесь и далее используется коэффициент качества 90 из 100):

Пакетная конвертация всех PNG файлов в папке в WebP:

Конвертация из PNG в JPEG:

Пакетная конвертация всех PNG файлов в папке в JPEG:

Пакетная оптимизация всех PNG файлов в папке:

Пакетная оптимизация всех JPEG файлов в папке:

Как видите ничего сложного нет, но запускать каждый раз эти команды вручную, согласитесь, было бы неправильно, ведь это можно поручить машине.

Как открыть на ПК

Для просмотра и форматирования webp-данных можно воспользоваться некоторыми графическими редакторами и интернет-браузерами, к которым следует отнести:

  • Opera;
  • Adobe Photoshop;
  • Google Chrome.

С подобным форматом можно работать и на других ОС, помимо Windows – Linux и Mac OS. Если при попытке открыть файл в обычном программном обеспечении для просмотра изображений выдается ошибка, значит была использована некорректная программа.

Adobe Photoshop

Открыть формат в фотошопе не составит труда. Для этого необходимо загрузить программное обеспечение с официального источника. Если программа уже установлена, следует открыть ее. Затем в верхнем левом углу нажать на кнопку «Файл», выбрать вариант «открыть» и переместиться в ту область памяти, где расположен необходимый файл. Нажав на него и на кнопку «открыть», пользователь подтверждает запуск, и программа немедленно его открывает.

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

Подмена адреса

Если пользователь не знает, как открыть файл формата webp с помощью программного обеспечения, необходимо воспользоваться простым методом, которые заключается в подмене адреса.

На объект необходимо два раза кликнуть левой кнопкой мыши, после чего изображение откроется в новой вкладке браузера. В адресной строке можно увидеть длинный адрес, а в конце три стандартных символа -rw. Их необходимо стереть и нажать «ввод» для повторного открытия данных в браузере. Теперь изображение обновится и откроется в исходном формате (JPEG или PNG).

Далее картинка скачивается привычным образом. Для этого необходимо нажать на нее правой кнопкой и нажать на «сохранить изображение как…». Далее пользователь выбирает область памяти, куда ее следует сохранить, и подтверждает операцию.

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

Зачем использовать анимированный WebP?

Преимущества анимированного WebP по сравнению с анимированным GIF

WebP поддерживает 24-битный цвет RGB с 8-битным альфа-каналом по сравнению с 8-битным цветом GIF и 1-битным альфа-каналом. WebP поддерживает сжатие с потерями и без потерь; фактически, одна анимация может комбинировать кадры с потерями и без потерь. GIF поддерживает только сжатие без потерь. Методы сжатия с потерями в WebP хорошо подходят для анимированных изображений, созданных из реальных видео, которые становятся все более популярным источником анимированных изображений. WebP требует меньше байтов, чем GIF  . Анимированные GIF, конвертированные в WebP с потерями, на 64% меньше, а WebP без потерь на 19%. Это особенно важно в мобильных сетях. WebP занимает меньше времени для декодирования при наличии поиска. В режиме Blink прокрутка или изменение вкладок могут скрывать и отображать изображения, в результате чего анимация приостанавливается, а затем пропускается вперед в другую точку. Чрезмерное использование ЦП, приводящее к отбрасыванию кадров анимации, также может потребовать от декодера поиска вперед в анимации. В этих сценариях анимированный WebP занимает в 0,57 раза больше общего времени декодирования, чем GIF, что приводит к уменьшению задержки при прокрутке и более быстрому восстановлению после скачков загрузки ЦП. Это связано с двумя преимуществами WebP над GIF:Изображения WebP хранят метаданные о том, содержит ли каждый кадр альфа, что устраняет необходимость в декодировании кадра для такого определения. Это приводит к более точному выводу, от которого зависят предыдущие кадры, от которого зависит данный кадр, тем самым уменьшая ненужное декодирование предыдущих кадров. Как и современный видеокодер, кодер WebP эвристически добавляет ключевые кадры через равные промежутки времени (чего не делает большинство кодеров GIF). Это значительно улучшает поиск в длинных анимациях. Чтобы упростить вставку таких кадров без значительного увеличения размера изображения, WebP добавляет флаг «метод наложения» для каждого кадра в дополнение к методу удаления кадров, который использует GIF. Это позволяет рисовать ключевой кадр так, как если бы все изображение было очищено до цвета фона, не заставляя предыдущий кадр быть полноразмерным.

Недостатки анимированного WebP по сравнению с анимированным GIF

В отсутствие поиска прямолинейное декодирование WebP требует больше ресурсов процессора, чем GIF. Lossy WebP занимает в 2,2 раза больше времени декодирования, чем GIF, а без потерь WebP — в 1,5 раза больше. Поддержка WebP не так широко распространена, как поддержка GIF, которая является универсальной. Добавление поддержки WebP в браузеры увеличивает площадь кода и поверхность атаки. В Blink это примерно 1500 дополнительных строк кода (включая библиотеку демпфирования WebP и декодер изображений на стороне Blink). Обратите внимание, что эта проблема может быть уменьшена в будущем, если WebP и WebM совместно используют более общий код декодирования или если возможности WebP включены в WebM.

Почему бы просто не поддерживать WebM в ?

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

Типы файлов WEBP

Ассоциация основного файла WEBP

.WEBP

Формат файла: .webp
Тип файла: Google Image File Format

Формат файла изображения, созданный Google. Формат WEBP имеет меньший размер файла, чем стандартный формат JPEG с таким же качеством изображения. WEBP файлов образов позволяют загружать более быстро.

Создатель:
Категория файла: Файлы растровых изображений
Ключ реестра: HKEY_CLASSES_ROOT\.webp

Программные обеспечения, открывающие Google Image File Format:

Adobe Photoshop, разработчик — Adobe Systems Incorporated

Совместимый с:

Windows
Mac

Google Chrome, разработчик —

Совместимый с:

Windows
Mac
iOS
Android
Linux

Opera, разработчик — Opera Software

Совместимый с:

Windows
Mac
iOS
Android
Linux

IrfanView, разработчик — Open Source

Совместимый с:

Windows
iOS
Android
Linux

Google Picasa, разработчик —

Совместимый с:

Windows
Mac

Pixelmator, разработчик — The Pixelmator Team

Совместимый с:

Mac
iOS

Итоги

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

Автоматизировать генерацию и объявление WebP изображений в теме оформления довольно просто. При этом вам даже не понадобится менять свой привычный способ написания стилей. Сборщик все сделает сам. Использование WebP можно добавить как в существующие темы оформления, так и начать использовать при разработке новой.

Оптимизация изображений — это забота о пользователях, и поверьте, они это оценят. Быстрая загрузка изображений и всего сайта — это и удобно, и приятно, и именно так должен работать современный веб.


С этим читают