Графика для Web-страниц
Графика, которая создается для Web-документов, в отличие от графики, предназначенной для книжной публикации или просмотра на экране телевизора или монитора, имеет свои специфические особенности, знание которых необходимо, чтобы сайт выглядел профессионально и загружался быстрее.
Цифровые изображения
Изображение, которое вы видите на экране компьютерного монитора, строится из мелких точек, называемых пикселами. Слово пиксел - это сокращение английских слов picture element (элемент изображения). Другими словами, экран монитора - это большая матрица, каждый пиксел которой, независимо от другого, излучает определенный цвет, а все пикселы вместе образуют один кадр изображения.
Каждое точечное изображение содержит фиксированное количество пикселов, поэтому высота и ширина такого изображения могут быть определены как количество пикселов, расположенных, соответственно, вдоль его вертикальной и горизонтальной границ. Общее число пикселов определяет размер файла, или объем данных, содержащихся в изображении. От количества пикселов в изображении и характеристик конкретного монитора зависит, каков будет размер или формат этого изображения на экране. Стандартный 15-дюймовый монитор SVGA способен показать 800 пикселов по горизонтали и 600 по вертикали; современные мониторы, как правило, допускают возможность настройки экранной матрицы от 800x600 - при этом пикселы будут достаточно большими - до 1600х 1200 - в этом случае пикселы будут очень малы.
Независимо от заданного размера печатного оттиска, размер изображения на экране определяется количеством содержащихся в нем пикселов, а также размером монитора и заданными для него параметрами. Большой монитор, экранная матрица которого настроена на разрешение 800x600, будет использовать более крупные пикселы, чем маленький монитор с таким же разрешением. В большинстве случаев мониторы настраиваются таким образом, чтобы они могли отображать приблизительно от 72 до 120 пикселов на один дюйм.
Любое точечное изображение характеризуется двумя основными параметрами: графическим разрешением и глубиной цвета.
Разрешение изображения или графическое разрешение определяет плотность пикселов в изображении и измеряется в пикселах на дюйм (ppi). Чем выше разрешение, тем больше пикселов содержится в изображении и тем меньше размер этих пикселов. Например, изображение размером 1x1 дюйм с разрешением 72 ppi будет содержать 5184 пиксела -72 пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изображение, но с разрешением 300 ppi, будет содержать 90000 значительно более мелких пикселов. Благодаря использованию большего числа пикселов, высокое разрешение позволяетпнояучать в изображении более мелкие детали и более тонкие цветовые переходы.
Выбор оптимального разрешения для изображения зависит от того, каким образом вы собираетесь его отображать или тиражировать. Так, использование слишком низкого разрешения для книжной или журнальной иллюстрации неизбежно приведет; К резкому падению качества печатных оттисков, вызванному чрезмерным увеличением размера пикселов. С другой стороны, выбор неоправданно высокого разрешения, превышающего физические возможности выводного устройства, приводит к увеличению размера файла, что, в свою очередь, не может не сказаться на скорости его обработки, печати или передачи по сети.
Размер файла, содержащего оцифрованное изображение, пропорционален размерам и графическому разрешению изображения и задается в байтах, килобайтах (Кб) или мегабайтах (Мб). Более тесное расположение пикселов, то есть более высокое разрешение, позволяет воспроизводить более мелкие детали изображений. В то же время это ведет к увеличению размера файла. Например, объем файла для изображения размером 1x1 дюйм с разрешением 200 ppi будет в четыре раза больше, чем для изображения того же размера с разрешением 100 ppi.
Размер файла имеет большое значение при выделении дискового пространства для его хранения. Кроме того, он в значительной мере определяет время передачи файла по сети. При выборе графического разрешения вы должны находить компромисс между желанием сохранить как можно больше полезной информации и необходимостью минимизировать размер файла.
Число экранных пикселов на единицу длины определяет разрешающую способность монитора: она зависит от размера экрана и от заданной размерности экранной матрицы. При переводе печатных оригиналов в экранные образы и расчете их размеров в пикселах следует иметь в виду, что разрешающая способность большинства мониторов для Macintosh по умолчанию составляет 72 точки на дюйм (dpi), a PC-совместимые мониторы могут иметь разную разрешающую способность, но обычно она составляет 96 dpi.
На экране монитора все пикселы изображения представляются с помощью определенного числи экранных пикселов. Размер экранного изображения определяется разрешающей способностью монитора, и ее не следует путать с графическим разрешением, характеризующим плотность пикселов в изображении. Например, размер изображения с разрешением 144 ppi на экране монитора с разрешающей способностью 72 ppi будет вдвое превышать реальный размер, поскольку в каждом дюйме экрана могут быть отображены только 72 из 144 пикселов. При выводе на монитор с разрешающей способностью 120dpi то же самое изображение будет лишь незначительно больше оригинала, так как в этом случае в каждом дюйме экрана смогут уместиться уже 120 из 144 пикселов.
Другим важным параметром точечного изображения является глубина цвета, или битовое разрешение - величина, которая определяет количество бит информации на один пиксел. Битовое разрешение характеризует объем цветовой информации, используемой для описания каждого пиксела изображения. Чем больше глубина цвета, тем шире диапазон доступных цветов и тем точнее их представление в оцифрованном изображении. Например, пиксел с битовой глубиной, равной единице, имеет лишь два возможных состояния - два цвета: черный или белый. Пиксел с битовой глубиной в 8 единиц имеет 28, или 256 возможных значений цвета. Пиксел же с битовой глубиной в 24 единицы имеет 224, или 16,7 миллионов возможных значений. Считается, что изображения, содержащие 16,7 миллионов цветов, достаточно точно передают краски окружающего нас мира. Как правило, битовое разрешение задается в диапазоне от 1 до 48 бит/пиксел.
Большинство цветов видимого спектра могут быть получены путем смешивания в различных пропорциях трех основных цветовых компонентов. Этими компонентами, которые называются первичными цветами, являются красный, зеленый и синий цвета. Они образуют цветовую модель RGB - Red, Green, Blue (Красный, Зеленый, Синий) - в которой на каждый пиксел отводится 24 бита (по 8 бит на каждый цвет), что дает возможность закодировать 16,7 миллионов оттенков. Как мы увидим в дальнейшем, RGB - не единственная цветовая модель, но в мониторах и телевизорах используется именно она. Монитор вашего компьютера воспроизводит все цвета спектра на основе сложения трех перечисленных цветов. При смешивании первичных цветов образуются вторичные цвета: голубой, пурпурный, желтый. Чем выше интенсивность цвета, тем ближе он к чистому тону, а чем меньше - тем ближе он к черному цвету. Если сложить все три основных цвета с максимальной интенсивностью, равной 255, получится чисто белый цвет. И наоборот, если просуммировать три цвета нулевой интенсивности, получится чисто черный цвет.
Объем файла, содержащего изображение, зависит не только от его размеров и графического разрешения, но также и от глубины цвета. 'Учитывая, что каждый пиксел изображения может описываться различным количеством бит - от 1 до 24 и более, можно сделать вывод, что чем больше цветовая глубина, тем больше должен быть объем файла с изображением.
Размер графического файла, в частности, полученного в результате сканирования изображения, можно определить по следующей формуле:
F = (A/25,4xB/25,4)xD2xC/8,
где
F - размер файла без сжатия в байтах;
А - ширина исходного изображения в мм;
В - длина исходного изображения в мм;
D-графическое разрешение изображения в dpi;
С - глубина цвета в битах.
Таким образом, если вы хотите отсканировать для своей Web-страницы фотографию размером 10x15 см с разрешением 150 dpi и глубиной цвета 24 бита, то результирующий файл будет иметь размер 1569378 байт или 1,49 мегабайта.
Особенности Web-графики
Оформление Web-страниц 'подразумевает необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве. Вы должны исходить из того, что среднестатистический пользователь работает в Интернете с разрешением экрана не более 800x600. Область, которая отображается в окне браузера при таком разрешении экрана, составляет примерно 790x430 пикселов. Чтобы представить величину этой области, вспомните, что значки на рабочем столе Windows имеют размер 32x32 пиксела.
Подготавливая графику для Web-страницы, необходимо помнить о небольших размерах области, с которой вы должны работать. Изображение не должно превышать 700 пикселов по ширине и 400 пикселов по высоте. Но файл даже такой картинки может оказаться слишком большим для передачи по каналам связи сети. Следует также помнить и о том, что часть пользователей могут видеть на своих мониторах только 256 цветов. Поэтому 24-битная графика, способная обеспечить 16,7 миллиона оттенков цвета, не сможет быть оценена некоторой частью зрителей. При этом пользователи не только не смогут увидеть на своих мониторах всей заложенной вами цветовой гаммы, но, кроме того, изображение может оказаться худшего качества, чем в случае использования 8-битной графики, отображающей 256 цветов. К тому же файл окажется в три раза больше по размеру, так как, напомним, его размер пропорционален глубине цвета, и, соответственно, будет требовать большего времени для загрузки на экран.
Использование корректной цветовой гаммы важно при разработке любого графического проекта. Для графики Web-страниц необходимо применять цвета модели RGB. Так как для Web-страниц устройством вывода графики является экран монитора, то здесь, как правило, соблюдается условие WYSIWIG - What You See Is What You Get (Что видишь, то и получаешь). Говоря «как правило», мы имеем в виду небольшие индивидуальные отличия мониторов пользователей.
На вопрос «Каков должен быть размер графического файла?», предназначенного для Web, трудно ответить однозначно. Давайте попробуем представить себе, что пользователь, обращающийся к вашему сайту, имеет модем с пропускной' способностью 14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими. При использовании такого модема передача блока данных объемом 1 килобайт занимает примерно 1 секунду; так что при объеме графики в 30 килобайт для ее передачи по сети потребуется приблизительно 30 секунд. После таких расчетов возникает следующий вопрос: как долго посетитель, обратившийся к вашему сайту, готов ждать появления на экране загружаемого изображения? Если вы сможете ответить на этот вопрос, то сразу же определите и максимальный размер файла с графическим изображением. Считается, что файл должен иметь такой размер, при котором время его загрузки по сети не превышает одной минуты, что/ выражается в ограничении размера величиной примерно 60 килобайт.