Конспект урока на тему "изображения на веб-страницах". Иллюстрированный самоучитель по Web-графике. Секреты успешного использования изображений

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

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

Двумя наиболее часто применяемыми в Интернете графическими форматами являются GIF и JPEG. Формат, разработанный группой JPEG (Joint Photographic Experts Group — Объединенная группа экспертов по машинной обработке фотографических изображений) и получивший ее название, используется, как правило, для сохранения изображений с плавными цветовыми переходами, таких, например, как фотоснимки.

Практически все другие графические элементы сохраняются в формате GIF (Graphics Interchange Format) — формат обмена графическими данными. В настоящее время появился еще один новый графический формат, приобретающий все большую популярность: PNG (Portable Network Graphics — переносимая сетевая графика). Ожидается, что со временем он заменит собой формат GIF. Однако не спешите пересохранять все свои графические файлы в этом формате, пока еще он поддерживается далеко не всеми браузерами.

Все изображения добавляются на веб-страницу с помощью одного и того же тега, называемого тегом источника изображения . Наверное, сейчас уже вы сами можете определить, что данная запись состоит из собственно тега , его атрибута (scr) и значения данного атрибута (место расположения). Однако, поскольку применение атрибута scr является обязательным, удобнее говорить об этой записи как об одном общем теге. Вероятно, вы обратили также внимание, что для тега источника изображения не предусмотрен соответствующий закрывающий тeг. Это отдельный самодостаточный тeг, и потому не забывайте добавлять в его конце закрывающую косую черту: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Первые изображения е> Этот рисунок добавлен на мою первую веб-страницу.р>

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

На примере представленного далее НТМL кода показано, как атрибут alt добавляется внутрь тега . Подобно атрибуту src, атрибут alt сообщает веб-браузеру некоторую дополнительную информацию об изображении, и его также всегда можно использовать вместе с тeгом .

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

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

Хотя атрибут alt можно определять для каждого тега , следите за тем, чтобы не назначить некоторым графическим элементам несоответствующие им текстовые сообщения. Например, не имеет смысла добавлять альтернативные текстовые надписи к различным элементам внешнего оформления веб-страницы. Чтобы избежать подобных ошибок, можете присваивать атрибуту alt таких элементов пустое значение (alt=» »). Если не задавать значения никаких других атрибутов, браузер воспроизведет изображение в егo исходном размере, выровняв верхний край изображения с верхним краем расположенной рядом текстовой строки. Вы можете изменить оба эти параметра, воспользовавшись тегами стилевых таблиц.

Атрибуты изображения
Для тега предусмотрены атрибуты, позволяющие изменять размер изображения. Некоторые из этих атрибутов перечислены ниже.
height — Указывается в пикселях или процентах — Определяет высоту изображения
width — Указывается в пикселях или процентах — Определяет ширину изображения.

Настройка высоты и ширины изображения
Размеры размещаемого на веб-странице изображения могyт быть заданы с помощью атрибутов height и width. 3начения этих атрибутов задаются либо как фиксированные количества пикселей, либо в процентном выражении относительно размеров страницы. Взгляните на представленный далее код HTML. В первом тегe размеры исходного изображения, которое вы уже видели на предыдущих рисунках этого урока, устанавливаются равными 60 пикселям по вертикали и 60 пикселям по горизонтали. Во втором тегe ширина того же изображения устанавливается равной 6% от ширины страницы, а высота — 10% относительно высоты страницы. На рисунке показано, как оба эти изображения выглядят в окне браузера.

Воспроизводя изображение в своем окне, браузер одинаково хорошо справляется с обработкой значений, заданных как в пикселях, так и в процентах, Помните, однако, о том, что на компьютерах посетителей вашей веб-страницы может быть задано экранное разрешение, отличное от того, которое установлено для вашего монитора. Что из этого следует? Например для монитора задано разрешение 800х600. В предыдущем примере для добавляемого на веб-страницу рисунка была задана ширина на уровне 6% от ширины страницы, которая при таком разрешении составит 48 пикселей. Если просматривать то же изображение на мониторе с разрешением 1024х800, указанным 6% от ширины страницы будет соответствовать уже ширина, равная 61 пикселю.

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

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

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

