Перед тем как дать короткое но ясное понимание на разные графические форматы. Хочу рассказать про две самые основные технологии в компьютерной графике - "CG". Что такое "Векторное и Растровое" изображение, в чём их различие? А потом уже описание. Как говорится чем глубже затронем основу, тем лучше и совершеннее наше творение.
Растровое изображение
Это матричная графика, вернее "Матрица из пикселей" где каждый пиксель хранит и отображает на устройстве: обычную картинку, фотографию и видео.
Матрицу для понимания можно перевести в мозаику, а пиксель в маленький квадратик. При помощи такой технологии возможно отобразить что угодно, но есть одно - "НО". При масштабировании изображения "Увеличения или Уменьшения" теряет сильно в точности отрисовки! Поэтому нужно заранее продумывать о разрешении виртуального холста.
- Вся современная фототехника и дисплеи поддерживают растровые
технологии. Считается основной.
- Система координат X, Y но по пикселям от верхнего левого угла.
- Чем больше пикселей тем дольше и сложнее вычислять.
Форматы:
JPEG, JPG --> Оптимизированный формат изображений и есть возможность контролировать потерю качества. Поддерживают практически все графические редакторы.
- Маленький вес, быстрая загрузка!
- R + G + B или RGB, Alpfa канала нет.
- Часто используется в фото, иллюстрациях со множеством цветов,
плавным переходом яркости и теней.
- Высокое распространение по интернету.
PNG --> Очень высокая точность изображения! Cжимает картинку без потери информации. Хорошо сохраняет графику с резкой границей, различные рисунки, узоры, текстовая графика, логотипы и иконки.
- Каналы RGBA. Есть поддержка Alpfa канала "Прозрачный фон"
- Как и JPG часто используется в компьютерной графике, но с хорошим
высоким качеством. Большой вес изображения.
GIF --> Предназначен для изображений который поддерживает анимацию и прозрачный фон. Больше создан для Web и Анимации. "Достаточно старая технология.
- Он оптимизирован без потерь качества. Подходит для оформления
логотипов и любой простой графики с чистыми цветами, линиями или
текстом.
- Каналы RGBA.
- Частое распространение по интернету.
- Ограничен 256 цветами.
BMP --> Очень старый формат и редко его используют в наше время.
- По качеству как PNG, можно сказать даже чуть выше.
- Есть поддержка Alpfa канала. "Прозрачный фон"
TIFF --> Широко используемый формат для цифровых изображений. Поддерживает сжатие без потери разрешения, а также несколько страниц из слоёв. Очень полезно для документов и точной настройки.
- Есть поддержка Alpfa канала. "Прозрачный фон"
- Высокие веса и долгие загрузки.
- Часто используется в фото, иллюстрациях со множеством цветов, плавным
переходом яркости и теней.
WebP --> Новый современный формат чисто для Web. Обеспечивает хорошее сжатие изображений как с потерями так и без потерь.
- Быстрые загрузки, малые веса.
- Часто используют в Вёрстке для скорости работы приложения, если много
разных фотографий.
- Доступна удобная возможность работать прямо в браузере, для быстрой
оптимизации и настройки фото или рендера под проект.
PSD --> Родной файл растрового изображения, созданный из программы Adobe Photoshop. Что позволяет сохранить проект в исходной программе, а затем отредактировать его.
Векторное изображение.
Это цифровое изображение которое формируется из: точек, линий, сплайнов и многоугольников по формулам заданной векторной программы.
Хранит и отображает информацию из координатного графика X, Y. По факту это тоже "Матрица" но только из точек и линий.
При масштабировании изображения не теряет в качестве! В этом и есть огромный плюс. Но есть и свои минусы, долго производить. Используется только в сложных задачах.
- Есть техника которая тоже поддерживает эту технологию, но её меньше.
- В наше время начали часто Использовать в Web технологиях. "Отрисовка
кнопок и иконок" ну или крутых картинок.
- Часто применяют в чертежах и рекламе. "Большое производство по
масштабу"
- Красивые векторные иллюстрации.
- Разные Символы
- Быстрая загрузка. (Скорость работы)
Форматы:
SVG --> Скриптовой формат, который создается при помощи математических описаний и геометрических фигур (Линий, кругов, эллипсов, прямоугольников, кривых и так далее). То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.
- Быстрая загрузка. (Скорость работы)
- Масштабируемость без потери разрешения.
- Часто используют в Вёрстке для оформления иконок или кнопок.
- Целая отдельная технология.
AI --> Родной файл созданный из программы Adobe Illustrator. Что позволяет сохранить проект в исходной программе, а затем отредактировать его.
CDR --> Родной файл созданный из программы CorelDRAW. Хранит всю векторную информацию.
Скриншот для наглядности.
Вот и всё, теперь есть четкое понимание как лучше сохранять свои проекты для быстрой или качественной работы.
