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

Выбирайте SVG для векторных рисунков, PNG — для точного растра, WebP — для растровых изображений с настройкой сжатия. Проверьте качество и обработку в CMS.

Что сравниваем

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

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

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

Плюсы и минусы

SVG: контуры и масштабирование

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

Но расширение SVG не гарантирует, что всё содержимое векторное. Внутри может быть растровая картинка. Помещение фотографии в такой контейнер не добавит ей детализации. Также сложный рисунок с большим количеством контуров и эффектов может оказаться тяжёлым и неудобным для обработки.

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

PNG: точность растрового исходника

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

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

Если уменьшить изображение перед сохранением, часть деталей изменится независимо от того, что PNG сжимает без потерь. Различайте изменение размеров, предшествующую обработку и режим хранения. Фраза «без потерь» относится не ко всей истории редактирования файла.

WebP: выбор режима сжатия

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

Не обещайте одинаковое сокращение размера для всех изображений. Итог зависит от содержания, размеров и настроек. Условный снимок с плавными переходами и скриншот с мелкими надписями будут по-разному переносить обработку. Сравнение нужно выполнять на ваших материалах.

Поддержка браузером — только часть цепочки. Проверьте загрузчик CMS, создание миниатюр, обработчик изображений и внешнюю систему доставки, если она используется. Файл может открываться локально, но не проходить один из этапов публикации.

Что подойдёт под задачу

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

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

Как это сделать по шагам

1. Определите назначение. Запишите, где появится картинка, какой у неё размер показа и нужна ли прозрачность. Отдельно сохраните рабочий исходник, чтобы не зависеть от одной уже сжатой копии.
2. Посмотрите на устройство исходника. Если рисунок создан из контуров, подготовьте векторный экспорт. Если это фотография или скриншот, начните с растровых вариантов. Не считайте помещение растра внутрь SVG переводом в полноценный вектор.
3. Подготовьте сопоставимые варианты. Для сравнения растровых файлов используйте одинаковые размеры в пикселях и одно содержание. Отмечайте режим сжатия. Иначе разница в размере файла может объясняться уменьшением картинки, а не форматом.
4. Сравните важные детали. Посмотрите края, мелкий текст, фактуру и плавные переходы там, где они есть. Проверяйте обычный размер показа и увеличение для поиска дефектов. Не выбирайте вариант только по числу байтов.
5. Пропустите файл через CMS. Загрузите его штатным способом на тестовую площадку или в согласованный тестовый материал. Проверьте создание нужных миниатюр и конечный формат, который получает браузер.
6. Проверьте размещение. Откройте страницу на телефоне и широком экране. Посмотрите обрезку, прозрачность, загрузку и доступность изображения по фактическому адресу. Для важного содержания добавьте подходящую текстовую альтернативу средствами сайта.
7. Сохраните правило выбора. Запишите, какие варианты подходят для повторяющихся типов изображений, где лежат исходники и как проверять новые материалы. Для исключений оставьте возможность сравнить файлы отдельно.

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

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

Ошибки выбора

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

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

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

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

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

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

Свойства форматов описаны в справочнике MDN по изображениям. Возможности SVG поясняет введение в SVG, режимы WebP — официальная документация формата. Универсального процента экономии для ваших файлов из этих свойств не следует.

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

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

Вопросы и ответы

SVG всегда меньше PNG?

Нет. Простой векторный знак может быть компактным, а сложная графика с большим количеством элементов — тяжёлой. Также SVG может содержать растровое изображение. Сравнивайте конкретные файлы и их конечное отображение.

PNG без потерь восстановит качество маленькой картинки?

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

WebP подходит для прозрачного фона?

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

Почему SVG с фотографией не становится чётче при увеличении?

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

Можно ли выбирать файл только по размеру?

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

Оригинал загрузился, но в карточке картинка плохая. Что смотреть?

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