Как вставить картинку в html: подробная инструкция

Пример карты изображения

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

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

<img src="map.jpg" alt="Простейшая карта" usemap="#social">

2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

3. Начинаем создавать карту: открываем теги прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

<map name="social">

4. С помощью тегов area определяем активные области:

<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">

5. Закрываем карту:

</map>

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

<!DOCTYPE html>
<html>
<head>
    <title>Навигационная карта</title>
</head>
<body>
<img src="map.jpg" alt="Простейшая карта" usemap="#social">
<map name="social">
<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">
</body>
</html>

Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше — дело техники и определения координат, с точки зрения HTML ничего не усложняется.

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Как вставить картинку в HTML: РАЗМЕРЫ ИЗОБРАЖЕНИЯ

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

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

При создании изображений для сайта очень важно понимать то, как можно изменять их размеры. Давайте представим, что вы создали веб-страницу, на которой нужно разместить изображение шириной 300 и высотой 150 пикселов

УМЕНЬШЕНИЕ РАЗМЕРА ИЗОБРАЖЕНИЯ

Вы можете уменьшить размер исходного изображения для создания его миниатюры.

Пример. Если ширина вашего изображения 600 пикселов, а высота — 300, то вы можете уменьшить размер изображения на 50%.

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

УВЕЛИЧЕНИЕ РАЗМЕРА ИЗОБРАЖЕНИЯ

Значительное увеличение размера фотографии без потери качества рисунка невозможно.

Пример. Увеличение размеров изображения 100 пикселов в ширину и 50 в высоту на 300% приведет к ухудшению его качества.

Результат. Изображение станет размытым или пикселизированным.

КАДРИРОВАНИЕ ИЗОБРАЖЕНИЯ

Не все изображения можно кадрировать без потери важной графической информации. Пример

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

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

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

Элемент

В HTML 5 добавился новый элемент с названием
<picture> для большей гибкости при указании ресурсов для изображений.

Элемент
<picture> содержит внутри себя несколько элементов
<source> , каждый из которых ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое наилучшим образом соответствует текущему виду и / или устройству.

Каждый элемент
<source> имеет атрибуты, описывающие, когда их изображение является наиболее подходящим.

Браузер будет использовать первый элемент
<source> с соответствующими значениями атрибутов и игнорировать следующие элементы
<source> .

Пример ниже все наглядно показывает. В первом случае, если окно браузера имеет размеры минимум в 650px покажется одно изображение, а в другом случае если больше, чем 465 пикселей, то будет уже другая картинка.

1
2
3
4
5

</picture>

По умолчанию у нас отображается обычная картинка в теге img

А теперь начнем уменьшать наш размер экрана до планшетного состояния и получим первую картинку:

Затем продолжаем уменьшать размер экрана до мобильного формата и уже получаем другое изображение:

Создание внешних отступов у изображений

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

Так вот, в старом HTML у тега были два атрибута, hspace и vspace, которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать. Поэтому вновь применяем атрибут style, общий синтаксис такой:

style=»margin:размер» — Устанавливает одинаковый размер полей для всех сторон изображения.

style=»margin:сверху справа снизу слева» — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.

В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.

Пример изменения полей вокруг изображений

Результат в браузере

Текст перед картинкой. После картинки.

Элемент

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

Элемент содержит ряд элементов <source>, каждый из которых ссылается на различные источники изображения. Таким образом, обозреватель может выбрать изображение, которое наилучшим образом соответствует текущему виду и/или устройству.

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

Обозреватель будет использовать первый элемент с совпадающими значениями атрибутов и игнорировать любые следующие элементы .

Пример

Показать одно изображение, если окно обозревателя (видовой экран) не менее 650 пикселей, а другое изображение, если нет, но больше, чем 465 пикселей.

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

ВЕКТОРНАЯ ГРАФИКА

Векторные изображения отличаются от растровых и не зависят от разрешения. Создавать векторные изображения можно в таких программах, как Adobe lllustrator.

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

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

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

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