Выравнивание текста и графики
Атрибут align тега позволяет выравнивать изображение по правому (значение right) или левому (значение left) краю текстовой строки. Примеры использования этого атрибута показаны на рисунке.

Этот же атрибут может при меняться и для выравнивания изображения по вертикали (опять-таки относительно текстовой строки). Он может принимать три других значения top, bottom и center. Если атрибуту align присвоено значение top, верхний край изображения выравнивается по верхнему краю любого окружающего его текста. Если атрибуту align присвоено значение bottom, нижний край изображения выравнивается по нижнему краю окружающего его текста. Если же атрибуту align присвоено значение center, центр изображения выравнивается по центру текстовой строки.

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

а>

В данном случае, после того, как посетитель веб-страницы наведет указатель мыши на это изображение, рядом с курсором отобразится текстовое сообщение «Это мой автопортрет!». После щелчка на изображении будет открыт документ DOС2.htm, на который указывает гиперссылка.

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

а>

Как видите, щелчок на изображении миниатюра.jpg сопровождается открытием файла другого изображения (изображение.jpg). Текстовая строка, заданная как значение атрибута alt, сообщает посетителю, как открыть основное изображение.

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

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

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

Поскольку атрибут alt имеет столь важное значение (ведь его рекомендуется определять для каждого тега , будьте внимательны при его использовании. Следите за тем, чтобы содержание текстового сообщения всегда соответствовало самому изображению, иначе посетители вашей страницы могут быть введены в заблуждение. Это же замечание применимо и в обратном направлении: следите за тем, чтобы изображения соответствовали представленной на веб-странице текстовой информации. Фотоснимок самолета будет уместен на сайте, посвященном авиаперевозкам, и совершенно лишним на сайте, рассказывающем о дикой природе.

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

Если представленное на веб-странице изображение не защищено авторскими правами, вы можете скопировать его в память cвoeгo компьютера. Для этогo достаточно просто щелкнуть на этом изображении правой кнопкой мыши и выбрать в открывшемся меню команду Сохранить изображение как. Сохранив изображение на своем компьютере, вы можете использовать его далее подобно любому другому рисунку.

Определение 1

Web-страница - это текстовый файл, созданный на языке HTML и размещенный в World Wide Web (WWW). В Web-странице кроме текста могут содержаться гипертекстовые ссылки, по которым можно осуществить переход к другим Web-страницам и просмотреть их, а также вставки в виде графики, анимации, видеоклипов и музыки.

С помощью языка HTML можно:

1. Создавать и редактировать Web-страницы.
2. Редактировать документы HTML-формата из Интернета с учетом функционирования всех внедренных в документ объектов (картинок, анимаций и т.д.).
3. Используя гипертекстовые ссылки и возможность внедрения в документ HTML-формата рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов, создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты.

Замечание 1

Графические изображения, как правило, хранятся в отдельных файлах. В языке HTML имеются особые теги, с помощью которых в кодах Web-страниц прописываются ссылки, представляющие собой фактические адреса этих файлов в сети Интернет. Встречая такие теги, Web-обозреватель делает запрос Web-серверу на соответствующий файл с изображением, аудио - или видеороликом и выводит его на Web-страницу в место нахождения данного тега. Любые данные (изображения, аудио- и видеоролики и др.), которые хранятся в отдельных от Web-страницы файлах, называют внедренными элементами Web-страниц. Рассмотрим подробнее процесс добавления изображения на Web-страницу.

Добавление изображений на Web-страницу

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

Добавить изображение на страницу можно, используя тег источника изображения, который имеет вид:

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

Добавление альтернативных надписей

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

Ниже представлен НТМL-код, в котором атрибут alt добавлен внутрь тега. Данный атрибут аналогично атрибуту src сообщает браузеру некую дополнительную информацию об изображении и его также всегда можно использовать вместе с тeгом.

alt="Это картинка!" />

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

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

Атрибуты изображения

В теге имеются атрибуты, которые позволяют изменять размер изображений. Вот некоторые из них:

• height – с помощью него определяется высота изображения в пикселях или процентах;
• width – с помощью него определяется ширина изображения в пикселях или процентах.

Настройка высоты и ширины изображения

Размеры изображений, размещаемых на Web-страницах, могут задаваться с помощью вышеназванных атрибутов. Причем их значения задают либо как фиксированное количество пикселей, либо в процентах относительно размеров страницы. В представленном ниже коде HTML первый тег содержит размеры исходного изображения в пикселях (60 пикселей по вертикали и 60 пикселей по горизонтали), второй тег ширину того же изображения устанавливает равной 6% от ширины страницы, а высоту – 10% относительно высоты страницы.

аlt="Это картинка!" hеight="60" width="60" />

аlt="Это картинка!" height="10%" width="6%" />

Замечание 2

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

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

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

Выравнивание текста и графики

Для выравнивания изображения по правому (right) или левому (left) краю текстовой строки используется атрибут align тега. Например:

аlt="Это картинка!" hеight="60" width="60" align="right" />

Для выравнивания изображения по вертикали относительно текстовой строки можно также использовать этот атрибут, который может принимать значения top, bottom и center. Значение top указывает на выравнивание верхнего края изображения по верхнему краю окружающего его текста. Значение bottom указывает на выравнивание нижнего края изображения по нижнему краю окружающего его текста. Значение center указывает на выравнивание центра изображения по центру текстовой строки.

Использование изображений в качестве ссылок

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

Миниатюры изображений

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

аlt="Щелкните, чтобы увидеть нормальное изображение."

hеight="60" width="60" />

Секреты успешного использования изображений

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

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

Замечание 3

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

При использовании изображений, заимствованным в сети Интернет, на создаваемой странице, необходимо проверить, не защищены ли эти изображения авторскими правами.

В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.

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

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:

< IMG SRC = "logotip.jpg" >

Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.

Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Здесь числа 20 и 10 определяют размеры полей.

Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

< HTML >

< HEAD >

< TITLE > Упражнение 1 < / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Текст обтекает графику справа < / H1 >

Рис. 657 . Текст обтекает картинку справа

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

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

Форматы файлов

Широкое распространение для веб-графики получили два формата - PNG и JPEG. Их многофункциональность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений. Кроме них на сайтах применяются форматы GIF и SVG.

Формат PNG-8

PNG-8 (Portable Network Graphics, переносимая сетевая графика) - свободный формат созданный для замены GIF, в котором долгое время использовались проприетарные алгоритмы.

Особенности

• Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле - от 2 до 256.
• В отличие от GIF, не отображает анимацию.

Область применения

Формат PNG-24

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

Особенности

• Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
• Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной.
• Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объём графического файла получается наибольшим.

Область применения

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

Формат JPEG

JPEG (Joint Photographic Experts Group, объединённая группа экспертов-фотографов) - популярный формат графических файлов, широко применяемый при создании сайтов и для хранения фотографий. JPEG поддерживает 24-битный цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в изображение, особенно содержащий текст, мелкие детали или чёткие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются указанным цветом.

Особенности

• Количество цветов в изображении - примерно 16,7 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
• Основная характеристика формата - «качество», позволяющее управлять конечным размером файла. Качество измеряется от 0 до 100, чем выше значение, тем лучше получается картинка, но и увеличивается объём файла.
• Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

Область применения

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

Формат GIF

GIF (Graphics Interchange Format, формат для обмена изображениями) - формат графических файлов, широко применяемый при создании анимированных изображений. GIF использует 8-битный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Особенности

• Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры. Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
• Поддерживает покадровую смену изображений, что делает формат популярным для создания простой анимации.
• Использует свободный от потерь метод сжатия

Область применения

Текст, логотипы, иллюстрации с чёткими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

Формат SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) - векторный формат, изображение в котором состоит не из пикселей, а из объектов и кривых. По этой причине не годится для растровых фотографий, состоящих из точек, но прекрасно подходит для иллюстраций, содержащих отчётливые контуры.

