Форматы изображений: какой из них выбрать

Для фотографий на сайте выбирайте WebP, AVIF или JPEG, для логотипов – SVG. PNG подходит для скриншотов и растровой графики с прозрачностью. Для печати готовьте PDF или TIFF по требованиям типографии.

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

Обновлено: 2026-10-28 20:24:32 МГ Максим Галенкоавтор материала

Какой формат выбрать: коротко по задачам

Если вы выбираете PNG или JPEG, оцените содержание картинки. JPEG подходит для фотографий с плавными переходами цвета. PNG сохраняет текст, схемы и прозрачные края без артефактов сжатия.

Растровые и векторные изображения: в чем разница

Растровое изображение состоит из сетки цветных пикселей. Фотография размером 1200 × 800 пикселей содержит фиксированный объем деталей. При увеличении до 2400 × 1600 редактор вычисляет дополнительные пиксели. Такая операция сама по себе не восстанавливает подробности исходной сцены.

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

Векторный файл может содержать встроенную растровую фотографию. Она сохранит ограничения своего разрешения даже внутри SVG или PDF. Само расширение файла не делает все его содержимое масштабируемым.

Форматы для сайта и соцсетей

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

JPEG

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

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

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

PNG: PNG-8 и PNG-24

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

PNG-8 использует палитру максимум из 256 цветов. Он подходит для простых рисунков с небольшим количеством оттенков. Перевод фотографии в такую палитру может ухудшить цветовые переходы.

PNG-24 хранит полноцветное изображение с 24 битами цвета. В обозначениях экспорта вариант с дополнительным альфа-каналом иногда называют PNG-32. Сам формат PNG поддерживает плавную прозрачность, включая полупрозрачные края и тени.

Браузеры поддерживают PNG; анимацию в этом семействе обеспечивает APNG. Для фотографий полноцветный PNG обычно получается тяжелее форматов с потерями. Для скриншотов и схем со сплошными заливками он часто уместнее.

WebP

WebP поддерживает сжатие с потерями и без потерь. Формат также сохраняет прозрачность и анимацию.

Все современные основные браузеры умеют показывать WebP.

Для фото WebP часто дает меньший файл, чем JPEG сопоставимого качества. Результат зависит от изображения и настроек кодировщика. Для текста попробуйте режим без потерь и сравните его с PNG.

AVIF

AVIF поддерживает сжатие с потерями, режим без потерь и прозрачность. Формат также предусматривает последовательности изображений для анимации. Возможности конкретного редактора и браузерного воспроизведения могут различаться.

Современные основные браузеры поддерживают статические AVIF-изображения.

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

Для старых браузеров можно подготовить запасной JPEG через HTML-элемент <picture>. Браузер выберет подходящий источник из перечисленных вариантов.

SVG

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

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

Современные браузеры показывают SVG напрямую. Однако загрузку SVG могут ограничивать системы управления сайтами и социальные площадки. Полученные извне SVG проверяйте и очищайте перед размещением: формат допускает активное содержимое.

GIF и его замена

GIF использует палитру максимум из 256 цветов на кадр. Сжатие сохраняет индексированные данные без потерь, но сокращение палитры теряет оттенки. Поэтому фотография в GIF может выглядеть хуже оригинала.

GIF поддерживает анимацию и только однобитную прозрачность. Пиксель либо полностью виден, либо полностью прозрачен. Плавную полупрозрачную тень этот механизм не передает.

Браузеры поддерживают GIF, однако длинная анимация часто получается тяжелой. Для коротких прозрачных сцен рассмотрите анимированный WebP. Для записи экрана или фрагмента ролика выбирайте видео MP4/WebM: видеокодеки эффективнее используют сходство соседних кадров.

Свойства веб-форматов также описаны в справочнике форматов изображений MDN.

Форматы фото с камеры и телефона

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

JPEG и HEIC/HEIF

