SVG, PNG, JPG или WebP: какой формат выбрать для сайта

Все форматы из этой статьи можно разделить на две большие группы.
Растровые изображения состоят из пикселей. К ним относятся JPG, PNG и WebP. Они хорошо подходят для фотографий и сложных картинок с большим количеством оттенков. Но при сильном увеличении растр может стать нечётким.
Векторные изображения описываются линиями, кривыми и геометрическими объектами. Основной формат из этой группы — SVG. Вектор можно увеличивать и уменьшать без характерной пикселизации, поэтому он удобен для логотипов и интерфейсных иконок.

SVG расшифровывается как Scalable Vector Graphics — масштабируемая векторная графика. Внутри такого файла находятся не пиксели, а описание линий, фигур, заливок и текста.

Когда использовать SVG

• логотипы;
• иконки интерфейса;
• простые иллюстрации;
• стрелки и декоративные линии;
• схемы и диаграммы;
• графика с небольшим количеством цветов.

Главное преимущество SVG — чёткость на любом экране. Логотип будет одинаково аккуратно выглядеть на обычном мониторе, Retina-дисплее и большом экране.
SVG часто весит меньше растровой картинки, если изображение простое. Кроме того, его можно стилизовать через CSS, а в некоторых случаях — анимировать.
Что учитывать
SVG не всегда подходит для фотографий. Сложное растровое изображение, переведённое в вектор, может стать очень тяжёлым и неудобным в работе.
Также не стоит загружать на сайт SVG-файлы из неизвестных источников без проверки. Внутри SVG может содержаться дополнительный код. Используйте файлы из надёжных источников и очищайте их перед публикацией, если это необходимо.

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

Когда использовать PNG

• изображения с прозрачностью;
• скриншоты интерфейсов;
• небольшие схемы;
• графика с резкими границами;
• изображения, где важны точные детали;
• логотипы, если нет исходника в SVG.

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

Если прозрачность не нужна, сначала проверьте, можно ли использовать WebP или JPG.

JPG — один из самых распространённых форматов для фотографий. Он использует сжатие с потерями: часть данных удаляется, зато файл становится значительно легче.

JPG хорошо подходит для

• фотографий товаров;
• портретов;
• фотографий интерьеров;
• фоновых изображений;
• баннеров без прозрачности;
• сложных изображений с плавными переходами цвета.

Качество JPG можно регулировать. При слишком сильном сжатии вокруг текста, контрастных границ и мелких деталей появляются артефакты. При слишком слабом сжатии файл остаётся тяжёлым.

Для сайта обычно важно найти баланс: изображение должно выглядеть хорошо в реальном размере, но не занимать лишние мегабайты.

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

Почему WebP удобен

• часто весит меньше JPG при сопоставимом визуальном качестве;
• может поддерживать прозрачный фон;
• подходит для фотографий и графики;
• помогает уменьшить объём загрузки страницы;
• поддерживается современными браузерами.

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

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

Используйте простую схему:

• Логотип или иконка — SVG.
• Фотография — WebP или JPG.
• Фотография с прозрачностью — WebP.
• Скриншот с мелким текстом — PNG или WebP после проверки качества.
• Простая иллюстрация с прозрачным фоном — SVG или PNG.
• Большая фоновая фотография — WebP или оптимизированный JPG.
• Файл для печати или передачи дизайнеру — это отдельная задача, там могут потребоваться исходные форматы и высокое разрешение.

Формат — только одна часть подготовки. Даже идеальный WebP может быть слишком тяжёлым, если его ширина в несколько раз больше реального блока на странице.

1. Реальные размеры
Если изображение показывается в блоке шириной 600 пикселей, нет необходимости загружать фотографию шириной 6000 пикселей. Браузер сначала скачает большой файл, а затем уменьшит его на экране.
Подбирайте размер с небольшим запасом для экранов высокой плотности, но не оставляйте огромный исходник без необходимости.
2. Вес файла
Один тяжёлый файл может показаться незначительной проблемой, но на странице обычно несколько изображений. Суммарный вес быстро увеличивается.
Проверьте обложку, карточки, фоновые картинки и изображения внутри статей. Особенно внимательно — первый экран: его содержимое влияет на первое впечатление от загрузки.
3. Качество сжатия
Сжатие должно быть заметно только в отчёте о размере файла, а не на экране пользователя. Смотрите на фотографию в том размере, в котором она будет показана на сайте.
4. Соотношение сторон
Не всегда нужно загружать фотографию целиком. Если карточка использует соотношение 4:3, а исходник имеет длинные пустые края, лучше обрезать изображение заранее.

Загружать всё в PNG
PNG не делает любую картинку автоматически качественнее. Для фотографии он часто создаёт ненужный вес.

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

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

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

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

Перед загрузкой соберите отдельные версии файлов для сайта:

1. Определите место изображения на странице.
2. Узнайте примерную ширину блока.
3. Обрежьте фотографию под нужную композицию.
4. Выберите формат по назначению.
5. Измените размер и настройте качество.
6. Откройте готовый файл и проверьте детали.
7. Загрузите его в Tilda и протестируйте страницу после публикации.

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

Нельзя сказать, что один формат лучше всех остальных. SVG нужен для векторной графики, PNG — для прозрачности и точных деталей, JPG — для фотографий, а WebP — для лёгких веб-изображений в современных браузерах.
Выбирайте формат по задаче, а затем обязательно проверяйте размер, вес и качество файла. Именно сочетание этих параметров влияет на то, насколько быстро и аккуратно будет выглядеть сайт.
Если нужно быстро подготовить материалы для страницы, попробуйте конвертер изображений StyleDa. А если после оптимизации сайт всё ещё загружается медленно, можно обсудить техническую доработку сайта на Tilda.