Особенности

• Изображения в формате SVG можно сколь угодно масштабировать без потери качества картинки.
• Объём файла получается обычно небольшим.
• Поддерживает анимацию и интерактивность.

Область применения

Текст, логотипы, иллюстрации с чёткими краями.

Добавление изображения

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

" alt="<альтернативный текст>">

Оба атрибута src и alt являются обязательными.

Атрибут src задаёт путь к графическому файлу, для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных способов, как определить путь к изображению для размещения его на веб-странице. В качестве примера возьмём файл с именем target.png , который хранится в папке images корня сайта.

http://example.ru/images/target.png
Если адрес начинается с протокола (http:// или https://), то речь идёт об абсолютном адресе. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

//example.ru/images/target.png
Это абсолютный адрес изображения без указания протокола. Браузер самостоятельно подставит нужный протокол, на котором работает сайт (http:// или https://). Учтите, что такого рода адреса не работают на локальных веб-страницах, а только в Интернете под управлением веб-сервера.

/images/target.png
Если в начале адреса стоит косая черта (/), это означает, что папка images располагается в корне сайта. Одна папка может быть вложена в другую, поэтому путь может увеличиться. К примеру, /assets/images/target.png означает, что папка assets располагается в корне сайта, в ней хранится папка images , внутри которой расположен файл target.png .

../images/target.png
Две точки с косой чертой в начале адреса (../) говорят о том, что папка с изображением находится на уровень выше в структуре папок относительно HTML-документа. На рис. 1 показан файл source.html , в который требуется вставить рисунок target.png .

Рис. 1. Размещение файлов

images/target.png
Имя папки без всяких точек в начале адреса сообщает, что HTML-документ и папка с изображением находятся на одном уровне (рис. 2).

Рис. 2. Размещение файлов

target.png
Единственное имя файла говорит о том, что изображение и веб-страница располагаются в одном месте (рис. 3).

Рис. 3. Размещение файлов

В примере 1 показано несколько способов добавления рисунка на веб-страницу.

Пример 1. Добавление изображений

Альтернативный текст

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

Атрибут alt должен описывать содержимое изображения, а в случае, если картинка выполняет декоративную функцию и не несёт какого-либо содержательного смысла, то оставляем alt пустым (пример 2).

Пример 2. Использование alt

Если для изображений требуется видимая подсказка, то следует воспользоваться глобальным атрибутом title , который можно добавлять к любому элементу, а не только к картинкам. При наведении курсора на изображение появится текст, содержащий значение атрибута title (пример 3).

Пример 3. Использование title

Вид всплывающей подсказки зависит от конкретного браузера и её нельзя изменить. На рис. 2 показана всплывающая подсказка в браузере Firefox.

Рис. 2. Вид всплывающей подсказки

Изменение размеров рисунка

Для изменения размеров рисунка у элемента предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пиксели или проценты. В примере 4 показано добавление этих атрибутов к .

Пример 4. Размеры рисунка

Атрибуты width и height не являются обязательными, после загрузки изображения браузер самостоятельно установит его исходный размер. В основном эти атрибуты применяются в следующих целях:

• зарезервировать место под картинку;
• уменьшить размер больших фотографий;
• улучшить качество изображения для дисплеев Retina.

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

Ширину и высоту изображения можно менять как в меньшую, так и в большую сторону. Браузер самостоятельно уберёт лишние пиксели или наоборот, достроит недостающие, чтобы получить изображение соответствующего размера. Качество получаемой в итоге картинки сильно зависит от её содержимого, в любом случае надо помнить, что бесконечно увеличивать изображение без потери детализации возможно только в кино.

Дисплеи Retina отличаются высокой плотностью пикселей и детализацией изображений, поэтому обычные картинки на них выглядят чуть размытыми. Чтобы улучшить их качество, картинки готовят удвоенного размера. К примеру, если на веб-странице требуется фотография шириной 400 пикселей, то мы берём фотографию шириной 800 пикселей, но в значении атрибута width оставляем ширину 400 пикселей.

Атрибуты width и height не обязательно должны идти совместно. Если какой-то из этих атрибутов не указан, то браузер самостоятельно подставит нужное значение исходя из пропорций изображения.

За счёт того, что мы самостоятельно подставляем ширину и высоту картинки, мы можем намеренно искажать её пропорции, вытягивая картинку по вертикали или горизонтали.

Кроме пикселей в качестве размеров допустимо использовать процентную запись. В таком случае ширина задаётся относительно родительского элемента.

HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов

Вставка изображений в HTML-документ

1. Тег

Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,

Или