Изображения в html-документе

Встроить изображение в HTML-документ почти также просто, как и внедрить рисунок или рисованный объект в документ Word. Для этого нужно только иметь это самое изображение в форматах, принятых в сети Интернет.

По традиции в HTML-страницах используют форматы GIF и JPEG. Вообще для хранения графической информации (графики, рисунки, оцифрованные фотографии) придумано множество часто несовместимых друг с другом форматов. Так в системе Windows для хранения графической информации используют форматы, известные как WMF (Windows Meta-Files – в этом формате хранятся например рисунки из библиотеки изображений Word) и BMP (Bit-Map – растровый формат Win­dows, в котором хранятся рисунки, создаваемые в Paint Brush). К сожалению оба эти формата категорически не подходят для хранения изображений в Интернете – и все дело в их объеме.

Действительно, формат BMP сохраняет информацию о цвете каждой точки изображения. В Интернете принято 24-битное представление цвета, что дает возможность вывести на экран или печать более 16 миллионов цветов и оттенков, то есть добиться фотореалистического изображения. Если мы попытаемся сохранить просто цветную фотографию размером в четверть экрана в формате BMP, то размер файла составит (300х400 пикселов по три байта на пиксел) 360 Кбайт. Для передачи такого изображения по сети при обычной для наших сетей средней скорости 300 байт в секунду потребуется около 20 минут – Вы согласны столько ждать у захлебывающегося байтами модема? Еще хуже, если надо передать фотографию с почти типографским качеством – 300 линий на дюйм, характерным для простейших лазерных принтеров (типографские принтеры реально работают с разрешающей способностью не менее 1200 линий на дюйм). И тогда привычная нам фотография 10х15 см потребует файла размером около 7 мегабайт, который будет передаваться при самых лучших условиях (800 символов в секунду) около 135 минут – более двух часов. Понятно, что изображения следует хранить не в столь расточительных по памяти форматах.

Самым популярным в Интернет является формат GIF (Graphic Interchange Format – формат обмена графикой) от CompuServe. GIF-формат соответствует стандартному (ныне устаревшему) экрану монитора, отображающему до 256 цветов и дополнительно информация внутри файла сжимается с применением эффективных алгоритмов – в результате впятеро сокращается как объем файла, так и время его загрузки по сети. GIF-формат достаточно стандартизован и обычно не возникает проблем с его показом и передачей из одной программы в другую (досадными исключениями являются Microsoft Word и Microsoft Office – мне так и не удалось внедрить в текстовый документ Word большую часть GIF-файлов, полученных по сети Интернет и нормально просматриваемых в Netscape Navigator, Corel, Adobe Photoshop и Photo Finish). Кроме того стандарт позволяет строить GIF-файлы с прозрачным фоном и так называемые "анимированные ГИФы". Первые кажутся нарисованными на прозрачной подложке и привлекательно выглядят на любом фоновом цвете страницы, не кажутся наклеенными на страницу (подроб­нее о цвете страниц – в следующей главе). Анимированные же изображения представляют собой фактически целую серию изображений, сохраняемых тем не менее в одном файле, которые сменяют друг друга на экране в определенной последовательности и с определенным темпом – это создает иллюзию мультфильма. Обычно многие графические редакторы (Paint Brush не следует рассматривать в качестве таковых!) могут сохранять изображения на прозрачном фоне в формате GIF.

Что касается анимированных ГИФов, то наиболее распространенным средством их создания является GIF Constructor Set от фирмы Alchemy Mindworks; он настолько популярен и эффективен, что созданные с его помощью анимированные изображения даже украшают заглавную страницу сервера президента США www.whitehouse.gov. Речь идет о двух рисунках полощущегося на ветру американского флага. Самое интересное в этом факте пожалуй то, что эти изображения созданы с помощью незарегистрированной копии программы GIF Construction Set, что признается (в том числе и в Белом Доме) как откровенное пиратство. Разработчики из компании Alchemy Mindworks пишут об их безуспешных попытках напомнить владельцам серверов, незаконно использующих в дизайне Web-страниц их программное обеспечение, о необходимости зарегистрировать копию программы для ее легального использования:

