Что такое графический документ и какие бывают форматы
Графический документ — это цифровой файл, содержащий визуальную информацию: фотографии, рисунки, схемы, чертежи или анимацию. В отличие от текстовых документов, его основное назначение — передача изображения, а не букв и цифр. Популярные форматы таких файлов включают JPEG (для фото), PNG (для графики с прозрачностью), SVG (для масштабируемых векторных логотипов) и PDF (универсальный формат для печати и обмена).
Выбор правильного формата критически важен: он влияет на качество картинки, размер файла и скорость загрузки сайта или подготовки макета к печати.
Ключевое отличие: Текстовый документ хранит символы, которые можно выделить и скопировать как текст. Графический документ хранит пиксели (точки цвета) или математические формулы (кривые), описывающие изображение. Текст внутри картинки часто нельзя просто скопировать без специального распознавания (OCR).
Растровая vs Векторная графика: в чем разница?
Прежде чем разбирать конкретные расширения файлов, важно понять два фундаментальных типа графики, так как от этого зависит выбор инструмента.
Растровая графика (Raster)
Изображение состоит из сетки пикселей (квадратиков определенного цвета).
- Плюсы: Идеально для фотографий, сложных переходов цветов, реалистичных изображений.
- Минусы: При увеличении теряет качество (появляется «лесенка» или размытие). Размер файла зависит от разрешения.
- Основные форматы: JPEG, PNG, WebP, TIFF, GIF.
Векторная графика (Vector)
Изображение описывается математическими формулами (точками, линиями, кривыми).
- Плюсы: Масштабируется до любого размера без потери четкости. Занимает мало места, если изображение не слишком сложное.
- Минусы: Не подходит для фотореалистичных снимков.
- Основные форматы: SVG, AI, EPS, PDF (может содержать вектор).
Обзор популярных форматов графических документов
1. Форматы для веба и экранов
| Формат | Тип | Особенности | Когда использовать |
|---|---|---|---|
| JPEG (.jpg) | Растр | Сжатие с потерями. Нет прозрачности. Малый вес. | Фотографии, сложные изображения с множеством цветов. |
| PNG (.png) | Растр | Сжатие без потерь. Поддерживает прозрачность. | Логотипы, скриншоты, иконки, изображения с текстом. |
| WebP (.webp) | Растр | Современный формат от Google. Лучше сжимает, чем JPEG и PNG. | Основной формат для изображений на современных сайтах (ускоряет загрузку). |
| SVG (.svg) | Вектор | Масштабируемость. Редактируется кодом. | Иконки, логотипы, простые иллюстрации, графики. |
| GIF (.gif) | Растр | Поддерживает простую анимацию. Ограниченная палитра (256 цветов). | Простые анимации, мемы, баннеры. |
2. Форматы для печати и профессиональной работы
- TIFF (.tiff): Формат высокого качества без сжатия (или со сжатием без потерь). Используется в полиграфии и профессиональной фотографии. Файлы очень «тяжелые».
- PDF (.pdf): Универсальный контейнер. Может содержать и вектор, и растр, и шрифты. Стандарт для отправки макетов в типографию, презентаций и электронных книг.
- AI (.ai) / EPS (.eps): Исходные файлы векторных редакторов (например, Adobe Illustrator). Нужны дизайнерам для редактирования макетов. EPS также используется для передачи вектора между разными программами.
Совет для веб-мастеров: Всегда конвертируйте PNG и JPEG в WebP перед загрузкой на сайт. Это уменьшит вес страницы на 25–35% без видимой потери качества для глаза пользователя.
Как выбрать формат: чек-лист
Чтобы не гадать, используйте эту логику выбора:
- Это фотография?
- Для сайта → WebP (или JPEG, если нужна максимальная совместимость со старыми браузерами).
- Для печати → TIFF или высокий JPEG.
- Это логотип или иконка?
- Для сайта → SVG (идеальная четкость на любых экранах).
- Если SVG невозможен → PNG с прозрачностью.
- Нужна прозрачность фона?
- Используйте PNG, WebP или SVG. JPEG прозрачность не поддерживает (фон станет белым или черным).
- Нужно масштабировать без потери качества?
- Только вектор: SVG, AI, EPS.
- Отправляете макет в типографию?
- Строго PDF (с вылетами под обрез и в цветовой модели CMYK) или TIFF.
Частые ошибки при работе с графикой
- Сохранение логотипа в JPEG. Из-за алгоритмов сжатия вокруг четких линий появляются артефакты («шум»), а фон становится непрозрачным.
- Использование растровых картинок для больших баннеров. Если растянуть маленькую JPG-картинку на весь экран, она будет размытой. Для крупных схем лучше использовать вектор.
- Загрузка тяжелых PNG вместо WebP. PNG может весить в 5–10 раз больше, чем оптимизированный WebP, что замедляет загрузку сайта и ухудшает SEO-позиции.
- Отсутствие цветового профиля для печати. Экраны работают в RGB, а принтеры в CMYK. Если не конвертировать файл перед печатью, цвета на бумаге будут тусклыми и искаженными.
FAQ: Часто задаваемые вопросы
Чем PDF отличается от обычного изображения? PDF — это контейнер. Внутри одного PDF-файла могут быть страницы с текстом, векторными чертежами и растровыми фотографиями одновременно. Он сохраняет верстку неизменной на любом устройстве.
Почему SVG лучше PNG для иконок? SVG остается идеально четким даже на экранах с высоким разрешением (Retina, 4K), так как перерисовывается математически. PNG же имеет фиксированное разрешение, и на хороших мониторах может выглядеть слегка размытым.
Можно ли редактировать JPEG? Технически да, но каждое сохранение JPEG ухудшает качество (из-за сжатия с потерями). Для редактирования лучше использовать исходники в PSD, AI или сохранять промежуточные результаты в PNG/TIFF.
Что такое RAW? RAW («сырой» формат) — это необработанные данные с матрицы фотоаппарата. Это не совсем готовый графический документ для просмотра, а скорее «цифровой негатив», который требует проявки в специальных программах (Lightroom, Capture One) перед экспортом в JPEG или TIFF.