Камера сохраняет JPEG после обработки снимка: применяет баланс белого, цветопередачу и сжатие. Такой файл удобно отправлять без дополнительной подготовки. Для серьезной коррекции пересветов и цвета его возможностей меньше, чем у RAW.

HEIF – контейнер для изображений, а HEIC обычно обозначает его вариант с кодированием HEVC. Такие файлы могут хранить дополнительные изображения и метаданные. При сопоставимом качестве снимок HEIC часто занимает меньше места, чем JPEG.

Не рассчитывайте на открытие HEIC в любом браузере или приложении. В Windows возможность просмотра зависит от приложения и установленных компонентов декодирования.

Если получатель не видит снимок, отправьте отдельную JPEG-копию. Оригинальный HEIC оставьте в архиве.

RAW и DNG

RAW хранит исходные данные съемки для последующей проявки. Форматы производителей и DNG различаются устройством и совместимостью. RAW может использовать сжатие без потерь или с потерями – это зависит от камеры и режима записи.

RAW-файл не заменяет готовую фотографию для сайта или клиента. Сначала настройте экспозицию, баланс белого и цвет в RAW-конвертере. Затем экспортируйте копию в JPEG, WebP или другой подходящий формат.

Форматы для печати и обмена с типографией

Типография принимает файл вместе с техническими параметрами макета. Расширение не исправит неверные размеры, отсутствие вылетов или неподходящий цветовой профиль. Готовьте документ под требования конкретного заказа.

TIFF

TIFF поддерживает запись без сжатия и несколько способов сжатия. LZW и ZIP сохраняют данные без потерь. JPEG-сжатие внутри TIFF может уменьшать размер ценой потери деталей.

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

Если типография просит сведенный TIFF, экспортируйте копию без рабочих слоев. Многослойный исходник сохраните отдельно.

PDF и PDF/X

PDF объединяет текст, векторные объекты и растровые изображения. Он сохраняет размещение элементов на странице и подходит для передачи макета. PDF/X задает ограничения для полиграфического обмена.

Среди вариантов PDF/X используются PDF/X-1a и PDF/X-4. Выбирайте вариант, указанный типографией: они по-разному работают с цветом и прозрачностью. Не переводите весь документ в CMYK без учета требуемого профиля.

Перед отправкой проверьте размеры страницы, вылеты, шрифты и разрешение фотографий. У PDF нет единого качества картинки: растровые объекты внутри могут быть сильно сжаты.

EPS

EPS хранит описание страницы на PostScript и может содержать растр. Этот формат встречается в старых библиотеках логотипов и печатных процессах. Он не поддерживает современную живую прозрачность так, как PDF.

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

Исходные PSD и AI передавайте только при запросе на редактируемые материалы.

Рабочие форматы редакторов

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

PSD

PSD хранит слои, маски, текст и другие объекты Photoshop. Его открывают также GIMP, Photopea и Affinity Photo. Совместимость отдельных эффектов и редактируемых объектов может различаться.

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

AI

AI – рабочий формат Adobe Illustrator для векторных проектов. Он может включать растровые изображения и дополнительные данные редактора. Для сайта экспортируйте SVG или растровую копию нужного размера.

Inkscape может открыть PDF-совместимое содержимое AI, если оно сохранено внутри файла. Полного переноса структуры Illustrator это не гарантирует.

Для обмена без Adobe попросите SVG или PDF вместе с исходным AI.

Сравнительная таблица форматов

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

Как сохранить и сжать изображение для сайта

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

Подготовка в Squoosh

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

