www.ПЕРВЫЕ ШАГИ.ru :: Шаг 9 - Ой, сколько картинок !!!

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

Форматы изображений

Изображения в интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPG.

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

Формат JPG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое можеть иметь 7 уровней качества (от очень плохого до наилучшего).

В интернете сейчас начинают применять новый стандарт PNG, но он пока мало распространен. Он позволяет создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого занимает намного больше места, чем JPG.

Тег <img>

Этот тег вставляет в документ изображение. Источник изображения указывается в атрибуте src. Им служит как правило путь относительно текущего документа, но можно использовать вместо пути его URL в Internet'е. Закрывающая скобка запрещена.

 <html>
  <base href="http://www.mjk.msk.ru/~dron/images">
   <p><img src="prob.gif">
   <p><img src="../banner.gif">
   <p><img src="http://www.rambler.ru/dronban.jpg">
</html>

Так как я специально указал тег <base href=...>, то первая картинка будет загружаться из http://www.mjk.msk.ru/~dron/images/prob.gif. Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из http://www.mjk.msk.ru/~dron/. Последняя картинка демонстрирует возможность загрузки картинок с других сайтов, и загрузится с сайта http://www.rambler.ru/. Эти названия изображений даны только для примера и на самом деле не существуют !!!

Кроме атрибута src существуют еще несколько атрибутов:

alt

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

Пример:

<img src="pic1.gif" alt="Рисунок 1. Пример вращения твердого тела.">
<img src="b.jpg" alt="b.jpg (1340b)">

Большинство атрибутов в html не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.

lowsrc

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

align

Задает выравнивание изображения относительно текущей строки :
align=top Выравнивает верхний край изображения по верхнему краю текущей строки.
align=middle Выравнивает центр изображения по базовой линии текущей строки.
align=bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки.
align=left Выравнивает изображение по левому полю.
align=right Выравнивает изображение по правому полю.

width и height

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

border

Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.

vspace

Используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным.

usemap и ismap

Устанавливают на картинку карты ссылок, на которых я остановлюсь подробнее в следующих шагах.

Совет : В названиях файлов изображений используйте только прописные бувкы алфавита. Связано это в тем, что большинство хостирующих огранизаций используют Unix-системы, а в таких ситемах имена prob.gif и Prob.GIF различны. Несоблюдения такого простого правила часто приодит к тому, что из странички вызывается файл с именем p1.gif, а на самом деле там лежит что-нибудь вроде P1.Gif. Кстати этоже относится и к названиям самих страниц. Старайтесь также не использовать длинных названий типа this_is_my_house_image1.gif, когда можно воспользоваться простым именем pic1.gif или p1.gif.

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

Я больше чем уверен, что у вас отключены картинки в браузере, чтобы увеличить скорость загрузки. И поэтому сами думайте и создавайте себе рамки при их использовании. Уделяйте больше внимания текстовому содержанию сайта, т.к. информации изображения несут в себе мало, а посетители ходят именно за ней. Не буду выдвигать лозунг "Долой Изображения !!!", как это сделал Артемий Лебедев (знаменитый вебмастер РуНета), но возможно такой лозунг будет как нельзя кстати при переоценке и переориентировке ваших ценностей.