Формат SVG* относительно новый. Он используется для непосредственного отображения векторной графики на сайтах (без необходимости создания растровых копий), однако еще не получил широкого распространения.

Подпись к рисунку в HTML

Чтобы сделать подпись к рисунку, можно просто вывести нужный текст под рисунком. Например, так:

<p>
<center>
<img src="images-in-html.jpg" width="200">
<br>
<i>Подпись к рисунку</i>
</center>
</p>

Чтобы подпись как-то отличалась от остального текста, можно выделить её,
например, курсивом и/или другим шрифтом.

Также у тега <img> есть два атрибута, которые так или иначе являются подписями.

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

И атрибут . Значение этого атрибута (текст) отображается в браузере в виде подсказки, когда пользователь наводит мышь на рисунок. Пример:

<img src="images-in-html.jpg" 
     alt="Если рисунок не загрузится" 
     title="Если навести мышь на рисунок">

Графические карты

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

На картинке ниже, нажмите на компьютер, Телефон, или чашку кофе:

Пример

Атрибут тега связан с атрибутом usemap и создает связь между изображением и картой.

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

Как сделать ссылку

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

здесь название, кот. будет видно

Вот пример ссылки на мой сайт :

Блокнот Сайтостроителя

Чтобы сделать ссылку, открывающуюся в другом окне браузера, нужно в дополнение к основной конструкции добавить атрибут target=»_blank»,который как бы говорит нашему браузеру открывать ссылку в новом окне, вот пример:

здесь название

(ссылка открывает страницу в другом окне браузера).

Также к ссылке можно добавить описание, которое появляется при наведении курсора на ссылку. Вывод описания осуществляется тайтлом title=»тут описание»

здесь название

Атрибут title=»» можно применять как к ссылке, так и к картинке.

— Если навести курсор на эту ссылку, то можно увидеть результат.

Украшаем ссылки

Чтобы сделать ссылку закрытой от индексации в Google, нужно добавить атрибут rel=»nofollow»,

здесь название

К ссылкам применяются различные атрибуты, классы, id, для этого существует много справочной литературы.

Атрибут «alt».

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

	Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt=»». Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке.

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

Img и атрибут Src

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

Файлы, относительные и абсолютные пути

Мы уже видели, как вставить логотип, когда файл изображения находится в той же папке, что и файл HTML:

<img src="logo_html.png">

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

<img src="../logo_html.png">
<img src="https://gospodaretsva.com/uploads/2019/10/logo.gif ">

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

С помощью атрибута src мы можем загружать различные типы изображений, как растровые, так и векторные. Вот самые важные форматы:

Как вставить картинку в HTML: ВЫБОР ИЗОБРАЖЕНИИ ДЛЯ САЙТА

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

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

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

ИЗОБРАЖЕНИЯ ДОЛЖНЫ:

быть к месту;
нести информацию;
создавать правильное настроение;
быть легкоузнаваемыми;
соответствовать цветовой палитре сайта.

Атрибут картинки ALT у изображений

ALT — это альтернативный текст к нашим изображениям или проще говоря, мы описываем нашу графику с помощью текста, благодаря этому атрибуту

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

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

1	<img src=»img_chania.jpg»alt=»Цветы в Ханье»>

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

1	<img src=»wrongname.gif»alt=»Цветы в Ханье»>

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

1	<img src=»img_girl.jpg»alt=»Девочка в жакете»width=»500″height=»600″>

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

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

1.6. Оптимизация изображений

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

Squoosh для оптимизации растровой графики
SVGOMG для оптимизации векторной графики

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

Оптимизация изображения делается один раз.
Экспортированное из макета изображение оптимизируется и только после этого
добавляется в проект.

Изображения, хранящиеся в других директориях/папках

Если путь не задан, то браузер будет искать наше изображение в той же папке, где находится наш веб документ. Однако принято хранить все картинки и медиафайлы в специальной папке с названием или images или img.

Чтобы браузер правильно и корректно отобразил вашу картинку до нее нужно указать правильный путь (т.е src).

1	<img src=»/images/html5.gif»alt=»HTML5 Иконка»style=»width:128px;height:128px;»>

