0:00
Здравствуйте!
Если присмотреться к любому современному веб-сайту,
то можно обнаружить большое количество графической информации.
Это могут быть как большие изображения, которые используются в баннерах,
так и маленькие графические иконочки.
Итак, графический формат — это способ записи графической информации,
и существует два вида графики: векторная и растровая.
В этом видео я более подробно расскажу о каждой из них.
Итак, векторная графика — это изображение,
которое создано при помощи элементарных геометрических объектов,
такие как точка, линии, многоугольники, окружности или даже текст.
Типичный векторный файл выглядит следующим образом,
то есть внутри него записаны различные геометрические объекты.
Если мы откроем этот файл в браузере, то увидим, что нарисованы часы,
и при масштабировании просто-напросто пересчитываются координаты этих объектов,
именно поэтому не портится качество изображения.
Но векторная графика имеет свои недостатки.
Например, большое количество описательной информации для сложных объектов
может сильно увеличить размер файла.
Аналог растрового изображения может весить намного меньше.
Также недостаточная реалистичность, но как вы уже могли заметить,
что изображения векторной графики выглядят как бы немного мультяшными,
то есть у них очень маленькая детализация.
Конечно, можно нарисовать векторное изображение с такой же детализацией,
как и растровая графика, но в этом случае размер изображения будет очень большим.
И векторная графика нагружает CPU.
Почему?
Потому что каждый раз при изменении масштаба или положения
происходит пересчет всех геометрических фигур, что сильно нагружает процессор.
Второй вид графики — это растровая графика.
В этом случае изображение разбивается по вертикали и по горизонтали на мелкие
прямоугольники под названием пиксели, каждый пиксель имеет свой цвет.
Одной из основных характеристик растрового изображения является разрешение.
Оно сообщает,
сколько пикселей находится по горизонтали и по вертикали в изображении.
Например, возьмем в правом нижнем углу изображение круга, но разрешение
— четыре на четыре пикселя, поэтому это изображение не очень похоже на круг.
Чем больше пикселей в изображении, тем более четким оно становится,
но здесь важно соблюдать баланс — чем больше пикселей,
тем больше размер изображения, что очень важно для веба.
Следующей характеристикой растровых изображений является глубина цвета.
Она определяет количество оттенков, в диапазоне которых точка может изменять
свой цвет, то есть на каждый цвет выделено определенное количество бит —
чем больше этих бит, тем больше цветов используется для создания изображения.
Глубина цвета измеряется в битах.
Чем больше глубина цвета,
тем больше памяти зарезервировано для кодирования цвета.
Например, если два бита — то используется четыре цвета,
если 24 бита — то используется 16 миллионов оттенков.
Это, кстати говоря, называется полноцветным изображением.
Больше 24 бит человек не воспринимает.
Посмотрим пример.
Слева изображение 1 бит, справа — 24 бита,
то есть в изображении слева используются всего лишь два цвета — черный и белый.
И в зависимости от того, как часто или, наоборот,
редко находятся друг от друга эти цвета, получаются различные градиентные оттенки.
Если посмотреть издалека, то, возможно, даже можно не увидеть разницы.
Одной из оптимизаций растрового изображения является индексирование
цветов, то есть каждому цвету сопоставлен свой индекс.
Это очень похоже на такие раскраски, где есть набор цветов,
и нужно по числам раскрасить изображение.
Оптимизация заключается в том, что есть определенный набор цветов,
то есть только эти цвета используются в этом изображении, и нет никаких лишних.
Одним из плюсов растрового изображения является высокая реалистичность,
поскольку изображение состоит из маленьких прямоугольничков,
которые могут быть либо больше, либо меньше.
Также позволяет воспроизвести изображение любой сложности.
Из минусов — очень плохо масштабируется, при увеличении размера изображение
расплывается, потому что пиксели становятся крупнее и становятся заметными.
При уменьшении пиксели схлапываются и получаются зазубрины.
Изображение можно редактировать только целиком, это то же самое,
что нарисовать картину на холсте и попробовать отредактировать только фон,
вряд ли получится.
Зачастую может иметь больший размер, чем аналог векторного изображения.
Например, часы в векторном формате весят два килобайта,
а в растровом — 51 килобайт, это больше чем в два раза.
В этом видео вы узнали,
чем отличается векторное изображение от растрового изображения.
В следующем видео я расскажу вам, какие существуют цветовые модели.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
