Как выбрать формат изображений для сайта

Три вопроса, с которых стоит начать

На реальном сайте выбор формата для каждого изображения сводится к трём вопросам:

1. Что на нём изображено? Фотографиям подходят форматы с потерями — JPG, WebP с потерями и AVIF, — потому что мелкие погрешности теряются среди естественных деталей. У скриншотов, текста, диаграмм и графики с однотонными заливками резкие края, вокруг которых сжатие с потерями может оставлять заметные ореолы. Поэтому для них подходят форматы без потерь (PNG, WebP без потерь), а если графика построена из фигур — SVG.
2. Нужны ли прозрачность или анимация? В JPG нет ни того, ни другого. PNG, WebP и AVIF могут хранить полноценный альфа-канал с мягкими краями. Пиксели GIF бывают либо полностью прозрачными, либо полностью непрозрачными, поэтому плавные изгибы на цветном фоне могут выглядеть зубчатыми или с каймой. Анимацию могут содержать GIF, WebP, AVIF и APNG (анимированный PNG), но короткое видео часто оказывается намного меньше GIF.
3. Где изображение будет опубликовано? На собственных HTML-страницах можно предложить несколько форматов. Система управления контентом (CMS), интернет-магазин или форма загрузки сами решают, какие файлы принимать, и могут конвертировать их самостоятельно, поэтому сверьтесь с их актуальной документацией. Почтовые программы различаются сильнее, чем браузеры, поэтому для рассылок надёжнее JPG и PNG.

Как устроен каждый формат, рассказывается в руководстве «JPG, PNG, WebP или AVIF».

Формат по типу содержимого: таблица выбора

Если вы отдаёте AVIF или WebP на собственных страницах, сохраняйте версию в JPG или PNG для браузеров и приложений, которые не умеют их показывать. Если платформа принимает только один файл, безопасным выбором обычно будет формат из столбца запасных вариантов. Для фавиконов действуют свои правила; см. руководство «Фавиконы: размеры, форматы и HTML-теги».

Для зацикленной анимации в духе GIF на веб-странице часто используют беззвучное видео <video> с атрибутами autoplay, loop, muted и playsinline, поскольку браузеры, как правило, разрешают автоматически воспроизводить видео без звука. В электронных письмах некоторые настольные версии Outlook показывают только первый кадр анимированного GIF, поэтому главное сообщение размещайте именно в нём.

Как отдавать WebP или AVIF с запасным вариантом

На страницах, HTML-код которых вы пишете сами, элемент <picture> позволяет каждому браузеру выбрать первый поддерживаемый им формат:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Тарелка пасты с томатным соусом" width="1600" height="1200">
</picture>

Браузер читает элементы <source> по порядку и пропускает те, чей type он не поддерживает. Обязательный элемент <img> содержит альтернативный текст, а также ширину и высоту, по которым браузер заранее резервирует место на странице; его файл показывается, если не подошёл ни один источник. С CSS вроде img { max-width: 100%; height: auto; } изображение по-прежнему уменьшается под узкие экраны и сохраняет пропорции. Чтобы заодно предложить несколько размеров, перечислите в srcset все файлы с указанием их ширины и добавьте атрибут sizes, как описано в руководстве «Изменение размера изображений: пиксели, пропорции и DPI».

Многие CMS и CDN для изображений умеют создавать копии в WebP или AVIF и подбирать подходящую версию для каждого посетителя. Если ваша система это умеет, загружайте в неё JPG или PNG высокого качества и поручите конвертацию ей. Не загружайте файл, который вы уже сильно сжали: иначе изображение будет сжато дважды.

Пример: изображения для одной статьи

Допустим, в статье с рецептом три изображения, а колонка текста имеет ширину не более 760 CSS-пикселей.

• Главная фотография. Оригинал с телефона имеет размер 4032 × 3024 пикселя, это около 12,2 мегапикселя. Для колонки шириной 760 пикселей на экране с двумя физическими пикселями на один CSS-пиксель нужно около 1520 пикселей по ширине, поэтому размер 1600 × 1200 сохраняет пропорции 4:3 и даёт 1,92 мегапикселя — примерно 16 % от оригинала. Сначала уменьшите изображение, а затем сохраните его в AVIF или WebP и добавьте запасной JPG: в полноразмерном оригинале пикселей более чем в шесть раз больше, чем в версии 1600 × 1200, и большую их часть браузер всё равно отбросил бы при масштабировании.
• Логотип с прозрачным фоном. PNG от дизайнера имеет размер 1000 × 500 пикселей и выводится шириной 200 CSS-пикселей, поэтому размера 400 × 200 хватит и для экранов с двумя физическими пикселями на один CSS-пиксель. Оставьте его в PNG или WebP: JPG заполнит прозрачные области сплошным цветом, и на цветной шапке сайта появится прямоугольник. А если дизайнер может экспортировать логотип в SVG, это ещё лучше.
• Скриншот приложения-таймера. Текст и однотонные заливки — сохраните его в PNG. JPG может оставить вокруг букв крапинки, а такие артефакты читатели замечают сильнее, чем мелкие погрешности на фотографии.

Конвертация файлов в конвертере изображений LeedyBox

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

1. Нажмите «Выберите файлы или перетащите их сюда» или перетащите в эту область файлы PNG, JPG, WebP, BMP, GIF или AVIF. Файлы других типов, например HEIC или SVG, а также файлы, которые ваш браузер не может декодировать, отклоняются с сообщением.
2. У каждого файла появляется своё меню формата (на широких экранах — с подписью «To:»), в котором изначально выбран JPG. Выберите JPG, PNG, WEBP, BMP, AVIF или ICO для каждого файла отдельно или для всех сразу с помощью пункта «Установить все форматы как...» в разделе «Пакетные настройки».
3. Нажмите «Конвертировать и скачать». Один файл сохраняется под именем вроде logo_converted.webp; несколько файлов скачиваются в архиве leedybox_converted_images.zip.