Немного проясню. В примере выше наше изображение находится относительно папки с названием images.

Справка

Используйте элемент HTML для определения изображения
Используйте атрибут HTML для определения URL-адреса изображения
Используйте атрибут HTML для определения альтернативного текста для изображения, если он не может быть отображен
Используйте атрибуты HTML и для определения размера изображения
Используйте свойства CSS и для определения размера изображения (в качестве альтернативы)
Используйте свойство CSS , чтобы позволить изображению поплавок
Используйте элемент HTML для определения изображения-карты
Используйте элемент HTML для определения областей щелчка на карте изображения
Используйте атрибут элемента HTML , чтобы указать на карту изображения
Используйте элемент HTML для отображения различных изображений для различных устройств

Примечание: Загрузка изображений занимает время. Большие изображения могут замедлить вашу страницу. Используйте изображения тщательно.

Навигационная карта

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

Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:

<map> — контейнер, внутри которого описывается карта изображения.
<area> — тег внутри <map>, описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов <area> и придётся поставить. Связка <map>-<area> работает точно так же, как связки <ol>-<li> и <ul>-<li>, создающие списки.
shape — атрибут тега <area>, задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
cords — определяющий координаты области атрибут. Также принадлежит тегу <area>. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника — координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
usemap — атрибут тега img, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере <map> описана карта именно этого рисунка.

Задаем размеры изображению

Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height. Вы можете использовать их, чтобы указать размеры изображения:

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

На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт…

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <a>. Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.

В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:

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

Укажите в каждой ссылке, на своей веб-странице, значение _window вместо _blank и все документы, к которым будет осуществляться переход по ссылкам, будут открываться в том же самом втором окне, а ваш сайт остается открытым в исходном окне.

Атрибут target может принимать следующие значения:

Значение	Описание
_blank	Открыть страницу в новом окне или вкладке.
_self	Открыть страницу в том же окне (это значение задается по умолчанию).
_parent	Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self.
_top	Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self.
framename	Открыть страницу в новом окне с именем framename.

1.4. Абсолютные и относительные пути

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

1.4.1. Абсолютный путь

Указывает точное местоположение файла в структуре папок на сервере. Абсолютный
путь позволяет получить доступ к файлу со сторонних ресурсов.

Абсолютные адреса состоят минимум из трёх частей: протокол, имя сервера и путь к
файлу.

— протокол.
— имя сервера.
— путь к файлу изображения, где
«photos» и «583842» имена папок. Папка «583842» вложена в «photos».

Например, при клике на
ссылку с таким адресом,
в браузере откроется вкладка с изображением, которое лежит где-то на сервере в
интернете.

1.4.2. Относительный путь

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

Возьмём стандартную структуру файлов и папок проекта.

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

Символ обозначает переход на один уровень ниже. Такой путь браузер буквально
понимает как: «В папке , на одном уровне с текущим файлом ,
взять файл ».

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

Последовательность символов обозначает переход на одну папку (уровень)
выше. Такой путь браузер буквально понимает как: «Перейти на одну папку выше
(назад), зайти в папку и взять в ней файл ».

ИНСТРУМЕНТЫ ДЛЯ РЕДАКТИРОВАНИЯ И СОХРАНЕНИЯ ИЗОБРАЖЕНИИ

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

Среди профессиональных веб-дизайнеров самым популярным инструментом является программа Adobe Photoshop. (На самом деле профессионалы зачастую используют его для разработки графики всего сайта.) Полная версия программы Photoshop весьма дорогостоящая, однако также доступна более дешевая версия этой программы — Photoshop Elements, которая придется по вкусу большинству новичков.

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

Используйте формат GIF или PNG при сохранении изображений с малым количеством оттенков или имеющих большие однотонные области

Тег

Для вставки изображений на веб-страницу используется одиночный тег (сокр. от англ. image — «образ», «изображение»). Закрывающий тег у данного элемента отсутствует.

Пример использования тега:

