Ответ
Растровая графика представляет изображение как сетку пикселей (точек) фиксированного размера. Каждый пиксель имеет свой цвет.
Векторная графика описывает изображение с помощью математических формул (геометрических примитивов: точки, линии, кривые).
Ключевые различия:
| Критерий | Растровая графика | Векторная графика |
|---|---|---|
| Основа | Матрица пикселей (битовая карта) | Математические формулы и пути |
| Масштабирование | При увеличении теряет качество, пиксели становятся видны (ступенчатость) | Масштабируется без потери качества, так как пересчитывается |
| Типичные форматы | JPEG, PNG, GIF, WebP, BMP | SVG, AI, EPS, PDF (может содержать и растровые данные) |
| Использование | Фотографии, сложные изображения с градиентами | Логотипы, иконки, шрифты, технические чертежи, инфографика |
| Размер файла | Зависит от разрешения и глубины цвета, может быть большим | Обычно меньше для простых изображений, зависит от сложности контуров |
Пример векторного формата (SVG):
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/>
</svg>Почему это важно? Выбор типа графики напрямую влияет на качество конечного продукта. Использование растрового логотипа на крупном баннере приведет к "замыливанию", а попытка редактировать фотографию как вектор будет крайне неэффективна.
Ответ 18+ 🔞
А, слушай, вот объясню тебе на пальцах, а то народ путается, как мудаки в тумане. Есть два главных способа картинку сделать. Один — для реализма, другой — для чёткости, и если их перепутать, будет пиздец, а не результат.
Растровая картинка — это, блядь, как мозаика из кучи мелких квадратиков-пикселей. Собрали их вместе — вот тебе фото твоей рожи после вчерашнего. Каждый квадратик — свой цветок. Чем квадратиков больше и они мельче, тем картинка чётче. Но стоит её растянуть, как на баннер — и всё, сука, видишь эти лесенки, эти артефакты, этот пиздец? Пикселизация! Это как увеличить газетную фотку — одно размытое хуйлово.
Векторная же графика — это, ёпта, магия математики! Никаких пикселей тут нет в принципе. Вместо этого записаны формулы: «нарисуй линию от точки А до точки Б, скругли её вот так, залей красным». И всё! Картинка описывается командами.
А теперь, смотри, в чём разница, чтобы не быть распиздяем:
| Критерий | Растровая (пиксельная) | Векторная (формульная) |
|---|---|---|
| Суть | Сетка из цветных точек, как фотка с телефона. | Набор команд для рисования, как чертёж у инженера. |
| Увеличение | Растянул — получил мыло, пикселизацию и потерю качества. Терпения ебать ноль! | Масштабируй на хоть весь небоскрёб — линии останутся чёткими, как у суки зубы. Пересчитается и всё. |
| Форматы | JPEG, PNG, GIF — то, чем ты в интернете обычно тыкаешь. | SVG, AI, EPS — для лого, иконок, шрифтов. |
| Для чего | Фотографии, скриншоты, любые сложные текстуры с миллионом оттенков. | Логотипы, иконки, инфографика, чертежи, шрифты — всё, что должно быть чётким всегда. |
| Вес файла | Может быть овердохуища, если разрешение высокое. | Обычно легче, особенно для простых форм. Но если там тысяча сложных кривых — тоже не подарок. |
Вот, смотри, как вектор выглядит изнутри (SVG):
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/>
</svg>Видишь? Это просто код, который говорит: «Нарисуй круг радиусом 40 в центре, залей красным, обведи чёрным». И хоть ты этот код впихни на экран часов или на билборд — круг будет идеальным.
Почему это важно, блядь? Да чтобы не выглядеть идиотом! Нельзя логотип компании, который должен печататься на визитках и на фасаде здания, делать в JPEG. Растянешь — будет не лого, а какое-то хуйло размытое. И наоборот, фотку котика в вектор не переведешь — там миллионы оттенков, это адский труд, проще сфоткать заново. Выбирай инструмент по задаче, а не тыкай наугад, как мартышлюшка!