Графика сайта: Основные понятия

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

Как результат - можно получить постоянного посетителя сайта и сформировать из него агента влияния. Еще в девяностые годы прошлого столетия исследователи сделали ошеломляющий вывод: более 70 % напечатанных журнальных статей не читаются, а сразу отправляются в макулатуру... Я думаю, что в настоящее время данный процент можно с уверенностью увеличить.

Важно привлечь первое внимание посетителя, то поверхностное внимание, когда еще не включился разум на получение информации, когда посетитель, не осмысливая, только оперирует образами: нравится - не нравится. Для этих целей и используют на страницах сайта графические объекты. Это могут быть рисунки, фотографии, фоны, анимации и ролики, которые редко несут большой и важный объем информации, но подсознательно определяют концентрацию внимания на отдельных объектах, формируют настроение при просмотре, вызывают симпатию или отторжение. Таким образом, нельзя недооценивать возможности графики на веб-страницах, но и переборщить с нею тоже нельзя, если только ваш сайт не посвящен иллюстрированию комиксов.

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

Векторными называют изображения, созданные с помощью графических примитивов: прямых, окружностей, прямоугольников, дуг и т. д. Чем хорош векторный формат? Тем, что векторное изображение вычисляемо, то есть, если нужно нарисовать линию, программа должна знать ее начальную точку, направление и цвет, что достаточно просто вне зависимости от длины линии. При изменении масштаба самого изображения качество рисунка не меняется. Например, все шрифты хранятся в векторном виде, и, когда мы их увеличиваем или уменьшаем, мы просто заставляем машину пересчитывать координаты точек. Однако, если вы захотите нарисовать жезл инспектора дорожно-постовой службы, придется задать несколько векторов с белым и черным цветом заливки попеременно.

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

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

Второе свойство растровых файлов - это глубина кодирования цвета, или так называемое битовое разрешение. Оно определяет количество битов, выделяемых для записи цвета одного пиксела. Иными словами, если вы используете для кодирования пиксела один бит, то пиксел может иметь только два цвета; если два бита, то четыре цвета; если три бита, то восемь цветов и т. д. Отсюда видно, что чем многоцветнее палитра вашего рисунка, тем больше битов для кодирования цветов пиксела используется. Это увеличивает объем рисунка и самой страницы, что напрямую сказывается на скорости получения страницы пользователем.

Исходя из расчетов и возможностей пропускных сетевых каналов принято, что вес веб-страницы, отягощенной графическими объектами, не должен превышать 60-75 Кбайт. Это гарантирует как нормальную работу веб-сервера, так и комфортную деятельность пользователя. Таким образом, не считая фона, не рекомендуется размещать на странице более трех глобальных графических объектов, имеющих большой объем. Это актуально, если, конечно, у вас не фотогалерея. Входящие в моду графические элементы интерфейса, такие как кнопки, обозначающие пункты меню, также не рекомендуется использовать, так как они отягощают веб-страницы графикой и уменьшают релевантность веб-страниц при их индексации в поисковых машинах.

Учитывая все положительные и отрицательные требования к веб-графике, можно определить типы (форматы) графических файлов, ставшие де-факто стандартами для веб-страниц, - JPEG (.jpeg), GIF (.gif ), PNG (.png). Рассмотрим их более подробно.

Файлы, сохраненные в формате JPEG, получили наибольшее распространение и являются самыми популярными в веб-графике. Данный формат предназначен для хранения фотографических растровых изображений с использованием встроенного механизма сжатия, способного уменьшить исходный размер изображения до ста раз без видимой потери качества за счет удаления избыточной информации, не воспринимаемой глазом человека. Гибкие настройки, при сохранении изображения в данном формате позволяют пользователю найти компромисс между качеством и объемом графического файла. Файлы уже являются архивными, и, как правило, программами-архиваторами почти не сжимаются. При просмотре браузер или другая программа самостоятельно распаковывает файл во время открытия. При неудачно выбранном соотношении «объем - качество» либо чрезмерном увеличении рисунок может иметь заметную для глаз мозаичную структуру. Рекомендуется выбирать JPEG для фотографий или рисунков, на которых много однотонных мест и мало резких контрастных переходов, что является заметным при неудачном выборе пропорций сжатия.

Специально созданный в 1987 году для пересылки графической информации по сетям, формат GIF использует полное сжатие без потерь информации. Он позволяет выводить файл слету - сразу из Сети, используя чересстрочный вывод содержимого файла на экран. В этом случае сначала каждая восьмая, затем четвертая и т. д. строки появляются на экране, не заставляя пользователя долго ожидать полной закачки, а затем и загрузки файла. На место еще не полученных строк выводятся копии уже полученных, создавая иллюзию полностью загруженного изображения. Кроме того, очень привлекательна возможность сохранения в одном файле нескольких изображений с указанием времени задержки при их смене. Проще говоря, создается небольшой мультипликационный ролик, так называемая GIF-анимация, что делает страницу не статичной, а активной, оживляя ее регулярной сменой изображения. Файлы в GIF-формате позволяют установить прозрачный цвет или включить в содержимое файла текстовые строки.
Широко распространен еще один относительно новый графический формат PNG, представляющий переносимую сетевую графику. Важнейшие его достоинства - возможность сжатия без потерь качества как по горизонтали, так и по вертикали. В результате многократно уменьшается размер файла и поддерживается цвет пиксела с глубиной кодирования до 48 бит, что, в свою очередь, позволяет придавать пикселу любой цвет, начиная с прозрачного. Возможность сохранять анимированные файлы наподобие GIF-анимации доступна в другом варианте PNG-формата - формате MNG.

Выбор типа файла, в котором вы собираетесь сохранять свои графические объекты, зависит от вашего желания и возможностей. При этом можно пользоваться некоторыми рекомендациями. Формат JPEG применяется для фотографий или сканированных изображений, многоцветных сложно сочетаемых цветов, где человеческий глаз будет обманут заменой оттенков пикселов. Формат GIF удобен для четких рисунков с обозначенными границами и ограниченным количеством цветов, для содержащих текст изображений, рисунков, требующих прозрачного фона, аиими-рованных рисунков. Для этих же целей можно использовать формат PNG.

Тэги: используют, привлечь, внимание, обычные, маркетологи, профессиональные, давно

← Обзор инструментов для подготовки веб-графики		Создание фотогалереи на базе библиотеки jQuery →