The messages we send to the owners of web pages which include GIF files created by unregistered copies of GIF Construction Set seem to evoke one of three responses. Some of them are ignored – this is especially true of messages sent to large corporations and branches of the government. The White House web page, for example, had two GIF files of a waving American flag on it for a long time which were created by an unregistered copy of GIF Construction Set, ignoring several messages from us.

Из этого отрывка, однако, не следует, что игнорирование просьб о регистрации программы является официальной политикой Белого Дома :-)) Но ближе к делу, то есть к различным форматам Интернет-графики.

Специалисты по цветной фотографии решили, что ни один из существующих форматов не является удовлетворительным для их художественных целей и создали официальный стандарт для полутоновых черно-белых и цвет­­ных изображений. Этот стандарт получил наименование JPEG (Joint Photographic Experts Group – Объединенная экспертная группа по фотографии) и обычно файлы в этом стандарте имеют расширение *.JPEG или чаще *.JPG. Размер JPEG-файла обычно лишь около одной четверти размера GIF-файла, но количество передаваемых цветов и оттенков – более 16 миллионов. Такая плотность упаковки информации достигается тем, что изображение несколько искажается против оригинала, но "при полном сохранении его художественного образа".

Обычно создаваемые чертежи и графики сохраняют в формате GIF, а фотографии и рисунки – в JPEG. Рисунок, конечно, можно создать и в Paint Brush, но обычно предпочитают пользоваться чем-либо более пригодным для этого – системой Corel или Photo Shop. Затем файл нужно сохранить в соответствующем формате. Фотографии сканируют или (в последнее время) просто используют цифровые фотоаппараты; их обработку проводят в программах типа Photo Shop, Photo Paint или Photo Finish и сохраняют в JPEG-формате. Блестящая коллекция сделанных цифровой камерой фотографий Мос­квы имеется на сервере average.org (принад­ле­жащем Московскому Университету) – это называется The average photo of the week.

Еще одним источником интересных изображений служат публичные сетевые архивы. Оцифрованные фотографии и рисунки (различных художественных достоинств) могут быть получены через анонимный Ftp-протокол.

{Замечание}. Фотографии же "с изюминкой определенного сорта" на публичных архивах найти невозможно: во-первых по некоторым "политическим" причинам (компании и университеты, спонсирующие Ftp-сервера, не заинтересованы в том, чтобы им инкриминировали распространение порнографии), а во-вторых по техническим причинам – большой объем фотографий способен "съесть" все имеющееся дисковое пространство, а поток посетителей на узел способен перегрузить сколь угодно мощные каналы. Известна история, когда для размещения действительно ценной информации с сервера одного из университетов были удалены фотографии из архива Playboy; вместо них в соответствующей каталог был помещен текстовый файл, в котором говорилось, что "если Вы обоснуете, зачем эти фотографии Вам нужны в Ваших научных исследованиях, то по решению попечительского Совета университета они будут немедленно возвращены на сервер". Так что в настоящее время более-менее полным источником картинок "про это" могут служить группа новостей alt.binaries.pictures.erotica да пожалуй www.playboy.com и www.penthousemag.com. {Конец замечания}

Далее если нужно включить в HTML-документ изображение, записанное в файл pict.gif или photo.jpg, находящийся в одном каталоге с HTML-документом, потребуется применить всего одну строчку:

<IMG SRC="pict.gif">

Желательно (в соответствии с этическими принципами) в тег <IMG SRC="[имя файла]"> включить также атрибут ALT="[текст]", например:

<IMG SRC="Photo.jpg" ALT="Директор фирмы">

Встретив такую метку, браузер покажет на экране прямоугольник для размещения рисунка, начнет загружать сам рисунок, а пока информация еще ползет по сети, выводит на место рисунка указанный в атрибуте ALT текст. По мере загрузки файла с изображением рисунок встанет на свое место, перекрывая временный текст. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают демонстрации изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет многие это делают для экономии времени; в этом случае атрибут ALT просто необходим, при желании же "посмотреть в глаза" директору фирмы можно включить режим загрузки рисунков).

Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае следует указать его полное имя (см. раздел "Связывание").

