| HTML | WebReference
Элемент <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
<img src="<адрес>" alt="<текст>">Закрывающий тег
Атрибуты
- align
- Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
- alt
- Альтернативный текст для изображения.
- border
- Толщина рамки вокруг изображения.
- height
- Высота изображения.
- hspace
- Горизонтальный отступ от изображения до окружающего контента.
- ismap
- Говорит браузеру, что картинка является серверной картой-изображением.
- longdesc
- Указывает адрес документа, где содержится аннотация к картинке.
- sizes
- Задаёт размеры изображения для разных макетов страницы.
- src
- Путь к графическому файлу.
- srcset
- Путь к графическим файлам с учётом размера изображения и устройств.
- vspace
- Вертикальный отступ от изображения до окружающего контента.
- width
- Ширина изображения.
- usemap
- Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.
Также для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IMG</title>
</head>
<body>
<p><a href="page/lorem.html"><img src="image/girl.jpg"
alt="Девочка с муфтой"></a></p>
</body>
</html>Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
webref.ru
Карты-изображения | htmlbook.ru
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Клиентский вариант карты-изображения
Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты.
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).
Пример 1. Использование карты-изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Карта-изображение</title> </head> <body> <p><img src="images/map.gif" usemap="#map" alt="Навигация"></p> <p><map name="map"> <area shape="poly" alt="Закладка 2" coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" href="2.html"> <area shape="poly" alt="Закладка 3" coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.html"> <area shape="poly" alt="Закладка 4" coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" href="4.html"> </map></p> </body> </html>
Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>.
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
alt
Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
<area shape="circle" coords="230,340, 100" href="circle.html">Для прямоугольника — координаты левого верхнего и правого нижнего угла.
<area shape="rect" coords="24,18, 210,56" href="rect.html">Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
href
Определяет адрес ссылки для области. Правила записи такие же, как и для тега <a>.
Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Преимущества карт-изображений
1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.
2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.
Недостатки
1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.
2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
Юзабилити
С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.
Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.
Резюме
Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.
htmlbook.ru
HTML: Картинки, форматы изображений
Картинки являются важной и неотъемлемой частью большинства веб-сайтов, они делают их визуально более привлекательными и запоминающимися. Графические элементы дизайна могут стать основой бренда вашего сайта и визуальной индивидуальности, отличающей ваш сайт от миллионов других в интернете.
Изображения могут не только украшать страницы, но и нести какую-либо информацию. Фотографии, иллюстрации, логотипы, иконки, карты, диаграммы и графики иногда могут нести в себе больше информации, чем текст, таким образом совместное использование текста и картинок делает веб-страницу более визуально привлекательной и намного более информативной.
Как работают цифровые изображения
Как и все остальное, что находится в памяти компьютера, цифровые изображения представлены в виде единиц и нулей (в виде двоичного кода), собранных в виртуальный файл. Компьютер считывает этот массив цифр (каждая цифра это двоичный бит) и переводит каждый набор битов в сигнал, который может быть передан на устройство отображения, которое превращает этот сигнал в крошечную цветную точку (пиксель). Файл также содержит закодированные инструкции о том, как эти пиксели должны быть расположены (это похоже на собирание мозайки, требующей собрать из маленьких частей целое изображение). Отдельные пиксели можно увидеть если внимательно присмотреться к монитору, также вы можете посмотреть на изображение, расположенное ниже, показывающее пиксели на увеличенной картинке. Каждый квадратик на которой является пикселем:
Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет его загрузку. Сжатия файла можно добиться двумя способами: уменьшением количества цветов или уменьшением размера. Цель сжатия изображений — добиться наименьшего веса файла без особого ущерба для качества.
Форматы изображений
Вы можете сохранять цифровые изображения, используя три общих формата: JPEG, GIF и PNG. Каждый из них имеет различные способы сжатия, свои достоинства и недостатки. Большинство браузеров имеют встроенное программное обеспечение, которое будет интерпретировать и отображать файлы этих форматов.
С этой темой смотрят:
puzzleweb.ru
способы задания ширины и высоты
От автора: приветствую вас. Картинки — практически один из самых важных элементов на веб-страницах. Благодаря им нам значительно проще и интереснее воспринимать то, что мы видим на экране. Но если заводить речь об их встраивании в веб-страницы, то нужно знать как минимум то, как управлять размером картинки в html. Именно об этом мы сегодня поговорим.
Способы задать размер изображениям
Будем смотреть все на очень простом примере. Вот такой есть код:
<div id = «img»> <img src = «tiger.jpg»> </div>
<div id = «img»> <img src = «tiger.jpg»> </div> |
Это блок с идентификатором, внутри которого лежит картинка. Предположим, что наш блок имеет фиксированные размеры. Для наглядности зададим еще и красную рамку, чтобы четко видеть его границы:
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Зарегистрироваться#img{ width: 200px; height: 160px; border: 2px solid red; }
#img{ width: 200px; height: 160px; border: 2px solid red; } |
Итак, ширина блока — 200 пикселей, а высота — 160. И вот нам нужно, чтобы в него вписалось фото. Но величины ее, допустим, мы не знаем. Ну ладно, я могу вам сказать, что я сделал примерно 300 на 200 пикселей, в таком случае фото попросту не влезет в блок. Давайте посмотрим, что будет:
На этом скриншоте очень четко видно, что оно выходит за пределы красной рамки, то есть не вписывается в блок, в котором должно находиться внутри. Каким образом можно исправить ситуацию?
Предположим, что фото лежит на сервере и изменить непосредственно ее ширину и высоту нельзя. В таком случае один из вариантов — задать фиксированную ширину и высоту картинке с помощью атрибутов тега img: width и height.
<img width = «200» height = «160» src = «tiger.jpg»>
<img width = «200» height = «160» src = «tiger.jpg»> |
Вот, теперь все идеально вписалось в блок, потому что теперь имеет такие же параметры, как и он сам. Но помните одну важную деталь: если вы сами прописываете и ширину и высоту, то, скорее всего, нарушаете пропорции. Чтобы не нарушать их, нужно прописать только одно значение (ширину). Тогда второе браузер посчитает сам, не нарушая пропорций.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Зарегистрироваться<img width = «200» src = «tiger.jpg»>
<img width = «200» src = «tiger.jpg»> |
Теперь изображение по высоте занимает не все доступное место, но зато ее пропорции не нарушены.
Собственно, такой способ задания размера (прямо в html через атрибуты) годится лишь в том случае, когда вы работаете с каким-то конкретным изображением на конкретной страницы. Если размеры необходимо определить группе картинок, намного правильнее использовать отдельной файл стилей, в котором прописывать все необходимые правила.
В css правила можно задать как отдельной картинке (выделив ее идентификатором), группе (прописав каждому изображению класс или с помощью других доступных селекторов) либо сразу всем, обратившись по селектору img.
Как сделать в css адаптивные картинки?
Для этого уже давно веб-разработчики и верстальщики используют такой достаточно простой код:
img{ max-width: 100%; height: auto; display: block; }
img{ max-width: 100%; height: auto; display: block; } |
То есть максимальная ширина 100% от размеров родительского контейнера, автоматическая высота (браузер рассчитывает сам, не нарушая пропорций) и блочное отображение. Последнее вовсе не обязательно и если его удалить, это никак не скажется на поведении картинок.
Если удалить атрибут width из html-кода, то результат будем аналогичным:
Но заметьте, что при изменении размеров блока-контейнера изображение растягивается уже на новые размеры, без нарушения пропорций. При этом, если вы попробуете уменьшить размеры блока, картинка не вылезет за него, а все так же послушно будет вписываться в него по ширине. Вот таким образом мы делаем “резиновые” и, по сути, адаптивные картинки.
Итак, сегодня я показал вам, как управлять размером картинок в html и css. Используйте эти знания и изображения на ваших сайтах будут смотреться ровно и красиво.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Зарегистрироваться
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
Изменение размера картинки (ширина и высота)
Если для картинки в HTML коде не указаны размеры, то браузер будет отображать её в естественном размере, но он не сможет определить размер до тех пор, пока картинка загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width (ширина картинки) и height (высота картинки) тега <img>, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.
Если атрибуты width и height содержат значения не соответствующие натуральному размеру картинки, браузер будет масштабировать картинку под эти размеры. Однако обычно следует избегать изменения размеров картинки таким образом. Когда браузер масштабирует картинку в большую или меньшую сторону от ее натурального размера, то картинка может отображаться менее четко или более резко. В идеале в атрибутах width и height должны быть указаны натуральные размеры, а для увеличения или уменьшения картинок лучше воспользоваться графическим редактором.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<p>
<img src="flower.png">
<img src="flower.png">
<img src="flower.png">
</p>
<p>
Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и
height. Но при очень большом увеличении качество картинки может стать хуже.
</p>
</body>
</html>
Попробовать »Если вы решили изменить размер картинки с помощью атрибутов width и height, то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.
Примечание: чтобы не вычислять пропорции для высоты и ширины картинки, можно просто задать только один из атрибутов или width или height, в зависимости от того, какой из размеров в данной ситуации вам важнее ширина или высота картинки. В случае указания только одного атрибута, второй размер (ширину или высоту) браузер подберёт автоматически. Вы можете проверить это на предыдущем примере, стерев для картинки в коде один из атрибутов, задающих размер.
С этой темой смотрят:
puzzleweb.ru
Внедрение картинки в таблицу стилей или код страницы
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
С помощью этого сервиса Вы можете избавиться от длительной загрузки множества маленьких изображений, перенеся коды картинок в CSS — файл стилей. Т.к. браузер Internet Explorer не поддерживает внедрение изображения в текст, то используется для него отдельный код.
Для получения готового для использования кода, укажите изображение, нажмите кнопку «Сгенерировать Код» и вставьте полученное изображение себе на сайт.
Примеры изображений
, 
, 
, 
, 
, 
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
, 
, 
, 
,Кликните на изображении для получения кода примера.
Для вставки изображения в HTML-код страницы используйте следующий код:
<!--[if !IE]>-->
<img src="data:image/gif;base64,двоичный_код_изображения_закодированный_в_base64" />
<!--<![endif]-->
<!--[if (IE)]>
<img src="ссылка на исходное изображение на вашем сервере для IE" />
<![endif]-->Для вставки изображения как иконки ссылки в CSS файл используйте следующий код:
<style>
a.ya {
width: XXpx;
height:YYpx;
background:url(data:image/gif;base64,двоичный_код_изображения_закодированный_в_base64)
top left no-repeat;
}
*html a.ya {
width: XXpx;
height:YYpx;
background:url(ссылка на исходное изображение на вашем сервере для IE) top left no-repeat;
}
</style>
А это сама ссылка:
<a href="#" class=ya> </a>
Техническая информация
Для внедрения картинки на веб-страницы при помощи data:URI используется base64 — кодирование. Эта схема позволяет вставить код картинок прямо в (x)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Встроенные или InLine изображения используют схему data:URI для внедрения двоичного кода картинки прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как непосредственные данные. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешним ресурсам.
Синтаксис у data:URL следующий:
data:["тип данных"][;base64],"данные"
Допустимый тип данных: image/gif, image/jpeg, image/pjpeg, image/png. Тип данных можно определить с помощью функции mime_content_type
Преимущества data:URL
- С помощью data:URL вы экономите количество HTTP-запросов.
- За счет уменьшения числа параллельных потоков загрузки браузера можно получить очень существенный выигрыш в скорости загрузки страницы при большом количестве небольших иконок / пиктограмок.
- Упрощают HTTP-запросы и повышают общую производительность.
- Встроенные картинки кешируются вместе с таблицей стилей
Недостатки data:URL
- Встроенные изображения не поддерживаются в Internet Explorer 5–7, хотя сообщается, что версия 8 их поддерживает.
- Текстовое base64-представление данных также занимает больше, чем бинарное изображение.
- Ограничение на размер встроенных изображений. По стандарту RFC браузеры должны поддерживать только URL длиной до 1024 байтов. Хотя большинство совеременных браузеров имеют больший допустимый размер, например, Opera ограничивает data:URL до примерно 4100 символов. Firefox вплоть до 100Кб, IE8b1 поддерживает data URL длиной не более 32Кб.
- Требуются дополнительные действия для обновления внедренного изображения: перекодировать, вставить.
- Встроенные картинки НЕ кешируются, если внедрены непосредственно в динамический HTML-документ.
Для внедрения музыки на страницу воспользуйтесь этим сервисом.
Возможно Вам будет интересно:
htmlweb.ru
Код картинки HTML
Для отображения картинки, на странице сайта, используется тег <img>. Если на том или ином сайте необходимо расположить какие-либо графические элементы, то для этого нужно использовать такие форматы, как *.jpeg, *.png или *.gif. Дело в том, что они поддерживаются абсолютно всеми распространенными браузерами, а для того, чтобы отобразить графику в других форматах, зачастую требуется использовать различные специальные средства.
Код для вывода изображения в HTML, выглядит следующим образом:
<img src="URL" alt="">
Для вывода картинки в XHTML, в коде добавляется слеш с отступом:
<img src="URL" alt="" />
Все файлы изображений, используемых на WEB-страницах, обычно хранятся в папках, которые имеют имена «img» или «images». В тех случаях, когда речь идет об изображениях, формирующих дизайн сайта, то для них лучше предусмотреть специальную папку например – «design».
Добавление рисунка
Для того чтобы на WEB-страницу добавить изображение, следует использовать тег <img>. Он должен сопровождаться атрибутом src, который определяет тот адрес, по которому размещен графический файл.
В тех случаях, когда файл располагается в одной папке со страницей, то его адрес можно не указывать. Достаточно просто имени и расширения графического файла.
Если же он располагается в другой папке, то надо указывать путь к нему.
<img src="/images/picture.jpg">
Указание размеров картинки
Чтобы средствами HTML можно было изменять размеры рисунков, тег <img> имеет такие атрибуты, как heigh (высота) и width (ширина). Для указания их значений применяются пиксели, причем таким образом, чтобы сами аргументы совпадали с теми физическими размерами, которые имеет картинка.
В коде HTML в обязательном порядке следует задавать размеры, которые имеет картинка. Благодаря этому ее загрузка несколько ускорится, поскольку браузер заблаговременно будет располагать информацией о том, какой размер будет иметь изображение. Это позволит ему производить загрузку другого содержимого страницы не дожидаясь того момента, когда изображение загрузится полностью.
Что касается задания значения изображений, то их можно указывать как в пикселях, так и в процентах. В первом случае размер изображения не зависит от разрешения экрана и всегда будет постоянным, а во втором он будет меняться в зависимости от разрешения экрана. К примеру:
<img src="/images/picture.jpg">
Или
<img src="/images/picture.jpg">
Альтернативный текст
Чтобы создать альтернативный текст, следует применять атрибут alt для тега <img>.
Альтернативный текст необходим для того, чтобы картинки были обозначены некоей текстовой информацией в тех случаях, когда в браузере показ изображений отключен, или же на период их загрузки. По его содержанию можно судить о том, что изображено на картинке, причем появляется он до ее загрузки. После того как загрузка картинки завершена, альтернативный текст исчезает.
<img alt="Альтернативный текст" />
Альтернативный текст
Всплывающая подсказка
Эта подсказка, как правило, применяется для того, чтобы при наведении курсора мышки на картинку появился краткий комментарий к ее содержанию. Чтобы добавить всплывающую подсказку, используют параметр title тега <img>. Его значением является заключенный в кавычки текст.
<img title=" Всплывающая подсказка" />
Всплывающая подсказка
code-pattern.ru