Сравнение векторной и растровой графики

Прежде чем вы начнете карьеру Web-дизайнера, изучите плюсы и минусы векторной и растровой графики.

Растровая графика превалирует в Интернете. Все графические изображ< - ния, которые вам встречаются в Интернете в форматах JPEG, GIF и PNG, являются растровыми. Примечательно то, что многие из этих изображений изначально (до преобразования в растр) были векторными. “Почему?” — спросите вы. Дело в том, что с помощью векторов зачастую намного быстрее и проще создавать изображения и интересные эффекты, чем с использованием растровой графики. Гораздо проще вносить изменения в векторную графику, потому что вы лишь перемещаете точку, а линия уже сама следует за ней. Для того чтоОы внести изменения в растровое изображение, вам придется его перерисовывать. Для сохранения векторного изображения в формате JFEG или GIF вам необходимо преобразовать его в растр.

Формат GIF расшифровывается как Graphics Interchange Format (формат графического обмена). JPEG расшифровывается как Joint Photographers

Experts Group (Объединенная группа экспертов в области фотографии). PNG расшифровывается как Portable Network Graphics (переносимая сетевая графика).

Для растровой графики создано большое количество форматов. На сегодняшний день единственным стандартизованным форматом, поддерживающим векторную графику на Web-страницах, является SWF Macromedia Flash. Как правило, формат SWF используется для создания интерактивной анимации, которая может быть добавлена на Web-страницу. Данный формат не применяется для хранения статических изображений (хотя, конечно, при желании это можно сделать). Для просмотра файла в формате SWF ваш браузер дотжен содержать дополнительный модуль, поддерживающий Flash. Этот модуль можно бесплатно скачать в Интернете.

При изменении размера растровой графики нельзя сохранить ее качество. Растровая графика имеет фиксированное разрешение (более подробно этот вопрос рассмотрен в разделе “Разрешение изображения”). Как уже говорилось, растровая графика представлена сеткой пикселей, имеющей фиксированный размер. Если вы растянете растровое изображение, оно окажется деформировано. Поэтому избегайте определения высоты и ширины изображения в HTML-тегах, чтобы ваше изображение не сжималось или не растягивалось при размещении на Web-странице. Помещайте на страницу изображения исходного размера.

Размер векторного изображения можно менять без потери качества.

С другой стороны, векторная графика не зависит от разрешения. Благодаря тому, что точки векторной графики располагаются на экране в соответствии с математической формулой, размер сетки (разрешение) в данном случае не имеет значения. Это говорит о том, что вы можете растягивать и сжимать векторное изображение неограниченное число раз, при этом качество изображения не изменится. Взгляните на видоизмененную пиктограмму, полученную в результате непропорционального растягивания векторной иллюстрации. Качество изображения осталось прежним.

Формат. Полное название. Векторный или растровый.

Область применения:

• GIF Graphics
• Interchange Format Растровый Мультипликационные изображения с множеством однотонных областей или текстовых элементов
• JPEG Joint Photographers Expert Group Растровый Фотографии или изображения с большим количеством цветовых переходов (например, изображение радуги)
• PNG Portable Network Graphic Растровый Изображения с различными областями: как с фотографическими, так и с однотонными
• SWF Shockwave Flash Векторный Иллюстрированные изображения (не фотографии) с анимацией

Разрешение монитора

Тот, кто хоть раз пользовался компьютером, вероятно, понимает, что монитор имеет гораздо большую четкость изображения, чем обычный телевизор. Действительно, кто можпт прочитать все юридические замечания касательно “беспроцентного кредита”, написанные мелким шрифтом в телевизионной рекламе автомобилей? Этот же мелкий шрифт не составит большого труда прочитать на компьютере — и это не только потому, что вы сидите ближе к экрану. На компьютере изображение выглядит более отчетливо, чем на телевизоре, благодаря высокому разрешению монитора.

Разрешение определяет количество пикселей на линейный дюйм. Значение стандартного разрешения мониторов компьютеров варьируется в пределах от 72 до 96 ppi (pixels per inch) — что уже достаточно хорошо. С другой стороны, разрешение телевизора составляет примерно половину от этих значений. Поскольку телевеща ние пока еще является аналоговым сигналом, а не цифровым (как в случае с компьютером), изображение получается размытым.

Предлагаем посмотреть другие страницы сайта:
← Adobe Illustrator и Macromedia Freehand | Создание Web-графики с чистого листа →