В теге <IMG SRC> возможно применение и других атрибутов. Так атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение текста документа, пока передача данных для рисунка еще продолжается. Эти атрибуты должны задавать реальный размер изображения.

Значения атрибута ALIGN имеют следующий смысл: ALIGN=TOP позиционирует верх изображения с верхом текущей текстовой строки; ALIGN=MIDDLE выравнивает середину изображения по основной текстовой строке; ALIGN=BOTTOM выравнивает низ изображения по основной строке.

ALIGN=LEFT перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Соответственно ALIGN=RIGHT перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения.

HSPACE=целое определяет ширину незаполненного пространства слева и справа от изображения, позволяя таким образом визуально отделить текст от рисунка. Аналогично VSPACE задает высота незаполненного пространства выше и ниже изображения в пикселах.

Элемент <IMG> может оказаться также текстом якоря. Обычно это используется при переходе на страницы, содержащие графику, причем на текущей странице приводится миниатюрное изображение, дающее представление о странице перехода. Например ссылка на карту погоды некоторого района может быть не только строкой вида "Западная Сибирь", но миниатюрным рисунком карты страны с выделенным цветом участком, соответствующим этой самой "Западной Сибири". Часто большие JPG-файлы размещают на отдельных страницах, а на основных страницах документа размещают миниатюрную копию изображения (иногда в условных цветах и в GIF-формате для экономии полосы канала); такие изображения называют thumbnail – ноготок. Если читатель заинтересовался этой миниатюрой, он щелкнет мышью по "ноготку" и будет ожидать появления полного изображения во всей его красоте; иногда рядом с изображением указывается и размер соответствующего файла, чтобы пользователь знал, на что он идет. Сам элемент типа thumbnail бывает окружен со всех сторон рамкой, размер которой в пикселах задается атрибутом BORDER=n. На сервере "The average photo of the week" этот принцип развит следующим образом: миниатюрная копия на индексных страницах вызывает переход к основной странице с фотографией в JPG-формате; эта фотография скомпрессирована так, чтобы ее размер оставался в диапазоне приемлемых величин (от 20 до 30 Кбайт), естественно с некоторой потерей качества изображения; но с основной страницы можно вызвать и полную версию JPG-файла (обычно около 60 Кбайт или несколько более) и уж качество изображения на этой страницы в точности такое, какое обеспечивает цифровая камера. Аналогичный подход (JPG, вызывающий другой JPG) использует в субботних страницах сетевой газеты dz-online ее автор и создатель Дима Завалишин.

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

Для создания графического якоря необходимо ввести например следующее:

<A HREF="zap-sib.html"><IMG SRC="zapsib.gif"></A>

<A HREF="zap-sib.html"><IMG SRC="zapsib.gif" BORDER=4></A>

– последняя запись отличается только шириной рамки.

<P><A HREF="castle.jpg><IMG SRC="castle.gif" ALIGN=LEFT BORDER=3> Скиптонский замок (168K) </A> Первое упоминание о замке относится...

В этом примере миниатюра замка (castle.gif) обводится рамкой контрастного цвета (при настройках большинства браузеров по умолчанию – обычно синего), тем же цветом выводятся слова Скиптонский замок (168K), а далее следует описание этого замка обычным стилем. Как рисунок, так и выделенный текст, являются ссылками – при их выборе мышью загружается JPEG-изображение замка, а для тех, чьи каналы связи слишком слабы или перегружены, выводится предупреждение, что размер файла – 168 килобайт (по принципу "мы Вас предупредили – пеняйте на себя").

Наконец последний пример может быть реализован следующим методом:

<P><A HREF="mailto:gendir@somefirm.com"> <IMG SRC="gendir.jpg" HSPACE=3> Генеральный директор</A>

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