1. Откройте Squoosh и перетащите фотографию в область загрузки. После загрузки появится изображение для сравнения.
2. Включите изменение размера. Задайте ширину в пикселях и сохраните пропорции. Например, для блока шириной 800 CSS-пикселей можно подготовить версии шириной 800 и 1600 пикселей.
3. В списке кодировщиков выберите WebP, AVIF или JPEG. Для JPEG кодировщик может называться MozJPEG. Рядом с настройками отображается размер результата.
4. Перемещайте ползунок качества к меньшему значению. Остановитесь, когда заметите ухудшение деталей, затем немного повысьте качество. Одинаковое число у разных кодировщиков не означает одинаковый результат.
5. Передвиньте разделитель сравнения по изображению. При масштабе 100% осмотрите волосы, надписи, края предметов и градиенты. Квадраты и цветные ореолы указывают на слишком сильное сжатие.
6. Скачайте обработанную копию кнопкой загрузки. Сохраните ее под новым именем, оставив исходник нетронутым.
7. Откройте скачанный файл и его свойства. Сопоставьте размер в пикселях и объем файла с выбранными настройками.

Если результат не подходит, снова откройте исходник и измените настройки.

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

Как сравнить вес одного фото в разных форматах

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

Для собственного сравнения возьмите одно фото шириной, например, 1600 пикселей. По очереди экспортируйте его в JPEG, WebP, AVIF и PNG. Каждый раз используйте один исходник и одинаковые размеры. У форматов с потерями подбирайте похожее визуальное качество.

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

Экспорт из Photoshop или GIMP

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

В GIMP используйте «Файл» → «Экспортировать как». Укажите новое имя с расширением, например photo.jpg или logo.png. В параметрах JPEG подберите качество, затем откройте экспортированную копию для проверки.

Если нужного веб-формата нет в редакторе, экспортируйте PNG и обработайте его в Squoosh.

Логотип или иконка с прозрачностью

В Inkscape отдельно проверьте нарисованный фон и фон самой страницы. Белый прямоугольник под логотипом попадет в PNG даже при прозрачной странице.

1. Откройте векторный исходник в Inkscape. Если под знаком нарисован фоновый прямоугольник, выделите его и удалите. Если вместе с ним исчезли части логотипа, отмените удаление и выделите только фон.
2. В меню «Файл» откройте свойства документа. В настройках страницы нажмите образец цвета фона: откроется окно выбора цвета с каналами и прозрачностью.
3. В окне цвета установите канал A, то есть альфа-канал, в 0. Если цвет задан одной строкой RGBA из восьми шестнадцатеричных знаков, замените последние два на 00. Образец цвета станет прозрачным; сама страница при этом может оставаться белой на экране.
4. Сохраните отдельную SVG-копию через команду сохранения в меню «Файл». Откройте ее в браузере и проверьте форму, надписи и расположение элементов.
5. В меню «Файл» выберите команду экспорта. Откроется панель с выбором области изображения, размерами и полем имени выходного файла. Выберите PNG, если панель предлагает несколько форматов.
6. Выберите область рисунка, чтобы убрать лишние поля вокруг логотипа. Задайте ширину в пикселях под место размещения, сохранив пропорции. Поля размеров покажут ширину и высоту будущего PNG.
7. Если панель экспорта показывает отдельный образец цвета фона, откройте его. Установите канал A в 0 и здесь, чтобы экспорт не добавил непрозрачную заливку.
8. Укажите имя, например logo.png, и папку для копии. Нажмите кнопку экспорта: в выбранной папке появится PNG-файл.
9. Импортируйте полученный PNG в новый документ Inkscape через меню «Файл». Нарисуйте прямоугольник, задайте ему темную заливку и опустите под картинку командой порядка объектов в меню «Объект». Затем смените заливку на светлую: оба цвета должны быть видны вокруг знака и в его просветах.

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

Если экспорт получился неудачным, вернитесь к сохраненному SVG и повторите его с другими настройками.

Как конвертировать изображения между форматами

Конвертация меняет способ хранения изображения, но не создает потерянные детали. Всегда сохраняйте оригинал отдельно. Переименование расширения с .heic на .jpg не преобразует содержимое файла.

Растр в растр, включая HEIC → JPEG

