WebPconv
WebPconv is a free software to convert WebP to JPG. You can convert one or multiple WebP images to JPEG simultaneously.
To convert WebP to JPG, simply move to Decode tab. There, you can add WebP images using dedicated option provided on its interface. After that, click on option highlighted in black in above snapshot. You will see many Decoding Options there. Simply choose JPEG as output format, desired JPEG quality level, dither strength, enable or disable filter, etc. Now, hit the Convert button to let it convert WebP images to JPG format.
Similarly, you can convert WebP to other image formats including PNG, GIF, TIFF, or BMP.
It also lets you convert JPG to WebP. Also, conversion of PNG and GIF to WebP is possible. For that, use Encode tab. Here, you get to choose encoding options like preset type (photo, icon, drawing, text, etc.), quality factor, compression method, etc.
WebPconv is a dedicated WebP to JPG converter software. It has a clean and intuitive user interface. Along with desired image format conversion, you get to choose some output parameters too. Hence, I would recommend it for the same purpose.
Webp to JPG Converter
Webp to JPG Converter, as the name suggests, is a portable WebP to JPG converter software for Windows. Simply browse WebP images or a folder of WebP images to convert to JPG. After that, choose JPG as output format from its interface, and hit the Convertto button present right below its interface. The files will be converted to JPG, and you will be able to see the log information with output files’ location.
It is one of the easiest to use software for the purpose of conversion of WebP to JPG. It provides a flexibility to batch convert WebP to JPG. Apart from JPG, you can also convert WebP to PNG, GIF, or BMP.
Windows
Write a Comment
Программы для конвертации Webp в JPEG или PNG
Paint, классика Windows хороша для всего
Популярное приложение Paint, встроенное в Windows 10 имеет возможность открывать файлы WebP, при этом конвертировать в другие форматы изображений , среди которых самые популярные, такие как JPG, PNG, BMP или GIF. Для этого нам нужно будет только открыть изображение WebP, затем щелкнуть «Файл» и, наконец, «Сохранить как». Далее мы должны выбрать формат, в который мы собираемся преобразовать и сохранить его. Хотя формат WebP совместим с прозрачные пленки , они теряются при преобразовании в PNG с помощью Paint из-за небольшой поддержки этого формата.
GIMP, альтернатива Photoshop, также конвертирует WebP
Это популярное бесплатное приложение для редактирования изображений с открытым исходным кодом, сопоставимое с Photoshop, также позволяет нам конвертировать изображения WebP в другие форматы изображений, такие как JPG и PNG. Для этого мы должны открыть наш файл WebP и затем нажать «Экспортировать как». После того, как мы сможем выполнять всевозможные действия по редактированию, если это необходимо. Затем мы можем выбрать из широкого списка форматов, мы выбираем тот, который нам нужен, и нажимаем «Экспорт». Поскольку это инструмент для редактирования изображений, он не рекомендуется новым пользователям, которым требуется только возможность конвертировать изображения.
Вы можете скачать GIMP бесплатно сайт разработчика .
XnView, программа просмотра, способная конвертировать изображения WebP
Это один из самые популярные зрители изображений , который помимо некоторых функций редактирования также может конвертировать из формата WebP в более распространенные, такие как JPG, PNG, TIFF, GIF, PCX и другие. Выполнить процесс очень просто, так как нам нужно будет только щелкнуть «Файл» и «Открыть», чтобы загрузить наш файл. Позже мы сможем отредактировать его из программы. По завершении снова нажмите «Файл» и выберите «Экспорт». Затем появится новое окно, в котором мы должны выбрать формат, в который мы собираемся преобразовать, качество и цветовой режим среди других действий. Мы нажмем «Сохранить», чтобы выбрать, где мы хотим разместить новый преобразованный файл.
Вы можете бесплатно попробовать XnView для преобразования изображений WebP, нажав по этой ссылке.
Romeolight WebPconv, инструмент для преобразования изображений
Это настольный инструмент, с помощью которого мы можем конвертировать изображения WebP в JPG. Он имеет как устанавливаемый и переносной версия. Для начала мы должны щелкнуть вкладку «ДЕКОДИРОВАТЬ», а затем щелкнуть «три горизонтальные полосы», которые мы находим в верхней правой части. Теперь мы переходим к опции «ДЕКОДИРОВАНИЕ» и выбираем желаемый формат (JPG, PNG и т. Д.). Затем мы щелкаем значок плюса (+), выбираем изображение WebP нашего компьютера и нажимаем кнопку «Воспроизвести». Как только это будет сделано, на нашем рабочем столе появится новая папка с преобразованным изображением. Хотя процесс быстрый, он несколько менее прост, чем другие подобные приложения.
Вы можете бесплатно скачать Romeolight WebPconv с его веб-сайт Честного ЗНАКа .
XnConvert, конвертирует изображения WebP в несколько форматов
Это быстрый, мощный и бесплатный многоплатформенный пакетный конвертер изображений для личного пользования, с устанавливаемой и переносной версией. С помощью этого приложения мы можем конвертировать наш файл WebP в JPG, PNG, а также в другие форматы. Первое, что мы должны сделать, это щелкнуть вкладку «Ввод», нажать кнопку «Добавить файлы» и выбрать наш файл WebP. Затем мы щелкаем вкладку «Вывод» и выбираем формат, в который мы хотим преобразовать, например, JPG, в раскрывающемся списке «Формат». Наконец, нажмите кнопку «Конвертировать», расположенную в правом нижнем углу, чтобы программа позаботилась о преобразовании.
Вы можете бесплатно скачать XnConvert, чтобы конвертировать все ваши файлы WebP в другие форматы, с сайт разработчика .
Зачем нужен WebP
Безусловно, конвертируя изображение, нужно быть готовым к пусть и небольшим, но всё-таки имеющим место потерям качества. Избежать этого не поможет ни конвертация в JPEG, ни в PNG. Даже создание скриншота не позволит сохранить все те аспекты исходного изображения и перенести их на дубликат, сделанный с экрана.
Обратите внимание на вес: слева — JPG, справа — WebP
Поэтому для профессиональной работы такие картинки, само собой, не подойдут. Другое дело, что профессионалы, скорее всего, и не возьмутся за редактирование WebP-изображений. А для бытового использования разницы как таковой заметно не будет.
Впрочем, понять Google тоже можно. Она как никто заинтересована в развитии интернета и прикладывает для этого все усилия. Перевод сайтов на формат изображений WebP — один из шагов по совершенствованию мирового онлайн-пространства. Ведь картинки в таком формате весят на 20-200% меньше, чем PNG или JPEG, а значит, будут быстрее обрабатываться и сократят вероятность закрытия сайта до полной загрузки.
Как конвертировать изображения в WebP
Рассмотрим несколько способов для конвертации изображений. Это можно сделать с помощью онлайн-сервисов, приложений с установкой, через инструменты командной строки.
Онлайн-сервисы
Squoosh
Squoosh конвертирует и сжимает изображения онлайн. Он справится с большими фотографиями, иллюстрациями, скриншотами и иконками в SVG, работает с разными форматами. Можно сравнивать варианты картинки, контролировать артефакты, настраивать нужный уровень сжатия и следить за итоговым размером изображения.
Сжатие JPG в WebP в Squoosh
Файл 1,51 MB после конвертирования стал весить 185 kB.
Online-Convert
Online-Convert.com тоже конвертирует онлайн. Он работает с изображениями, документами, видео, аудио, архивами и другими форматами. Нас интересует конвертер в WebP: он позволяет обрезать изображение, выставить размер, настроить улучшения для картинки.
Настройки конвертирования JPG в WebP в сервисе
После конвертирования файл стал весить 238,21 kB.
Zamzar
Простой онлайн-сервис Zamzar для конвертирования изображений. Перетаскиваете изображение в поле, выбираете нужный формат из списка и нажимаете на конвертирование, других настроек нет. Дальше останется скачать готовый файл.
Интерфейс приложения
Исходный файл весил 507,88 kB, итоговый 355 kB.
Приложения
Webpconv для Windows
Приложение
Webpconv для конвертирования разных форматов в WebP. Работает с установкой и портативно. Webpconv может конвертировать несколько файлов одновременно, кодировать JPEG и PNG в WebP и обратно. Есть меню для настройки кодирования, чтобы получить более качественный файл и настроить итоговый размер.
Окно настройки кодирования
Photoshop-плагин для Windows и Mac
Для редактора Photoshop есть отдельный
бесплатный плагин, позволяющий открывать и сохранять 24-битные изображения WebP. Плагин поддерживается версиями Mac CS2 / 3/4, Mac CS5 / CS6 и Windows (32 и 64 бит). На Photoshop CC не работает.
Выбор формата
WebPonize для Mac
Для работы с изображениями для Mac есть инструмент
WebPonize — проект с открытым исходным кодом на Github. После установки можно конвертировать изображения в в формат WebP на Mac — просто перетащить изображение в поле.
Демонстрационное изображение WebPonize
Sketch для Mac
Если вы работаете в платном редакторе векторной графики
Sketch, изображения оттуда можно экспортировать сразу в WebP.
Экспорт изображения в редакторе
Редактор предназначен для работы с устройствами на базе MacOS, доступна бесплатная версия на 30 дней.
Инструменты командной строки
Форматы JPEG, PNG и TIFF в WebP конвертируют с помощью утилиты cwebp, а декодируют с помощью dwebp.
Инструмент
cwebp — самый популярный для кодирования изображений в файлы формата WebP. После установки утилиты можно настраивать уровень качества изображения, задавать имена файлам и работать с другими опциями.
# cwebp -q -o cwebp -q 75 image.png -o image.webp
Декодирование работает по такому же принципу.
Инструменты Node
Самые популярные библиотеки для конвертации —
Imagemin с плагином imagemin-webp. Пример скрипта для конвертирования в WebP всех файлов форматов PNG и JPG из папки:
/* convert-to-webp.js */
const imagemin = require("imagemin");
const webp = require("imagemin-webp");
imagemin(, "images", {
use:
});
Этот скрипт можно использовать из командной строки или с помощью сборщика:
node convert-to-webp.js
Настройка для Mac OSX
Для настройки у вас должен быть установлен Xcode. Порядок дальнейших действий:
- Загрузите и установите MacPorts.
- Запустите Terminal.
- Обновите MacPorts до последней версии: введите «sudo port selfupdate» и нажмите ввод.
- Для установки libwebp (WebP Library) введите «sudo port install webp» и нажмите ввод.
Процесс установки
Picosmos
Picosmos is a package of utility tools for image processing, including editing, watermarking, optimizing, screen recording, etc. It lets you batch convert WebP to JPG, as well as convert one WebP to JPG at a time.
After launching Picosmos, select Batch tool from its interface. In a new window, you can see various options including Convert at left panel. From the right panel, you can browse a folder of WebP images. Select a WebP image or multiple WebP images from browsed folder, and click on Convert option. A popup window will be generated, where you will be able to choose output format, resolution, JPG quality, and destination folder.
Another alternative to convert WebP to JPG is by using its Editor tool. Here, you can open a WebP image and use save as option to convert it to JPG format. In this mode, you can add some filters to output image, apply transformation, adjust color level, and do more picture editing.
Picosmos is a good option in this list of WebP to JPG converter software. You can read its full review here > Picosmos Review.
IrfanView
IrfanView is a popular graphic viewer for Windows. Converting WebP images to JPG in it is similar to that of Paint.Net.
To start with, you need to download required plugin from here. You can simply run the downloaded .exe plugin file to let it associate WebP DLL file with the software. But, in case you downloaded ZIP folder of the plugin, you need to manually copy and paste WebP DLL file to the installed IrfanView folder (in ‘Plugin’ subfolder). Now, you can open any of WebP files stored in your PC, flip it, rotate it, edit it, etc. And finally, to convert it to JPG, use “Save as” option.
Unlike Paint.Net, you can batch convert WebP to JPG in IrfanView, which is a plus point for this software. In order to do so, go to File > Batch Conversion or press key B; a new application window will popup. Choose mode as Batch Conversion, add desired WebP images, select Output format as JPG, choose output rename pattern, and specify output directory. In addition to that, it lets you choose output JPG quality and enable/disable other parameters like “save as progressive JPG”, “keep original EXIF data”, etc. Also, you can specify some advanced output properties, like crop, resize, change color depth, flip, rotate, sharpness, brightness, contrast, filters, etc. These output settings can be saved to a INI file, to utilize later. Finally, you need to hit Start Batch button.
IrfanView is a feature rich photo editor software. It supports a wide range of multimedia formats. You can use this software for different purposes, like CDR Viewer, EXIF Editor, CAD Viewer, Batch File Renamer, etc.
File Converter
File Converter is a shell extension for file format conversion. As you install this software, it is automatically added to the context menu of supported file formats. It supports a wide number of file formats including WebP, PNG, JPG, FLAC, AAC, OGG, MP3, WAV, MKV, MP4, AVI, GIF, PDF, etc.
To use it to convert WebP to JPG, you simply need to go to the location where WebP images are stored and right-click on a WebP file. Under the context menu, you will see File Converter > To Jpg option. You need to choose this option for converting WebP to JPG. Before doing this, you can use Configure presets option to adjust some output JPG parameters. These parameters include quality, scale, rotate, etc.
In similar manner, File Converter can be used to convert various other file formats, like PDF to PNG, WebP to PNG, MP3 to WAV, MP4 to MP3, MP4 to GIF, MP4 to WAV, etc.
File Converter is an easy and convenient WebP to JPG converter tool for Windows.
Chasys Draw IES
Chasys Draw IES is a set of various utility tools, including Chasys Draw IES Viewer, Chasys Draw IES Artist, Chasys Draw IES Converter, etc. You need to launch Chasys Draw IES Converter in order to convert WebP to JPG. For this, there are nine steps to follow, which are pretty simple:
- Add a folder containing WebP files.
- Select a desired Target Folder to save output.
- Specify Renaming Options like pattern, text case, etc.
- Choose target file format as JPG.
- Select Resizing Options, including image size and resizing algorithm. Skip this step if you want same size as the input image.
- If you want, you can apply Effects and Transformations, like rotation, noise reduction, etc.
- Other options that it lets you customize are Privacy (remove EXIF tags for GEO location and date and time) and Automation (Passthru for unchanged files).
- In this step, you can view summary of the options selected in above steps. In case you want to make changes, you can go back and do so.
- Finally, hit the START button. The WebP files will be converted to JPG in the blink of an eye.
It also shows job log which includes information like time taken in conversion, number of converted files, number of files failed to convert, etc.
Chasys Draw IES is a nice alternative to use to convert WebP to JPG. This software is useful for various other purposes, like photo noise reduction, DNG viewer, NEF viewer, and more.
Фон
Вероятно, вы привыкли к тому, что загрузки изображений из Интернета отображаются в широко используемых форматах png или jpg. Однако в macOS Big Sur и Safari 14 (то же самое в Firefox) загрузки изображений изначально сохраняются в новом формате webp, и это невозможно изменить, по крайней мере, на данный момент.
Формат был разработан Google и стремится сделать Интернет быстрее с помощью более эффективных изображений меньшего размера.
Любопытно, что на момент написания последняя версия Google Chrome все еще загружала изображения в формате png.
На данный момент разочаровывает то, что webp не так совместим с программным обеспечением для редактирования изображений, поэтому вам часто придется конвертировать его в другой формат. Давайте рассмотрим встроенную опцию для преобразования изображений webp в jpg, png и другие, а также быстрый вариант, если вы делаете этот процесс часто.
Как сделать JPEG из WebP
Существует несколько способов конвертировать WebP в более удобоваримый для компьютера и штатных инструментов редактирования формат.
Самый простой, но «грязный» – не скачивать картинку, а сделать её скриншот прямо на сайте. Для удобства рекомендую воспользоваться комбинацией клавиш Shift+CTRL+CMD+4. Правда, более-менее приемлемый результат удастся получить только на компьютерах с большим разрешением экрана, а вот на старых MacBook Air, например, качество будет откровенно так себе.
Конвертация картинок на Mac
Способ посложнее состоит в том, чтобы произвести конвертацию прямо на Mac. Несмотря на то что для этого не потребуется дополнительных программных инструментов, этот способ доступен не всем. Во всяком случае, на macOS High Sierra его нет, а значит, он появился только в более новых версиях ОС:
- Сохраните на Mac картинку в формате WebP;
- Откройте её через штатную утилиту «Просмотр»;
В новых версиях macOS есть возможность изменить формат картинки вручную
- В верхнем меню выберите «Файл – «Дублировать»;
- Закройте дубликат, выберите формат JPG и сохраните его.
Google решила сделать Chrome таким же безопасным, как Safari
Ну, и третий способ, который позволяет относительно быстро и без стороннего ПО конвертировать изображения в формате WebP во что-то более привычное, состоит в том, чтобы воспользоваться онлайн-конвертерами.
Онлайн-конвертер картинок
На самом деле их по интернету существует довольно много, но мне привычнее пользоваться iLoveIMG. Он обладает приятным и ненавязчивым интерфейсом и отличается высокой скоростью конвертации.
- Перейдите по этой ссылке на сайт iLoveIMG.com;
- В открывшемся окне выберите раздел Convert to JPG;
Онлайн-конвертация — один из самых простых способов
- Перетащите в окно конвертации изображение с Mac;
- Нажмите Convert to JPG и скачайте готовую картинку.
Формат WEBP, что это такое? Плюсы и минусы этих картинок
Здравствуйте, друзья! Формат WEBP – это формат изображений для веб-картинок. Он был разработан компанией Google в 2010 году. В данный момент он широко распространен в Интернете и постоянно обновляется разработчиками.
С помощью формата WEBP, можно сжимать изображения с потерями качества или без потерь. Вместе с тем, он увеличивает скорость загрузки изображений на сайтах.
Какие плюсы и минусы у формата? Преимущества WEBP следующие:
- картинку в формате WEBP можно просматривать в популярных браузерах;
- формат увеличивает скорость загрузки картинок;
- есть возможность уменьшать объем картинки в формате WEBP.
Минусов у данного формата несколько – его поддерживают не все браузеры для просмотра. В некоторых браузерах, нельзя скачать на компьютер картинку в этом формате.
Далее, рассмотрим, как открывать формат WEBP на компьютере, какие программы и браузеры использовать.
Сайты для конвертации WebP в JPG или PNG
Преобразование изображений, редактирование и преобразование изображений WebP
Это очень просто использовать веб-приложение это позволит нам конвертировать формат WebP в PNG, JPG, PDF, GIF, SVG и другие. Это так же просто, как нажать «Выбрать файлы» и загрузить изображение WebP на платформу. Его также можно загрузить из нашей учетной записи Dropbox или включая URL . Перед преобразованием мы можем внести некоторые внутренние изменения, такие как настройка качества, цвета или размера изображения. По завершении нажмите кнопку «Начать преобразование», чтобы выполнить процесс. После завершения процесса мы можем загрузить файл, загрузить файл в виде сжатого файла, загрузить его в облако.
EZGIF, конвертировать файлы или ссылки WebP
Это инструмент, который позволяет нам конвертировать файлы из одного формата в другой , поэтому у нас не будет проблем с переносом изображений WebP в JPG ИЛИ PNG. Это так же просто, как нажать на кнопку «Выбрать файл», выбрать его на нашем компьютере (максимум 35 МБ), нажать «Загрузить» и дождаться его загрузки. Это также можно сделать, вставив URL-адрес изображения в раздел «ИЛИ вставить URL-адрес изображения». После того, как файл загружен, он покажет нам различные варианты редактирования, такие как обрезка, поворот, изменение размера или выбор качества изображения. Чтобы преобразовать файл, мы должны нажать «Конвертировать в JPG».
Если вы хотите преобразовать формат WebP в JPG или PNG с помощью EZGIF, вы можете сделать это, открыв их веб-сайт Честного ЗНАКа .
Convertio, поддерживает файлы WebP размером до 100 МБ
Это полноценный веб-инструмент, с помощью которого мы можем конвертировать любое изображение WebP в формат изображения (JPG, PNG, GIF и т. д.), документ (PDF, DOC, XPS и т. д.), электронную книгу (EPUB, PDB, AZW3 и т. д.), шрифт (PS), вектор (SVG, PS, AI и т. д.) или CAD (DXF). Процесс так же прост, как нажатие на кнопку «Выбрать файлы», и мы указываем, в какой формат мы хотим преобразовать. При выборе файла он может иметь максимальный размер 100 МБ без регистрации, и мы можем выбрать его на нашем собственном жестком диске в облачной службе, такой как Dropbox или Google Drive. Также возможно преобразовать файл, вставив его URL. После загрузки мы нажмем кнопку «Конвертировать», и появится кнопка загрузки преобразованного изображения. В качестве отрицательного момента укажите, что этот сайт нет редактора.
Конвертируйте ваши файлы WebP в JPG или PNG с помощью Convertio, нажав этой ссылке .
WebP vs JPEG: данные исследования
В январе 2019 года Google обновили
исследование, в котором сравнивали сжатие изображений с помощью WebP и JPEG.
Как проводили исследование
Использовали два типа оценок. В первом случае генерировали изображения WebP того же качества, что и изображения JPEG, а затем сравнивали размеры получившихся файлов. Качество измеряли с помощью индекса SSIM, для вычисления использовали
общедоступную реализацию на C ++.
Для второй оценки анализировали графики качества и битов на пиксель (bpp) для WebP и JPEG. Эти графики показывают компромисс между искажениями и скоростью для обоих форматов.
Изображения брали из нескольких наборов:
- Lenna — картинки 512 x 512 px;
- Kodak — 24 изображения из набора цветных изображений Kodak;
- Tecnick — 100 цветных изображений RGB из коллекции Tecnick.com;
- Image_crawl — случайная выборка картинок PNG из базы данных веб-сканирования Google Image Search.
Результаты исследования
По первому методу оценивания выяснилось, что при одинаковом качестве средний размер файла WebP на 25-34% меньше по сравнению с размером файла JPEG.
Средний размер файла с одинаковым качеством, JPEG Q = 75
По методу подсчета битов на пиксель графики показали, что при одинаковом индексе SSIM для сжатия WebP нужно меньше битов на пиксель, чем для JPEG.
График для набора данных Kodak
По итогу исследования ясно, что WebP может обеспечить лучшее сжатие изображения по сравнению с JPEG.
Paint.Net
Paint.Net is a popular photo editor software for Windows. Converting WebP to JPG in it is different from above mentioned software. It doesn’t inherently support WebP format. You need to follow some steps in order to utilize it as a WebP to JPG converter.
To Convert WebP to JPG in Paint.Net:
- First of all, you need to download a plugin for WebP file type from the aforementioned link.
- After you download this plugin, you need to extract the files of downloaded ZIP folder. In the extracted folder, you will find three DLL files. You need to copy these dll files and paste them in Paint.Net folder in your PC. To be precise, you need to paste these DLL files to installed Paint.Net folder > FileTypes subfolder.
- It will now support WebP image format. You can browse a WebP image, and use its save as option to convert WebP to JPG.
As it is primarily a picture editor, you can edit WebP photos as per your requirement, before converting them to JPG.
In similar manner, Paint.Net can also be used to convert PNG to Icon, SVG editor, etc.
Стандартная программа Paint
Помочь перевести png в jpg может весьма простой и функциональный программный комплекс, который не нужно устанавливать дополнительно. Paint — логичная и простая программа, которая устанавливается на компьютере вместе с операционной системой, кроме того, она не требует в отличие от Photoshop, например, профессиональных знаний и дорогостоящей лицензии.
Воспользоваться возможностями Paint можно сразу же после открытия программы и картинки. В перечне возможных операций, представленных Paint, нужно найти пункт «Сохранить как», дальше появится небольшое подменю, в котором придётся найти «Изображение с расширением JPEG». Пользователю нужно только указать место, в которое требуется сохранить картинку. Однако при работе со встроенным редактором нужно быть готовым к тому, что конечное полученное изображение может иметь не такое высокое качество как исходное, в этом кроется недостаток стандартной программы. Photoshop — более мощный инструмент, который способен на выходе отдавать одинаково качественные по сравнению с получаемыми картинки и фото.
Как использовать WebP на сайте
Если вы хотите использовать формат WebP для браузеров, сделайте копию всех изображений в формате WebP и создайте скрипт, который будет проверять браузеры пользователей на поддержку WebP. Если поддержка есть, пользователь увидит картинки в этом формате.
При этом нужна система с резервными вариантами (fallback), на случай, если пользовательский браузер не воспринимает WebP.
Проверка форматов браузера
Способ, где скрипт проверяет браузер на поддержку формата и при ее наличии отдает WebP.
Систему с резервными вариантами для WebP можно настроить через HTML5-элемент picture. Альтернативные форматы добавляют с помощью элемента source внутри picture. В дополнение нужно оставить и обычный img, он будет использован для браузеров, которые не поддерживают форматы файлов через picture:
<picture> <source type="image/webp" srcset="image.webp"> <source type="image/jpeg" srcset="image.jpg"> <img src="image.jpg" alt="Изображение"> </picture>
Атрибуты элемента source для определения формата и условий использования:
- type — MIME-тип формата;
- srcset — путь к файлу изображения, можно использовать несколько файлов с разными размерами и PPI — плотностью пикселей;
- sizes — список размеров каждого файла;
- media — запрос, определяющий источник для вывода картинки.
Специалист по оптимизации Деми Мурыч не советует использовать этот способ, так как он приведет к увеличению узлов в DOM-дереве на каждое изображение, а это увеличит расход памяти и замедлит скрипты.
Согласование при помощи заголовка Accept
Способ, подразумевающий использование заголовка Accept.
Браузеры передают заголовок Accept в виде строки. Для браузера Opera нужно указать все форматы:
Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Для Chrome нужно отдельно указать только WebP:
Accept: image/webp, */*;q=0.8
Можно настроить автоматическую передачу WebP с веб-сервера. Конфигурация в Nginx и Apache будет аналогичной. В файл конфигурации добавляем подобную запись:
location / {
# проверка заголовка Accept и наличия версии файла в .webp
if ($http_accept ~* "webp") { set $webp_accept "true"; }
if (-f $request_filename.webp) { set $webp_local "true"; }
# если WebP есть, то передать Vary
if ($webp_local = "true") {
add_header Vary Accept;
}
# если клиент поддерживает WebP, то передать файл
if ($webp_accept = "true") {
rewrite (.*) $1.webp break;
}
}
Если в Accept нет поддержки WebP, то сервер будет передавать файлы других форматов.
Конфигурация будет другой, если Nginx используют как прокси для
кэширования статических элементов. В таком случае нужно проверить запросы на наличие индикатора WebP и перенаправить на удаленные серверы:
server {
location / {
if ($http_accept ~* "webp") { set $webp T; }
proxy_cache_key $scheme$proxy_host$request_uri$webp;
proxy_pass http://backend;
proxy_cache my-cache;
}
}
Формат WebP можно назвать перспективным — он позволяет облегчить изображение, сохраняя его качество, а значит уменьшить размер страницы сайта. Но такой формат поддерживают не все браузеры, поэтому рекомендуем иметь несколько вариантов картинок и настроить веб-сервер так, чтобы выдавать пользователям картинки в WebP, если поддержка есть.
