Содержание

HTML-изображения

Опубликовано: 30 июля 2014 Обновлено: 15 августа 2019

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

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

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

1. Тег <img>

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

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

<img src="image.png" alt="Пример кода">

Для тега <img> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <img>
Атрибут Описание, принимаемое значение
alt Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения".
crossorigin Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".
height Атрибут height задает высоту изображения в px.
Синтаксис: height="300".
ismap Атрибутismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента
<a>
с действительным атрибутом href.
Синтаксис: ismap.
longdesc URL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".
src Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".
sizes Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.
srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута
src
. Значением атрибута является одна или несколько строк, разделенных запятой.
<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
 
  alt="Роза в моём саду">
usemap Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>
.
Синтаксис: usemap="#mymap".
width Атрибут width задает ширину изображения в px.
Синтаксис: width="500".
1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

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

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

1.3. Форматы графических файлов

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

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

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

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

Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте

usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Тег <area>

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

<map name="имя_карты">
<area атрибуты>
</map>
Таблица 2. Атрибуты тега <area>
Атрибут Краткое описание
alt Задает альтернативный текст для активной области карты.
coords
Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
shape Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
target Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

image-mapРис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

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

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>
flowers_fotoРис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

html5book.ru

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
lowsrc
Адрес изображения низкого качества.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 

  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>

htmlbook.ru

Изображения в html

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!


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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

  • были информативными
  • соответствовали цветовой гамме вашего сайта
  • были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус — список нескольких фотобанков, где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂

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

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format — формат для обмена изображениями)

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


jpeg, он же jpg (Joint Photographic Experts Group — Объединенная группа экспертов по фотографии — так называется организация-разработчик)

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


png (Portable Network Graphics — Портативная сетевая графика. Произносится так же как ping, т.е. [pɪŋ])

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало «весит» и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8, как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном, причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif — для анимации

jpeg — для фотографий

png — для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

