JPG в WEBP
Формат назначения уже выбран. Перевод в WEBP делают ради веса страницы, и ниже сказано, сколько он дает на самом деле.
Формат назначения уже выбран: JPG в WEBP. Можно принести файл и в другом формате, инструмент справится. Считает браузер на вашем устройстве. Снимки с айфона в формате HEIC браузер не читает, их нужно сначала сохранить в JPG.
Бесплатно и без регистрации. Этот инструмент считает прямо в вашем браузере: файлы и текст остаются на вашем устройстве, на наш сервер из них не уходит ни байта. Владелец сайта - ООО «ФИИ», ИНН 5402076457, порядок обработки данных на сайте описан в политике. Обновлено .
Сколько дает перевод
При одинаковом на глаз качестве WEBP обычно легче JPG примерно на четверть, иногда на треть. Это не революция, но на странице с двумя десятками картинок разница складывается в мегабайты, а мегабайты это ушедший с телефона посетитель.
Выигрыш больше на картинках с плавными переходами и однородными участками. На мелкой детализации и шуме он меньше.
Важная оговорка: исходный JPG уже сжат с потерями, и перевод сжимает его второй раз. Если есть исходник до первого сжатия, лучше делать WEBP из него.
Где WEBP не откроется
Экономия имеет цену, и цена эта в совместимости.
- Windows до десятой версии. Просмотрщик не открывает.
- Старые почтовые программы. Не показывают вложение.
- Часть офисных пакетов. Не вставляют в документ.
- Формы и приемные. Принимают по списку расширений.
Поэтому правило простое: WEBP годится для сайта и не годится для отправки человеку. Если файл поедет кому-то в письме, оставьте JPG.
Как правильно положить WEBP на страницу
Не вместо JPG, а рядом с ним. Тогда современный браузер возьмет легкий WEBP, а старый откатится на JPG, и картинку увидят все.
Делается это тегом picture: внутри него сначала ставят source с WEBP, потом обычный img с JPG. Браузер идет по списку сверху вниз и берет первое, что понимает. Тег img в конце обязателен: он и есть запасной вариант.
Отдельно про размер кадра. Перевод формата не меняет число точек, а на странице картинка обычно показывается меньше, чем есть. Уменьшить кадр до нужного дает выигрыш кратный, а не на четверть, и делать это стоит до перевода: сжатие фото.
Что проверить после того, как положили WEBP на сайт
Перевод это половина дела. Вторая половина на стороне сервера, и там ломается чаще.
- Тип содержимого. Сервер должен отдавать файл как image/webp. Если он отдает его как поток байтов, браузер предложит скачать картинку вместо того, чтобы показать.
- Сжатие. WEBP сжимать повторно не нужно, он уже сжат. Лишний проход только тратит процессор.
- Запасной вариант. Откройте страницу в старом браузере или отключите поддержку и убедитесь, что показывается JPG, а не пустое место.
- Кеш. Если картинка лежала по тому же адресу, у вернувшихся посетителей останется старая. Меняйте адрес вместе с файлом.
Когда WEBP не даст выигрыша
Обещанная четверть это среднее, и есть случаи, где выигрыша не будет вовсе или он окажется отрицательным.
- Очень маленькие картинки. На иконке в пару килобайт служебные заголовки съедают всю экономию.
- Сильно сжатый исходник. Если JPG уже ужат до предела, сжимать второй раз почти нечего.
- Картинки с резкими границами. Скриншоты и схемы лучше держать в PNG, а не переводить в WEBP с потерями.
| Формат | Сжатие | Прозрачность | Анимация | Где открывается |
|---|---|---|---|---|
| JPG | с потерями | нет | нет | везде |
| PNG | без потерь | да, полная | нет | везде |
| WEBP | и с потерями, и без | да, полная | да | новые браузеры, не везде |
| GIF | без потерь, 256 цветов | да, грубая | да | везде |
| HEIC | с потерями | да | нет | техника Apple, браузер не читает |
Чего этот инструмент не делает
- Не делает WEBP без потерь. Формат это умеет, но для фотографий такой режим бессмысленно тяжелый.
- Не собирает варианты под разные экраны.
- Не меняет размер кадра.
- Не добавляет прозрачность. WEBP ее умеет, но взять ее из JPG неоткуда.
Частые вопросы
Насколько легче станет файл?
Обычно на четверть, иногда на треть при том же качестве на глаз.
Качество упадет?
Немного: исходный JPG уже сжат, и это второе сжатие. На глаз разница обычно не видна.
У всех ли откроется WEBP?
Нет. Windows до десятой версии, старые почтовые программы и часть офисных пакетов его не понимают.
Заменять ли JPG на сайте полностью?
Лучше класть оба и давать браузеру выбрать тегом picture.
Картинка уходит на сервер?
Нет, все считает браузер.
Другие инструменты
- WEBP в JPG - открыть картинку из интернета там, где WEBP не понимают
- JPG в PNG - перевести снимок в формат без потерь, когда этого требует программа
- PNG в JPG - уменьшить вес картинки и уложиться в требования формы
- WEBP в PNG - открыть картинку с прозрачным фоном там, где WEBP не понимают
- Конвертер картинок - перевести картинку между JPG, PNG и WEBP
- Сжать фото - уменьшить вес снимка, чтобы он влез в письмо или на сайт
- Обрезать фото - оставить нужный кусок снимка, мышью или по числам
- JPG в PDF - собрать несколько картинок в один документ PDF