Для обычных PNG, JPEG и WebP подойдет экспорт через GIMP или Squoosh. Откройте оригинал, выберите выходной формат и сохраните новую копию. При переходе в JPEG задайте фон для прозрачных участков.

HEIC удобно преобразовать на Mac через приложение «Просмотр». Этот способ позволяет подготовить файл для получателя, у которого HEIC не открывается.

1. Скопируйте HEIC с телефона на Mac с сохранением оригинала. Откройте файл в «Просмотре»: на экране должна появиться фотография.
2. Откройте команду экспорта изображения в меню «Файл». В диалоге сохранения выберите формат JPEG и задайте отдельное имя файла.
3. Подберите качество по превью, если оно доступно, и сохраните копию. Для первой версии оставьте высокое качество.
4. Откройте полученный JPEG. Проверьте ориентацию, цвет, размеры в пикселях и отсутствие заметных искажений.

Оригинальный HEIC оставьте нетронутым: из него можно повторно экспортировать JPEG с другими параметрами.

Вектор в растр

Для преобразования SVG в PNG откройте файл в Inkscape. В экспорте выберите область рисунка и задайте ширину в пикселях. Например, для показа иконки размером 64 × 64 можно подготовить копию 128 × 128 пикселей.

После экспорта проверьте обрезку, фон и тонкие линии. Сохраните SVG рядом с PNG: растровую копию нельзя увеличивать как исходный вектор. Если требуется JPEG, сначала задайте непрозрачный фон.

Растр в вектор через трассировку

Трассировка строит контуры по границам цветовых областей. Она подходит для простых контрастных знаков и силуэтов. Фотографии, размытые надписи и сложные тени дают множество лишних объектов.

1. Импортируйте растровый логотип в Inkscape и выделите его. Используйте самую четкую доступную копию без лишнего фона.
2. Откройте «Контур» → «Векторизовать растр». Для одноцветного знака выберите режим пороговой обработки яркости. Превью должно сохранять просветы внутри букв и деталей.
3. Изменяйте порог, пока контуры не станут похожи на оригинал. Затем примените трассировку.
4. Сдвиньте полученный объект в сторону. Если под ним осталась исходная картинка, вы увидите два отдельных объекта.
5. Удалите растровую копию из рабочего документа. Исправьте лишние узлы, неровности и замкнутые просветы инструментами редактирования контуров.
6. Сохраните результат в SVG. Откройте файл в браузере и увеличьте изображение: края должны оставаться четкими.

В Illustrator похожую задачу решает «Трассировка изображения». После трассировки преобразуйте результат в редактируемые контуры и проверьте геометрию.

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

Ошибки при выборе формата изображения

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

• JPEG для логотипа и скриншота с текстом. Сжатие создает ореолы возле контрастных границ. Для логотипа используйте SVG, для растровой копии и скриншота – PNG или WebP без потерь.
• PNG-24 для любой фотографии на сайте. Файл сохраняет пиксели без потерь, но часто весит больше нужного. Сравните его с JPEG, WebP и AVIF при подходящем качестве.
• Многократный экспорт JPEG поверх предыдущей копии. Повторное кодирование с потерями может усиливать артефакты. Возвращайтесь к рабочему исходнику и экспортируйте из него.
• Увеличение качества сменой расширения. Конвертация маленького JPEG в TIFF не восстановит детали. Для крупной печати нужен исходник достаточного разрешения.
• GIF вместо длинного видео. Палитра ограничивает цвет, а множество кадров увеличивает вес. Запись экрана или ролик подготовьте в MP4/WebM.
• Отправка одного рабочего файла клиенту. Получатель может не открыть PSD или AI. Приложите PDF, JPEG либо PNG для просмотра, а исходник передайте отдельно.

Как сохранить исходник и подготовить нужные копии

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

Совет от нашей редакции: называйте экспортные файлы с указанием размера и назначения, например cover-web-1600.webp. Так вы не перепутаете облегченную картинку для сайта с оригиналом для печати.