Здесь перечислены некоторые неприятности, связанные с фоновыми изображениями.
• Время, необходимое на загрузку документа, увеличивается за счет загрузки фонового изображения, до завершения которой вывод документа не происходит.
• Фоновое изображение занимает место в локальном кэше броузера, порой выталкивая изображения, содержащие действительно полезную информацию. Это может увеличить время загрузки других документов, даже не включающих фоновой живописи.
• Цвета изображения оказываются иногда недоступными для дисплея пользователя, заставляя броузер «расщеплять» исходную палитру. В результате большие области, представленные в оригинале одним цветом, будут заполнены чередующимися слоями различной, хотя и близкой по цвету окраски. Документ, вероятно, будет труднее читать.
• Поскольку броузеру приходится постоянно перерисовывать фоновое изображение (а это совсем не то же самое, что заполнить область одним цветом), прокручивание документа может занимать значительно больше времени.
• Даже если все хорошо выглядит на дисплее, напечатанный поверх изображения текст всегда трудно, а бывает и невозможно прочитать.
• Шрифты на разных машинах могут сильно различаться. Те, что неплохо сочетаются с выбранным фоном на вашем броузере, поройнельзя будет прочитать на другом компьютере.
Свойство vertical-align управляет положением элемента по отношению к содержащей его строке. Его допустимыми значениями являются:
Baseline
Выравнивает базовую линию элемента с базовой линией охватывающего элемента.
Middle
Выравнивает середину элемента с серединой охватывающего элемента. (Обычно середина – это верх строчной буквы).
sub
Элемент выводится как подстрочный индекс.
super
Элемент выводится как надстрочный индекс.
Text-top
Выравнивает верхний край элемента с верхним краем шрифта охватывающего элемента.
bottom
Выравнивает нижний край элемента по нижнему выносному элементу текущей строки.
Кроме того, процентное значение указывает положение относительно базовой линии текущей строки, так что значение 50% приподнимает элемент на половину высоты строки над базовой линией. Значение 100% помещает элемент ровно на высоту строки ниже базовой линии.
Все популярные броузеры сходятся в том, как следует располагать изображения относительно линии текста для значений baseline (которое устанавливается по умолчанию и соответствует отсутствию выравнивания по вертикали), middle (но не center), super (но не sub), text-top, text-bottom, top (то же самое, что text-top; но не bottom), а также для положительных и отрицательных значений относительного смещения.
А теперь обсудим различия. Броузер Firefox интерпретирует значение center так же, как Internet Explorer, причем иначе, чем значение middle, Netscape считает значение center идентичным значению middle, а Opera вообще не распознает его. Что касается значения
sub, Netscape соглашается с Firefox и выравнивает нижнюю сторону изображения по крайней строчке нижнего выносного элемента. При этом Opera помещает изображение явно ниже базовой линии, но не так низко, как Internet Explorer, у которого изображение оказывается чуть выше следующей строчки текста.
В отношении значения bottom броузер Opera соглашается с Internet Explorer, выравнивая нижнюю границу изображения по линии, проведенной чуть выше следующей строчки текста. Firefox и Netscape располагают нижнюю сторону изображения по крайней строчке нижнего выносного элемента.
Internet Explorer поддерживает специальные видеорасширения атрибута тега <img>, которые позволяют вам встраивать видеоролики в HTML документы. Это controls, dynsrc, loop, и start. Они не являются частью HTML 4 и вряд ли станут стандартными в XHTML. Пользователям приходится явно включать эту функциональность броузера Internet
Explorer флажком «Воспроизводить видео на веб страницах» на вкладке «Дополнительно».
Эквивалентное поведение других популярных броузеров достигается за счет программных расширений, известных как плагины (plug-ins). Плагины доставляют читателям лишние хлопоты: каждый пользователь должен раздобыть и установить подходящую программу, прежде чем сможет просматривать встроенное в страницу видео. Расширения тега <img>, которые принял Internet Explorer, напротив, делают видео собственной частью броузера.
Заметили ли вы, что невозможно горизонтально центрировать изображение в окне броузера с помощью атрибута align? Значения middle и absmiddle вертикально центрируют его по отношению к текущей строке, но положение изображения по горизонтали определяется предшествующим содержимым текстового потока и размером окна броузера.
Центрировать изображение по горизонтали можно, только изолировав его от окружающего содержимого с помощью тегов абзаца, раздела или новой строки. Затем следует использовать либо тег <center>, либо атрибут align=center для тегов абзаца или раздела. К примеру:
Kumquats are tasty treats
<br>
<center>
<img src=»pics/kumquat.gif»>
</center>
that everyone should strive to eat!
Используйте тег абзаца с атрибутом align=center, если хотите, чтобы над изображением и под ним оставалось свободное место.
Kumquats are tasty treats
<p align=center>
<img src=»pics/kumquat.gif»>
</p>
that everyone should strive to eat!
Значения left и right атрибута alignment предлагают броузеру поместить изображение соответственно у левого или правого края текстового потока. Затем броузер выводит оставшееся содержимое документа в свободное пространство, смежное с изображением. В результате содержимое документа, следующее за изображением, обтекает его.
<img src=»pics/kumquat.gif» align=left>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.
Можно поместить изображения одновременно по обоим краям текста и он будет выводиться между ними сверху вниз:
<img src=»pics/kumquat.gif» align=left>
<img src=»pics/tree.gif» align=right>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.
Когда текст обтекает изображение, левый (или правый) край страницы временно переопределяется и становится краем изображения, противоположным тому, которым оно примыкает к краю страницы. Последующие изображения с тем же выравниванием позиционируются относительно предыдущего. Следующий исходный текст достигает
этого потрясающего эффекта:
<img src=»pics/marcia.gif» align=left>
Marcia!
<br>
<img src=»pics/jan.gif» align=left>
Jan!
<br>
<img src=»pics/cindy.gif» align=left>
Cindy!
Когда текст добегает до низа изображения, положение полей восстанавливается, перемещаясь обычно к краям окна броузера.
Тег <img> позволяет вставить в текстовый поток документа графическое изображение, на которое он ссылается. Ни до, ни после тега <img> не требуется обязательного присутствия конца абзаца или перехода на новую строку, так что изображение может быть помещено буквально «в линию» с текстом и другим содержимым документа.
Сам формат изображения стандартами HTML и XHTML не определяется, хотя опулярные графические броузеры поддерживают GIF, PNG и JPEG расширения. Стандарты также не задают и не ограничи вают их размеры. Изображения могут быть сколь угодно многоцветными, но то, как эти цвета будут воспроизводиться, сильно зависит от броузера.
В целом, представление изображений во многом определяется броузером. Неграфические броузеры их могут просто игнорировать. Броузеры, работающие в окружении, налагающем некоторые ограничения, способны, в свою очередь, изменять размеры или уровень сложности изображений. И пользователи, особенно те из них, кто располагает медленным соединением с сетью, могут отключать их загрузку. Соответственно вам следует убедиться, что документы сохраняют свой смысл и остаются полезными, даже если изображения полностью из них удалены.
В языке HTML у тега <img> нет закрывающего тега. В XHTML документе требуется либо косая, закрывающая тег перед знаком «>» (например, <img src=»kumquat.gif» />), либо закрывающий тег </img> сразу после открывающего и его атрибутов.
Текст еще не вышел из моды. Для некоторых пользователей это единственная составляющая вашего документа, которая им доступна. Мы настаиваем, что в большинстве случаев документы должны быть пригодны для употребления теми пользователями, которые не могут просматривать изображения или отключили их автоматическую загрузку, чтобы ускорить воспроизведение страниц. Хотя велико скушение вставлять изображения всюду, где только возможно, случается, что
чисто текстовый документ бывает гораздо полезней.
Документы, преобразуемые в сетевые из других форматов, редко включают изображения. Обзорные материалы и другое серьезное содержимое часто вполне годится для потребления в чисто текстовой форме.
Следует создавать чисто текстовые документы, когда скорость доступа критически важна. Если известно, что ваши страницы будут нужны сразу множеству пользователей, то следует позаботиться о них, избегая размещения изображений в документах. В особых, самых критических случаях вы можете создать главную (начальную) страницу, которая позволит читателям выбирать между двумя исполнениями вашего собрания документов, одно из которых содержит рисунки, тогда как другое от них освобождено. (Популярные броузеры обладают специальными пиктограммами, отмечающими место, где могли бы находиться (или вот вот появятся) загружаемые изображения, которые могут замусорить и испортить макет документа, превратив его в кашу.)
Текст – даже с изображениями, но без всяких пустых украшений или бессмысленной графики – подходит лучше всего, если вы хотите, чтобы документ было удобно обрабатывать поисковым службам, во множестве работающим в сети. Изображения почти всегда игнорируются этими поисковыми средствами. Если главное содержимое страниц составляют рисунки, очень мало информации об этих документах попадет в онлайновые рубрикаторы (сборники ссылок на разнообразные ресурсы сети, отсортированные по темам).
Одна картинка может стоить тысячи слов, но не забывайте, что никто
не слушает болтунов. Во первых, и это главное, смотрите на изображения
в вашем документе как на средства представления визуальной информации,
а не как на приманку для неопытных веб серферов. Изображения должны
помогать тексту легче доходить до читателей, а читателям – легче
ориентироваться в документе. Используйте изображения, чтобы пояснить, проиллюстрировать материал и обеспечить его примерами. Сопровождающие
текст фотографии, графики, диаграммы, карты и рисунки – это естественные и приемлемые кандидаты. Фотографии товаров – это неотъемлемая часть
каталогов и путеводителей потоварам в интернет магазинах. Пиктограммы в
якорях гиперссылок, снабженные анимацией, могут служить эффективным навигационным инструментом, облегчающим пользователю доступ к
внутренним и внешним ресурсам. Если изображение не выполняет ни одной из
этих достойных функций, выбросьте его вон из своего документа!
Одно из важнейших обстоятельств, которые необходимо учитывать при
добавлении изображений в документ, – это привносимая ими добавочная задержка
при получении документа из сети, особенно при модемном соединении. Тогда как обычный текстовый документ может иметь объем не более 10–15 Кбайт, любому изображению понадобятся сотни килобайт. Кроме того, общее время получения документа состоит не только из суммы времени, потраченного на каждую из его
частей, но включает в себя все дополнительные задержки, происходящие
при передаче данных по сетям.
В зависимости от скорости соединения (обычно измеряемой в битах или байтах в секунду), а также от уровня загрузки (перегрузки) сети влияющего на задержки при передаче данных, один документ, содержащий 100 килобайтное изображение, может потребовать менее секунды при кабельном соединении в ранние утренние часы, когда все
спят, до более чем десяти минут при подключении через сотовый телефон в полдень. Получили картинку?
Разумеется, можно сказать, что рисунки и прочие мультимедийные «излишества» подталкивают интернет провайдеров стремиться ко все более быстрому, лучшему, надежному обеспечению доставки сетевых материалов. В ближайшем будущем модемные соединения последуют за почтовыми каретами, уступив место кабельным модемам и ADSL.
Но цены падают, число потребителей растет – вот и источник задержек. И не будем забывать о броузерах в сотовых телефонах, а также о том, что в странах третьего мира связь ненадежная и медленная. Кроме того, когда вы пытаетесь получить доступ к перегруженному серверу, не имеет значения, с какой скоростью могли бы передаваться данные.
Технология PNG (Portable Network Graphics, переносимая сетевая
графика) была создана в качестве замены GIF, но не из-за того, что GIF
плохо справлялся со своими обязанностями. В действительности GIF
был и остается самым востребованным форматом в Интернете. Многие
пользователи были возмущены, когда в 1993 году, после того как GIF
приобрел популярность и широкое распространение, компания Unisys
решила зарегистрировать свои авторские права и собирать дань за
использование технологии сжатия GIF. Эта акция противоречила философии
свободного обмена информацией, которой придерживалось тогдашнее
сообщество пользователей Интернета, состоявшее, в основном, из научных
работников. Она подтолкнула неформальную группу, возглавляемую
Томасом Бутеллом (Thomas Boutell), к разработке альтернативы,
а именно PNG.
Преимущества технологии PNG над GIF и JPEG (помимо того, что она
предоставляет формат, пользователи которого не рискуют оказаться
ответчиками в суде) заключаются в более широком выборе цветовых
форматов (24 битовый RGB, шкала оттенков серого и 8 битовая GIF
подобная палитра) и в меньших потерях при сжатии. Уникальными
и весьма привлекательными чертами технологии PNG являются альфа
каналы, позволяющие указывать огромное количество слоев прозрачности
(более 65 тыс. против одного слоя в GIF) и способные симулировать
трехмерные изображения; гамма коррекция, управляющая яркостью
при переносе с одной платформы на другую и обеспечивающая более
четкую графику; а также двухмерное чередование строк, обеспечивающее
более точное постепенное проявление картинки.
PNG не поддерживает анимацию. Возможно, этот факт заставит кого-то
усомниться в целесообразности перехода на PNG, но мы все-таки советуем
вам попробовать эту технологию, особенно ради многоцветных и
высококачественных изображений.
Joint Photographic Experts Group (JPEG) – это организация по стандартизации, разработавшая то, что теперь называется JPEG форматом кодировки
изображений. Подобно GIF форматам, JPEG изображения являются платформно независимыми и специально сжатыми для скоростной передачи посредством цифровых коммуникационных технологий. В отличие от GIF,
формат JPEG поддерживает десятки тысяч цветов для отображения более
детальных, фотореалистических изображений. При этом JPEG использует
специальные алгоритмы, обеспечивающие значительно больший коэффициент
сжатия. Нередко удается, например, 200 килобайтное GIF изображение
сократить до 30 Кбайт, применяя JPEG. Достигая такого впечатляющего сжатия,
JPEG теряет часть содержащихся в изображении данных. Впрочем, можно
управлять уровнем потерь при сжатии, применяя специальные JPEG средства,
так что, хотя восстановленное изображение, скорее всего, и не совпадает с оригиналом в точности, оно будет настолько на
него похоже, что большинство людей не заметит разницы.
Хотя для фотографий JPEG подходит великолепно, он не особенно хорош для иллюстраций. Алгоритмы, используемые при сжатии и восстановлении
изображений, оставляют заметные следы на больших пространствах,
заполненных одним цветом. Следовательно, если вы хотите отобразить
рисунок, формат GIF может оказаться предпочтительнее.
Формат JPEG, обычно обозначаемый расширением .jpg (или .JPG),
распознается почти всеми современными графическими броузерами.
Изредка встречаются старые броузеры, которые не могут сами воспроизводить JPEG изображения.