<!DOCTYPE html>
<html>
   <head>
      <title>Example</title>
      <style>
         .aligncenter {text-align: center;}
      </style>
   </head>
   <body>
      <h1>Lorem ipsum dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
         sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
         aliguam erat volutpat.</p>
      <p class="aligncenter">
         <img src="images/figure_1.gif" alt="Горный пейзаж">
      </p>
      <p>Duis te feugifacilisi. Duis autem dolor in hendrerit
         in vulputate velit esse molestie consequat, vel illum dolore.</p>
   </body>
</html>

Результат в браузере:

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

Как элемент фразового контента, тег может размещаться и непосредственно в текстовой строке, например:

<p>Начало строки <img src="images/smiley.gif" alt="Смайлик">
   продолжение строки.</p>

Результат в браузере:

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

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

<img src="images/smiley.gif" alt="" style="vertical-align: middle; margin: 0">

Результат будет следующим:

Как добавить картинку через CSS и сделать её ссылкой?

Делаем картинку, добавленную через CSS, ссылкой

В данной статье мы рассмотрим то, каким образом можно добавить в дизайн своего сайта картинку средствами CSS и сделать картинку кликабельной, то есть поставить на нее ссылку. Для начала я хотел бы Вам показать как легко и просто можно добавить картинку и сделать её ссылкой. Для этого мы используем средства HTML:

Как видите, тут мы даже не задействуем CSS. Здесь представлен чистый HTML. Добавление картинки средствами CSS может быть актуальным, например, при использовании CSS спрайтов на Вашем сайте. Про CSS спрайты я напишу чуть позже. А теперь мы перейдем непосредственно к нашей теме.

Как средствами CSS добавить картинку в дизайн сайта?

.logo {top:0;display:block;text-align: left;float: left;margin-right: 48px;width: 114px;height: 59px;background: url(/img/logo.png) no-repeat;

Здесь представлен стандартный класс CSS для определенного элемента. В нашем случае данный класс определяет расположение логотипа сайта. Я не буду глубоко впадать в знакомство с CSS, по нескольким причинам:

Я не больно хорошо знаю CSS.
Редактирование файлов CSS достаточно не сложное занятие, так как все поля достаточно красноречиво говорят о своей функциональности.
Эта статья не предназначена для верстальщиков(тем более это они знают на зубок). Статья представлена для владельцев сайтов, которые используют общедоступные CMS и иногда влезают в него для внесения несущественных изменений, а про редактирование файлов CSS можете почитать во 2-ом пункте.

Надеюсь представленный мною вариант довольно отчетливо даёт понять как необходимо добавлять картинку в дизайн сайта. Уточню только пару моментов:

Как сделать изображение ссылкой?

Мы напрямую подошли к главному моменту данной темы. Теперь у нас уже есть необходимый нам css класс, в котором загружается необходимое нам изображение. К сожалению средствами CSS нельзя добавить ссылку для изображения, это прерогатива HTML. А это значит что в коде страницы мы должны добавить следующий код:

Что тут нужно отметить несколько моментов:

Мы в блоке div подключаем CSS класс, в котором указано месторасположение картинки и сама картинка.
Далее идет стандартная ссылка:
<a href=»ссылка»>Анкор ссылки</a>
Как Вы можете заметить, у нас нет анкора ссылки. Анкор ссылки — это текст, под которой скрыта ссылка. Его отсутствие это нормально.
И самый важный момент состоит в добавлении необходимого стиля для ссылки, чтобы для перехода по ссылке можно было бы нажать на всю ширину картинки.

Вот такими несложными действиями можно добавить картинку средствами CSS, а потом навесить на неё ссылку, уже средствами HTML.

Image Maps или карта изображения

Есть такой тег в html и называется он
<map> . Его миссия в интернете, а конкретно для картинок — выделить нужную область изображения по координатам. Карта изображения — это некоторая выделенная интерактивная область. В примере ниже мы выделили область компьютера, чашки с кофе и телефоном:

1
2
3
4
5
6
7

</map>

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

Атрибут name тега
<map> связан с атрибутом usemap
<img> и создает связь между изображением и картой. Внутри него содержится несколько тегов
area , которые определяют области, на которые можно навести курсом мышки и покликать.