Всероссийский Клуб Вебмастеров

Выберите раздел

Домой Фотогаларея Справочник Выставка Читальный зал FTP Архив Для общаги Книга жалоб Сканирование Фирма Агватуки Обыватель

Как правильно оформить WEB сервер

Читальный зал


Часть 8

Графические материалы

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

Несколько советов

Мы предложим несколько полезных на наш взгляд советов, которые могут помочь в работе с графическими материалами в World Wide Web. Многие авторы слишком увлекаются цветными маркерами и горизонтальными линиями, создаваемыми при помощи включаемых графических изображений, часто даже анимированных. Они используют графику вместо структурной разметки, предлагаемой HTML.

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

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

<IMG SRC "http://www. somedomain. ru/icons/home. GIF" > должна быть заменена на

<IMG SRC ALT "homepage" >

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

Графические форматы

В настоящее время наибольшей популярностью в World Wide Web пользуются графические форматы GIF (Graphic Interchange Format) и JPEG (Joint Photography Experts Group) Каждый из них имеет свои преимущества и недостатки, поэтому неправильное использование того или иного формата может привести к плачевным результатам.

GIF

GIF является первым графическим форматом, который стал широко поддерживаться всеми Web-броузерами. Он поддерживает только 256-цветную палитру, 8-разрядный цвет. Цвета в палитре могут быть определены пользователем, а сама палитра может содержать менее 256 цветов. При уменьшении количества цветов на одну из степеней двойки (128, 64, 32, ...) уменьшается и размер самого графического файла. GIF-файлы содержат изображение, компрессированное по методу сжатия без потерь.

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

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

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

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

JPEG

Формат JPEG (вообще говоря JFIF - JPEG File Interchange Format, a JPEG -алгоритм сжатия, применяемый в этом формате) поддерживает палитру в 16.7 миллиона цветов, 24-разрядный цвет. Изображения в формате JPEG сжимается по алгоритму компрессии с потерями, причем последняя величина задается при сжатии исходного изображения и может быть равна нулю. Это позволяет значительно уменьшать размеры графического файла за счет незначительных потерь в качестве изображения. Формат JPEG применяется для хранения реалистичных изображений, примером которых может служить сканированная фотография.

PNG

Формат PNG (Portable Network Graphics) начал активно разрабатываться, когда американская компания Unisys объявила о том, что она является обладателем патента на алгоритм сжатия данных LZW, используемый в формате GIF. Этот факт дает Unisys право требовать выплаты отчислений с производителей всего программного обеспечения, которое так или иначе работает с GIF-изображениями. Что представляет собой формат PNG?

  • Он реализует не запатентованный алгоритм сжатия данных, дающий результат не хуже, чем LZW.

  • Поддерживает палитру с 24- и 48-разрядным цветом.

  • Алгоритм чересстрочности значительно улучшен, по сравнению с использовавшимся в GIF. Возможно увеличение количества проходов до 64.

Есть еще несколько не очень значительных улучшений по сравнению с GIF. Единственное, что не умеет PNG в отличие от GIF - создавать мультипликацию, так как он не способен содержать в одном файле несколько изображений.

Что лучше - GIF, JPEG или PNG?

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

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

JPEG следует использовать при работе с реальными, сканированными изображениями, содержащими больше, чем 256 цветов.

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

В заключение можно сказать следующее. Скорее всего, в недалеком будущем формат GIF будет полностью вытеснен PNG. Ведь единственное, что не может предоставить PNG - это анимированные картинки. Но с развитием Java и ActiveX, a также форматов AVI, MOV и MPEG для создания мультипликации будут использоваться именно они, так как их возможности гораздо шире, чем у нынешнего GIF89a. А JPEG останется на службе благодаря высокой степени сжатия и будет вместе с PNG определять графическое лицо World Wide Web.


АРХИВ ← Все проекты