HTML CompDocs

• src- указывает путь к картинке;
  
• width- указывает ширину области, в которой нужно отображать картинку;
  
• height- указывает высоту области, в которой нужно отображать картинку;
  
• border- настройка обрамления картинки;
  
• alt- описание картинки;
  
• align- настройка "обтекания".
  
  Теперь более подробно о каждом параметре.
  
  Итак, со srcвсе должно быть понятно, он просто указывает адрес полный картинки, которую следует отображать.
  
  Параметры widthи heightзадают соответственно ширину и высоту области, в которой будет отображаться картинка. Многие начинающие вебмастера, из-за безразличности авторов, дающих описания, часто по ошибке принимают данные параметры как описание реальной ширины и высоты самой картинки. На самом деле это не совсем, точнее совсем не так. Я не зря акцентирую внимание на "область отображения". Даже если у вас картинка имеет ширину 200, а высоту 50 пикселей, а вы укажите width=50 height=200т.е. наоборот - ширину 50, а высоту 200, картинка будет отображаться именно такой. Картинка заполнит всю область, которая отведена под нее. Т.е. если какой-то параметр будет ниже реальных, картинка по этому измерению будет отображаться сжатой (в нашем примере это ширина). Если же этот параметр выше реальных значений картинки, картинка, заполняя всю область отображения, будет растягиваться. Стоит отметить, что во всех популярных браузерах, ради максимальной скорости работы, для изменения размеров картинки используется самый примитивный алгоритм, алгоритм соседних точек. Не вдаваясь в подробности, отмечу лишь, что результат работы данного алгоритма, т.е. измененная в размерах картинка, выглядит просто ужасно. Хотя, справедливости ради, стоит отметить, что прием иногда используется вебмастерам, но мы пока его рассматривать не будем.
  
  Сразу хочу оговориться, представленный выше список параметров представляет лишь самые часто применяемые и самые полезные параметры. Но вовсе не обязательно в своем коде применять их все. Вы можете применять их по своему усмотрению. Следовательно, вы можете не описывать параметры widthи height. Что в этом случае будет? Браузер будет отображать картинку, так как нам это надо, т.е. в 100% ее размера. Однако стоит отметить, браузер не может узнать разрешение картинки до полной ее загрузки, следовательно, особенно если у вас много картинок, по мере загрузки все изображение будет постоянно дергаться, подстраиваясь под новые полученные данные - размеры загруженных картинок. Чтобы этого избежать, а также, чтобы пользователи, которые работают с отключенной графикой могли видеть корректное отображение структуры сайта, следует задавать параметры widthи height, которые характеризуют реальные параметры картинки. Т.е. если у нас картинка имеет ширину 200, а высоту 50 пикселей, то и писать нам надо width=200 height=50.
  
  Еще раз напоминаю, вы можете указывать любые параметры widthи height- они лишь укажут браузеру каким размером отображать картинку. Кстати, сама картинка от этого никак не меняется, даже если вы укажите отличные от реальных размеры картинки, пользователь, посетивший ваш сайт увидит в браузере ее такой, какой вы ее описали, но сохранится она у него на винчестере, в кеше браузера в реальных размерах. Так что еще одна частая ошибка начинающих - создание галереи, например обоев для рабочего стола, в которой уменьшенные для просмотра копии это на самом деле не уменьшенные картинки, а большие, но отображающиеся более маленькими. Весь смысл маленьких картинок в том чтобы пользователь не ждал долгой загрузки больших обоев, а выбрал, какие ему нравятся по маленькой копии, и загрузил уже их... Тут, к стати еще и второй момент. Часто вебмастера, в том числе и я, в своих галереях, уже больших обоев, отображают их маленькими - чтобы не нарушить дизайн сайта. При этом картинка загружается, разумеется, большой, просто выглядит как маленькая. Так что в таких случаях надо писать поясняющий текст для пользователей.
  
  Продолжение следует. Если не хотите забыть скачать новый выпуск CompDocs, подпишитесь на наши рассылки, формы для подписки на главной странице.