Для добавления картинки на страницу используется тег <img> (от англ. image — изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.

Атрибут src (от англ. source — источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере — используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье «Ссылки».

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

 

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

<img src=»путь к файлу»>

<img src=»путь к файлу»>

Атрибут alt (от англ. alternative — альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет — причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.

Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты <alt> будут заполнены, да еще и содержать по возможности ключевые слова — видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у «живого» сайта он должен быть заполнен. Пока сайт лежит у нас на диске — его вполне можно оставить пустым.

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

Высота и ширина изображений

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

В HTML5 это рекомендуется делать с помощью CSS или атрибута style, вот так:

В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов, как единицы измерения.

Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg»

alt=»панда на дереве»>

Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.

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

Попробуйте запустить такой код и посмотрите на результат:

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg»

alt=»панда на дереве»>

 

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

Немножко нафталина

Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height. Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.

В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней — как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая — файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.

Разница в результате на лицо 🙂

Также в старых версиях html использовались такие атрибуты:

align, с помощью которого выравнивалось изображение по горизонтали или вертикали.

hspace — отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)

vspace — отступ сверху и снизу от картинки до контента вокруг.

border — задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)

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

Размещение картинки в коде

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

Пример №1 — перед параграфом:

Такие элементы как <p> и <h2> относятся к блочным элементам. Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить <img>, а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.

Пример №2 — в начале параграфа

<img> это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код <img> прописан внутри <p>

Подписи к иллюстрациям

Чтобы пометить или подписать фото на странице используется тег <figure> (от английского figure — рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.

Тег <figcaption> (заголовок рисунка) позволяет добавить подпись к изображению. Вот как это работает:

Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега <figure>, в частности слева и справа есть отступы по 40 px. 


 

Итак, мы с вами научились

  • добавлять изображение на страницу: с помощью тега <img>
  • узнали обязательные атрибуты для этого тега: src для указания пути и alt для описания картинки
  • поняли какой формат лучше для чего использовать: jpeg для фотографий, png для логотипов и скриншотов, gif для анимации
  • как лучше задать картинке размеры: с помощью атрибута style с параметрами width и height
  • разобрались как будет отображаться картинка в зависимости от места в коде: отдельно, если перед блочным элементом и с обтеканием, если внутри блочного элемента (например <p>)

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

Значит, пришло время бонуса 🙂

 

Список бесплатных фотобанков 

Прежде, чем начнём, обратите внимание, что каждый скриншот здесь — это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье «Ссылки».

pixabay.com

На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.

 

 

freeimages.com

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

 

 

morguefile.com

У фотостока morguefile более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.

 

 

 

unsplash.com

На unsplash множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.

 

 

 

designerspics.com

Сайт designerspics создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск — только на английском.

 


vertex-academy.com

Тег HTML картинка, изображение

Тег <img> используется для вставки графического изображения (картинки) в HTML документ.

HTML тег <img> имеет два обязательных атрибута: src — адрес файла картинки и alt — альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.

Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).

Синтаксис

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

Отображение в браузере

Эйфелева башня

Пример использования <img> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
    <img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня">

<!-- картинка-ссылка -->
<a href="page.html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>

Поддержка браузерами

Атрибуты

Атрибут Значение Описание
alt текст

Альтернативный текст, который будет выведен, если картинка не будет загружена.

height пиксели

Высота изображения.

ismap

ismap
пусто

Логический атрибут. Указывает, что картинка является серверной (server-side) картой-изображением.

longdesc URL

URL файла, где содержится детальное описание картинки.

src URL

Указывает URL файла картинки.

usemap id_map_элемента

Указывает, что картинка является клиентской (client-side) картой-изображением.

width пиксели

Ширина изображения.

Устаревшие атрибуты

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

Атрибут Значение Описание
align top
bottom
middle
left
right

Правило выравнивания картинки.

border пиксели

Ширина границ картинки.

hspace пиксели

Ширина горизонтальных отступов (пустое место слева и справа от картинки).

vspace пиксели

Ширина вертикальных отступов (пустое место сверху и снизу от картинки).

guruweba.com

Тег | HTML справочник

HTML теги

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
right
top
bottom
middle
Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами.
alttextОпределяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
borderpixelsНе поддерживается в HTML5.
Определяет ширину границы вокруг изображения.
crossoriginanonymous
use-credentials
Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается.
У этого атрибута есть 2 допустимых значения:
anonymous
В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается.
use-credentials
Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается.
Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
heightpixelsОпределяет высоту изображения.
hspacepixelsНе поддерживается в HTML5.
Определяет пробелы слева и справа от изображения.
ismapismapСообщает браузеру, что изображение является серверной картой-изображением.
longdescURLОпределяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
srcURLЗадает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap#mapnameСсылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspacepixelsНе поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения.
widthpixelsОпределяет ширину изображения.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <img></title>
	</head>
	<body>
		<img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси">
	</body>
</html>

Результат добавления изображения, с помощью тега <img> на HTML страницу:

Пример использование тега <img> в HTML документе.

Изображение как ссылка

Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования изображения в качестве ссылки</title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src = "10.jpg" alt = "Поиск в Яндекс">
		</a>
	</body>
</html>

При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.

Значение CSS по умолчанию

img {
display: inline-block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

basicweb.ru

Добавление рисунка | htmlbook.ru

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

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

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

  • Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
  • Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
  • Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 10.1. Пример размещения файлов

  • Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.

Рис. 10.2. Пример размещения файлов

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

Пример 10.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="http://webimg.ru/themes/cloverfield/images/ref_collage.gif" 
        alt="Это абсолютный адрес размещения изображения"></p>
  <p><img src="/example/images/home.png" 
        alt="Адрес размещения изображения относительно корня сайта"></p>
  <p><img src="images/home.png" 
        alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
 </body>
</html>

Как правило, в качестве формата графического файла выступает GIF и JPEG.

htmlbook.ru

HTML: Картинки, форматы изображений

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

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

Как работают цифровые изображения

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

картинка, состоящая из пискселей

Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет его загрузку. Сжатия файла можно добиться двумя способами: уменьшением количества цветов или уменьшением размера. Цель сжатия изображений — добиться наименьшего веса файла без особого ущерба для качества.

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

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

С этой темой смотрят:

puzzleweb.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *