Блог
Все записи

Работа с изображениями во Всемирной паутине

22.09.2011

Учёные умы путём многократных опытов и вычислений пришли к выводу, что до 70% информации об окружающем мире человек, а под этим словом я имею ввиду нас с вами, получает через зрение. Поэтому неудивительно, что, как только появилась возможность снабжать текст изображениями, её на вооружение взяли Интернет-браузеры, тем самым заполучив в своё распоряжение, пожалуй, один из мощнейших инструментов воздействия.

Но любым инструментом нужно ещё владеть, то есть уметь управлять, а для этого, в свою очередь, нужно ознакомиться с его особенностями. Веб-изображения не являются исключением. В этой статье мы как раз и поговорим об особенностях работы с изображениями во Всемирной паутине.

Общеизвестно, что любой цвет можно получить путём смешения в различных пропорциях красного (red), зелёного (green) и синего (blue). Отсюда и аббревиатура этого метода — RGB. Этот принцип нашёл широкое применение в фотоплёнках, где, варьируя степень засветки одного из этих трёх слоёв (красного, зелёного, синего) получают все нужные оттенки. Оттуда RGB перекочевал в цветное телевидение. Здесь цвета синтезируются при совмещении красного, зелёного и синего лучей, имеющих различную интенсивность. Ну, а от экранов телевизоров рукой подать до компьютерного монитора. В системе RGB результат достигается посредством суммирования, отсюда и говорящее название полученного цвета — он именуется аддитивным (additive color).

Существуют и другие способы получения нужного цвета. Так называемый CMYK — один из них. Правда, в процессе создания изображений для Сети он практически не применяется, а используется, главным образом, в печати на бумаге. Однако, раз он всё же есть, скажем пару слов и о нём. Этот способ основан на смешении — вычитании, поэтому получаемый в результате цвет носит название subtractive color. В процессе получения нужного цвета или оттенка происходит удаление из белого, соответственно, негативов цветов, чьи названия использовались при создании аббревиатуры — голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и, для получения лучшего контраста, негатива белого — чёрного (blaK).

Нам же не столь важно узнать, как создаётся тот или иной цвет, сколько важно научиться им управлять. Несмотря на многообразие форматов графических файлов и цветовых режимов, на деле для подготовки графики в сети Интернет используются от силы три-четыре. Но, прежде чем переходит к непосредственному их рассмотрению, важно определиться с терминологией.

Под палитрой цветов мы будем подразумевать перечень цветов, используемых в том или ином режиме при работе с изображением. Их количество в палитре напрямую зависит от глубины.

Что же касается глубины, то она определяется числом используемых битов на пиксель (пиксель — наименьший элемент изображения) и может быть сколь угодной большой. Но ограничения здесь накладывают возможности человеческого глаза, который имеет конечную разрещающую способность. Нужно учитывать и время, которое будет потрачено компьютером на обсчёт большого объёма изображения, и возможности определённого монитора. Отсюда и максимальное значение глубины цвета, закрепившееся на отметке 24 бита на пиксель (8 бит на каждый на каждый цвет в RGB), что равно 16,8 млн. цветов в палитре. Однако далеко не всегда целесообразно использовать всё многообразие цветов, или, как ещё говорят, «полную» палитру (true color) при подготовке изображения для веб.

Так, например, в последнее время набирает популярность стилизация под ретро, где, для создания оригинального дизайна сайта, используются, главным образом, чёрно-белые изображения, в которых держать информацию о всех цветах, естественно, не нужно, а нужно лишь хранить информацию об оттенках одного цвета. Именно этот принцип использует режим градации серого (grayscale), использующий до 256 оттенков серого цвета.

Чуть выше мы уже говорили, что далеко не всегда целесообразно задействовать большое количество цветов в изображении. В режиме индексированных цветов (index color) цвета и оттенки получаются путём смешения трёх «чистых». Каждому пикселю здесь присваивается индекс цвета в палитре. Количество их может быть разным, но всё же ограничено двумястами пятьюдесятью шестью. Прямым следствием количества цветов в палитре является объём файла изображения.

Но, если же вам необходимо получить изображение с плавными градиентными переходами, то здесь не обойтись без режима RGB, который предоставляет доступ к управлению всеми цветам через задание одного и 256 оттенков красного, зелёного и синего цветов. Этот режим чаще других используется для подготовки изображений.

Перейдём дальше. Все изображения, использующие в компьютерной графике можно разделить на две категории: растровые и векторные. И у тех, и у других имеются и достоинства и недостатки.

Принцип создания растровых изображений основывается на конечности разрешающей способности глаза. Всё дело в том, что при сближении двух точек, глаз перестаёт их различать, отделять друг от друга. Отлично иллюстрируют этот принцип рисунки, созданные давным-давно с помощью ASCI-сивмолов. Понять, что на них изображено можно было только с некоторого расстояния. Таким образом, растровое изображение можно представит как массив пикселей, каждый из которых окражен в тот или иной цвет. Если же говорить научным языком, растр - представление изображения методом дифференцирования (деления непрерывности на элементарные отрезки). Именно из принципа построения растрового изображения и вытекают его недостатки. Прежде всего, это большой размер файла (изображение 300x200 пикселей при трех байтах на пиксель имеет размер 180 Кбайт), что приводит к увеличению времени загрузки. Второй недостаток — невозможность масштабирования растрового изображения: так как состоит оно из точек, то при увеличении, скажем, в 10 раз всё, что мы сможем увидеть, это нагромождение цветных квадратиков.

К достоинствам растра можно отнести то, что только здесь можно получить полный доступ к каждому пикселю изображения — менять его яркость, тон, насыщенность, цвет. Собственно, по этому принципу и работают многочисленные графические фильтры, возможности которых позволяют размыть изображение или, наоборот, сделать его более резким, менять контрастность картинки, тонировать. Растровые редакторы используются, главным образом, для редактирования готовых изображений, поэтому они довольно мирно сосуществуют с Corel Draw и PhotoShop. Ещё одним плюсом в копилке растра является то, что практически все браузеры понимают растровые изображения без подключаемых модулей.

Векторные изображения являются противоположностью растровым. Как вы, наверное, знаете, любую кривую, в том числе и замкнутую, можно описать некоторым набором математических формул и представить в виде программного кода. Любое изображение, в свою очередь, можно представить как совокупность фигур (замкнутых линий), окрашенных в тот или иной цвет. По этому принципу создаются изображения при помощи карандашей и кисти, на том же основаны и векторные форматы. Эти принципы и определяют основные достоинства "вектора". Так как здесь не надо описывать каждый пиксель, объём файлов значительно уменьшается. Кроме того, благодаря тому, что при умножении функции на постоянное число (константу) форма описываемой ею кривой не изменяется, мы получаем широкие возможности для масштабирования. Особое место среди программ для работы с векторной графикой занимают шрифтовые редакторы. Сегодня это стало весьма актуальным в связи с развитием таблиц стилей (CSS) и открывшейся возможностью подгружать шрифты на пользовательские машины.

У векторной графики есть своя разновидность — трёхмерная графика. В подобных файлах появляется ещё одна координата, благодаря которой получаются не просто изображения, а целые сцены с большим количеством нюансов, и, соответственно, большим объемом вычислений.

Но не всё так гладко с векторными изображении: в отличие от растровых они не имеют такой гибкости в работе с цветом. Поэтому изображения, созданные в векторных графических редакторах приходится часто дообрабатывать в редакторах растровых для придания реалистичости.

Несмотря на то, что графических форматов масса, для создания макетов дизайна сайта и их контента используются единицы. Большое значение здесь имеет размер файла, поэтому выбор того или иного формата основывается на двух критериях — размерах изображения и объёме файла. Отсюда следует необходимость сжатия информации, её сокращения, подобно тому, как, составляя конспект на лекциях, мы используем сокращение слов и фраз, не теряя при этом смысла содержания. По похожему принципу работает и большинство систем сжатия информации, в том числе форматы графических файлов, которые находят применение в Сети. Однако принцип хоть и одинаковый, а вот подходы к реализации разные. Каждый формат имеет свои особенности, которые обязательно следует учитывать при выборе.

Формат GIF (Graphics Interchange Format, формат взаимообмена графикой) был создан CompuServe Incorporated. Последняя его версия — GIF-89a. Отличительной чертой GIF является его последовательная организация, благодаря которой используется минимум ресурсов процессора при распаковке. Для компрессии здесь используется LZW-алгоритм сжатия (сжатие без потерь). Наиболее эффективен данный метод при наличии в изображении больших однотонных областей с чёткими границами. Всё дело в том, что GIF может отображать не более 256 цветов. А это, естественно, делает невозможным работу в этом формате с изображениями, где есть плавные переходы от одного цвета к другому, как, например, получается при использовании градиента и размывок. Не спасает здесь даже инструмент «диффузия», так как получающийся при его применениеи эффект «зернистости» выглядит на сайте, как некая стилизация, что далеко не всегда оправдано. Да и неоднородность изображения при применении диффузии увеличивается, а это сказывается на копрессии, уменьшая её эффективность.

Но не всё так плохо. Изменяя количество цветов в палитре, дизайнер может отлично сэкономить на объёме файла: уменьшив в изображении размером 100x100 пикселей количество цветов с 256 (8 бит на пиксель) до 128 (7 бит на пиксель), получаем 100x100x8 — 100x100x7 = 10 000 бит экономии. А последняя версия формата так и вовсе открывает интересные возможности для веб-дизайна благодаря добавленной в последнюю версию формата возможности создания прозрачных областай в изображениях.

Можно сделать следующий вывод: «потоковая» природа GIF, небольшие размеры его файлов, а также возможность компрессии с применением прозрачных областей, делают данный формат отличным инструментов для реализации анимации в Сети. Использование GIF будет целесообразно, если речь идёт об изображениях с чёткими границами перехода между цветами или небольших изображениях (кнопках, прьевью и т. п.).

JPEG (Joint Photographic Experts Group) — ещё один из наиболее популярных в Сети форматов изображений. Он был разработан группой экспертов по фотографии под эгидой ISO (Международной организации по стандартам). Этот формат интересен тем, что в нём применён уникальный алгоритм сжатия — сжатие с потерями. Ранее алгоритм находил себе применение в схеме телевизионной трансляции США (NTSC). Работает он благодаря всё той же ограниченности возможностей человеческого зрения — глаз просто не замечает некоторых искажений в восстановленном изображении.

JPEG на сегодняшний день заслуженно является одним из самых популярных форматов. Всё из-за его впечатляющего коэффициента сжатия, который достигает показателя 1:100. Но тут есть минус — формат плохо обрабатывает изображения с малым количеством цветов и резкими границами.

Вообще этот формат является противоположностью GIF. Он отлично справляется с отображением 24-битной палитры, то есть всех 16,8 млн. цветов, поэтому и градиенты здесь выходят на славу. Но вот с прозрачными областями здесь накладка — не может JPEG их иметь и всё тут. Ещё одно свойство данного формата, которое нельзя не учитывать - при повторном сохранении изображения в JPEG он опять же применяет алгоритм сжатия, естественно, с ухудшением качества. Отсюда одно из главных правил работы с этим форматом — сохранять изображения только после окончательной их обработки.

Оба этих формата (и GIF, и JPEG) поддерживаются всеми возможными браузерами, как говорится, по умолчанию. Обработать изображения в этом формате также под силу всем графическим редакторам. Выбирать же тот или иной формат нужно в зависимости от картинки, от конкретныйх условий. Зачастую сделать это можно лишь экспериментальным путём.

Векторные форматы тоже не стоят в сторне. В последнее время популярность среди веб-дизайнеров набирает формат Shockwave Flash, разработанный фирмой Macromedia. Он обладает всеми преимуществами векторных форматов, такими как масштабируемость и довольно малый объём файла, но его нельзя назвать чисто графическим, так как инструментарий для рисования в программе Macromedia Flash Direct ближе к растровым редакторам, нежели к векторным, а возможность создавать анимации, озвучивать их, заставлять реагировать на перемещение курсора и способность работать с гиперссылками делают Flash похожим на мультимедийный формат.

Подобные Flash-заставки находят применение в интерактивных баннерах. По мнению большинства разработчиков за баннерами этого вида будущее, так как они гораздо эффективнее баннеров, выполненных в GIF, привлекают пользователей. Но и веб-страницы целиком также могут стоиться на Flash. Минусом формата является то, что дополнительный модуль, который нужен для его просмотра, весит 0,24 М, поэтому просмотр может вызвать серьёзные затруднения у пользователей с медленным Интернетом.

Почти не у дел остаются трёхмерные объекты. Для их создания в Интернете в ноябре 1994 года состоялась презентация VRML 1.0 (Virtual Reality Modeling Language — язык моделирования виртуальной реальности). Сейчас, конечно же, появились более поздние версии, которые позволяют создавать сложные виртуальные миры со звуковыми эффектами. Но вот беда: главный недостаток - невозможность встраивания таких миров в HTML-страницу и, как следствие, сочетания с общим дизайном сайта, в отличие, например, от Flash. Другой неприятной особенностью является довольно большое количество вычислительных ресурсов компьютера для качественного рендеринга (визуализации) трехмерной сцены.

Конечно, в статье, конечно, собрано далеко не вся информация о работе с изображениями в Сети. Но, как известно, Москва не сразу строилась. Будем считать, что фундамент мы заложили.

Заказать звонок
Введите ваш номер телефона и наши сотрудники свяжутся с вами в ближайшее время.