• Размеры в пикселях не меняются, за исключением ICO. Предварительно уменьшите изображение в инструменте «Изменение размера изображений» или воспользуйтесь параметром «Также ограничить ширину и высоту» в инструменте «Сжатие изображений».
• Для JPG, WebP и AVIF конвертер запрашивает у браузера качество 0,92 по шкале от 0 до 1, а ползунка качества в нём нет. Эта настройка ставит детализацию выше размера файла. Кроме того, WebP сохраняется с потерями: варианта WebP без потерь нет, поэтому скриншоты и графику с текстом конвертируйте в PNG. Чтобы получить файлы поменьше, воспользуйтесь инструментом «Сжатие изображений»: в нём есть ползунок качества (по умолчанию 75) и целевой размер файла; см. руководство «Как работают настройки сжатия изображений».
• В файлах JPG и в файлах BMP, которые создаёт конвертер, нет прозрачности, поэтому прозрачные области становятся белыми. Кроме того, BMP сохраняется без сжатия — 3 байта на пиксель (каждая строка дополняется до длины, кратной 4 байтам) плюс 54-байтовый заголовок: изображение 1200 × 800 займёт 2 880 054 байта (около 2,9 МБ) независимо от того, что на нём изображено. Поэтому BMP не место на веб-страницах.
• Файл ICO содержит одно изображение PNG и сохраняет прозрачность. Если хотя бы одна сторона изображения длиннее 256 пикселей, оно уменьшается так, чтобы уместиться в 256 × 256: логотип 1000 × 500 станет 256 × 128. Изображения поменьше сохраняют свой размер. Чтобы получить favicon.ico с размерами 16, 32 и 48 пикселей, а также PNG-значки и Apple touch icon, воспользуйтесь инструментом «Генератор фавиконов».
• AVIF можно выбрать, только если ваш браузер умеет создавать файлы AVIF, а многие браузеры пока этого не умеют; в таком случае в списке он обозначен как «AVIF (не поддерживается этим браузером)». Если браузер не может создать выбранный формат (возможность сохранять WebP тоже зависит от браузера), появляется сообщение и ничего не сохраняется — данные PNG не записываются в файл с неверным расширением. Если файлов несколько, одна такая ошибка останавливает обработку всего пакета, и ZIP-архив не создаётся.
• Каждое изображение перерисовывается и кодируется заново, поэтому EXIF-данные, GPS-координаты и цветовой профиль оригинала не переносятся, а анимированный GIF, WebP или AVIF превращается в статичное изображение из одного кадра. Конвертер не создаёт SVG, GIF и анимированные файлы.

Типичные проблемы и их решение

• Вокруг прозрачного логотипа появился белый или чёрный прямоугольник. Скорее всего, его сохранили в JPG или в BMP без прозрачности. Используйте PNG или WebP. Подробнее — в руководстве «Почему прозрачный PNG теряет фон при конвертации в JPG?».
• PNG намного больше JPG, из которого он получен. PNG хранит каждый пиксель точно, включая шум и артефакты сжатия JPG, а конвертация не возвращает детали, которые JPG уже потерял. Для фотографий используйте WebP или JPG.
• Форма загрузки не принимает WebP или AVIF. Некоторые формы принимают только JPG и PNG. Конвертируйте фотографии в JPG, а прозрачную графику — в PNG. Если просто сменить расширение в имени файла, формат от этого не изменится.
• Файл WebP почти не меньше исходного JPG или даже больше него. Возможно, исходный JPG уже был сильно сжат, а качество 0,92, с которым сохраняет конвертер, оставляет много деталей — в том числе собственные артефакты JPG, на хранение которых тоже уходят байты. Если файл в любом случае получается слишком большим, возможно, изображение всё ещё в исходном размере, как с камеры. Уменьшите его до размера отображения, затем воспользуйтесь инструментом «Сжатие изображений» и сравните результаты.
• Цвета выглядят тусклее, чем в оригинале. Конвертер отрисовывает каждое изображение на холсте (canvas) браузера, который по умолчанию работает в sRGB, и не сохраняет исходный цветовой профиль. Фотографии в цветовом пространстве с расширенным охватом, например Display P3 или Adobe RGB, могут лишиться части самых насыщенных цветов; сильнее всего это заметно на экранах с широким цветовым охватом. Экспортируйте копию в sRGB из фоторедактора, проверьте её там же и конвертируйте именно её.
• Фотография в формате HEIC с телефона не принимается. HEIC нет в списке форматов конвертера. Многие телефоны умеют экспортировать фотографии или делиться ими в формате JPG — конвертируйте такую копию.

Что проверить перед публикацией

• Откройте страницу в двух браузерах и на телефоне. Если используется <picture>, проверьте и запасной вариант, временно убрав источники AVIF и WebP.
• Сравните новый файл с оригиналом в натуральную величину, обращая внимание на лица, текст и градиенты.
• На вкладке «Сеть» (Network) в инструментах разработчика браузера проверьте, какой файл был загружен и каков его размер.
• Если у сайта есть тёмная тема, посмотрите, как прозрачные изображения выглядят и на светлом, и на тёмном фоне.
• Храните оригиналы и конвертируйте из них: при повторном сохранении файла с потерями к старым погрешностям добавляются новые.

Часто задаваемые вопросы