Как сделать картинку ссылкой в html

Images in HTML

This article provides an introduction to using images in an HTML document with the <img> tag.

Introduction

In this article we will discuss one of the things that makes web design “pretty” — images. You’ll learn how to add images to web documents in an accessible way so that people with visual impairments can still use the information on your site, how and when to use inline images to deliver information, and how to use background images to improve page layout.

A picture says more than a thousand words — or does it?

It is tempting to use a lot of imagery on your web sites. Images are a great way to set the mood for the visitor, and illustrations help make complex information easier to take in for visual learners.

The drawback of images on the web is that not everybody can see them. Back in the days when images were first supported by browsers, web connections were slow, and you’d pay a lot of money for each minute you were online. Many site visitors had images turned off to save on download costs and get a faster surfing experience. While this is not very common these days, there are still other problems to consider:

• People surfing on mobile devices might still have images turned off due to small screen size or the cost of downloading data.
• Visitors to your site might be visually impaired such that they cannot see your images properly or at all.
• Other visitors might be from a different culture and not understand the icons or diagrams you use.
• Search engines only index text — they don’t analyze images, which means that information stored in images cannot be found and indexed. (At least, not yet: try searching “image indexing” or “search by image” for additional information regarding the latest on image indexing.)

It is therefore very important to choose images wisely and use them appropriately. It is even more important to always offer a fallback for users who cannot see your images. Let’s see what technologies are available to add images to an HTML document.

Content and background images

There are two main ways to add images to a document: content images using the <img> element, and background images applied to elements using CSS. Which method you use depends on your intent:

• If the image is crucial to the content of the document, such as a photo of the author or a data graph, it should be added as an <img> element with proper alternative text.
• If the image is there strictly for aesthetic purposes, you should use a CSS background image. These images should not have any alternative text (what use is the description “round green corner with a twinkle” to a blind person?) and you have more options for image styling in CSS.

The <img> element and its attributes

Adding an image to an HTML document is very easy using the <img> element: you specify the location of the image you want to display as the value of the src (source) attribute, and away you go. The following HTML document displays the photo balconyview.jpg in a browser (provided that the image is in the same folder as the HTML file).

If you run this code in a browser, you’ll get output like this:

Figure 1: The image as it is shown in a browser.

Note: The <img> element is what is known as an empty tag; that is, it does not require an end tag (like </img> ). In HTML5, it need not even be closed with an internal slash (like <img src="balconyview.jpg"/>), although many web page authors do so as a matter of consistency.

Providing a text alternative with the alt attribute

Although the image is displayed correctly, the HTML is invalid because the <img> element lacks an alt attribute. This attribute contains text to be displayed if the image is not available for some reason. The image may not be available because it could not be found, failed to load, or because the user agent (normally a browser) does not support images. In addition, people with visual impairments use assistive technologies to read web pages aloud; these technologies look for the contents of the alt attribute to describe the image. It is therefore important to write good alternative text to describe the contents of the image and put it in the image’s alt attribute for reasons of accessibility and search engine optimization.

A quick note: Many web pages — and web authors — use the term "alt tags". This is factually incorrect, as there is no tag (or element) with that name. Remember that alt is an attribute of the <img> element, not a tag.

Thus, in order to make the image understandable for everyone, you must always include proper alternative text, as in this example, "View from my balcony, showing a row of houses, trees and a castle":

Adding “nice-to-have” information using the title attribute

The alt attribute contains the text that should be displayed when the image is not available. The information in the alt attribute should not be displayed when the image is successfully loaded; Internet Explorer gets this wrong, and shows it as a tooltip when you hover your mouse pointer over the image. Unfortunately, many authors consider this the default, which leads them to put additional information about the image into the alt attribute. Please don’t do this; if you want to add extra information about the image, use the title attribute instead.

Most browsers display the value of an <img> element’s title attribute as a tooltip when you hover your mouse cursor over it (see Figure 2). This can help a visitor learn more about the image, but you cannot rely on every visitor to use a mouse. The title attribute can be very useful, but it is not a foolproof way of providing crucial information. Instead, it offers a good way to provide non-essential information, such as the mood of the image, or what it means in context:

This code will display like this:

Figure 2: title attributes are shown as tool tips in many browsers.

Using longdesc to provide an alternative for complex images

If the image is very complex, such as a chart or diagram, you can offer a more lengthy description of it using the longdesc attribute, so that people using screen readers or browsing with images turned off can still access the information conveyed by the image.

This attribute contains a URL that points to an HTML document containing the same information. For example, if you have a chart showing a set of data, you can link it to a page with the same information using <longdesc> :

The data file “fruitconsumption.html” contains a table that represents the same data as the chart:

The two different data representations side-by-side look like this:

Figure 3: A document with complex data linked to an image using the longdesc attribute.

Note that there is no visual clue that there is a long description file connected with this image. Most assistive technologies, however, will let their users know there is an alternative available. Some people think that longdesc is pointless, and that you should just provide an alternative page linked via a normal link. This may be appropriate sometimes, as it is often useful to give all users a choice of how they consume your information. There are situations, however, where you’ll want to not show the text link by default.

Faster image display by defining the dimensions using width and height

When the user agent finds an <img> element in the HTML, it starts loading the image the src attribute points to. By default, it doesn’t know the image dimensions, so it will just display all the loaded text lumped together, and then shift it around when the images finally load and appear. This can slow down page loading, and looks unsightly (to say the least) to page visitors. To prevent this, just tell the browser to allocate the right amount of space for the images before they load by providing the image dimensions using the width and height attributes:

This will display a placeholder the same size as the image until the image actually loads and takes its place, therefore avoiding the unsightly and unprofessional page shift. Always include the width and height attributes on your images.

You can also resize images using these attributes (try halving the attribute values in the above example), but this is not good practice, as image resizing quality is not smooth in all browsers. It is especially bad to resize images to represent thumbnails, because the idea of thumbnails is to not only have a smaller image in physical size, but also in file size. Nobody wants to load a 300K photo just to see a small image that could have been sent as a 5K file.

Containing images properly using HTML5 <figure>

One problem that has always existed with HTML images is the choice of what container element to put them in. After all, images are inline elements by default: they don’t force line breaks before and after themselves. This is fine for cases where you want to put a small icon next to a piece of text, but you’ll more often want an image to sit on its own line in the page. You could describe this usage as making the image into a separate figure.

In HTML4, the most common way to achieve this is to put the image inside a <p> or <div> , but neither of these is ideal — an image isn’t a paragraph, and a division is semantically ambiguous. Realizing this, the creators of HTML5 introduced a new element that solves the problem: <figure> . This element is specifically designed to contain a figure, which could be an image, two images, or a combination of several multimedia elements, text, or other content. Let’s look at an example:

Proper captions using HTML5 <figcaption>

Another new addition to HTML5 is an element for containing figure captions. Previously this was done using <p> or some other not-wholly-appropriate element, but now we have the <figcaption> element. Nested inside a <figure> , it says “this is the caption to go along with the contents of this figure.” For example:

Note that the contents of the figure caption do not necessarily act as a replacement for the contents of the alt attribute or the title attribute: it depends on whether the caption accurately describes everything in the image, or provides the same supplementary information that the title attribute does. In this case, we need an alt attribute as well, as sighted users can see what is in the image by looking at it. The alt attribute says exactly what the image contains for the benefit of users who can’t see it, while the caption gives some more context.

Background images with CSS

It is pretty safe to say that web design became a lot more fun when browsers started supporting CSS. Instead of hacking around in the HTML using table cells for positioning items on the page, non-breaking spaces ( ) to force alignment, and spacer GIFs (transparent 1×1 pixel GIF images resized to create margins), we can now use padding, margin, dimensions, and positioning in CSS and leave the HTML free to just worry about the content structure.

CSS also means you can use background images in a very versatile way — you can position them behind and around your text any way you want, and also repeat images in regular patterns to create backgrounds. Before closing, we’ll cover CSS images briefly.

How to apply backgrounds with CSS

The CSS to apply images as backgrounds is fairly straightforward. Before you look at the CSS code below, have a look at this multiple example to get an idea of the different things that are possible with background images in CSS:

Figure 4: Backgrounds with CSS.

The boxes are actually styled <h2> elements with some padding and borders applied with CSS to allow space for the background image. The CSS for the first example is:

You add the image with the background-image property and give it a URL in parentheses to specify the image to be included. By default, background images are repeated both horizontally and vertically to fill up the whole element space, as in the first example. But you can define various repetition schemes with the background-repeat property:

• Don’t repeat the image at all: background-repeat:no-repeat;
• Only repeat the image horizontally: background-repeat:repeat-x;
• Only repeat the image vertically: background-repeat:repeat-y;

By default, the background image (if not repeated) will be positioned at the top left corner of the element. You can, however, use background-position to move the background image around. The easiest values to use are top , center , and bottom for vertical alignment, and left , center , and right for horizontal alignment. For example, to position the image on the bottom right, use background-position:right bottom; , while to center the image vertically on the right use background-position:right center; .

By controlling the repetition and the position of background images and using clever images you can create stunning effects that were not possible before CSS, and by keeping the background definitions in a separate CSS file you make it very easy to change the look and feel of a whole site by changing a few lines of code.

Conclusion

HTML images are a powerful and flexible way to provide non-textual information, enhance the value of other content, and improve the visual attractiveness of your pages. Combining tried-and-true techniques with new HTML5 elements and attributes can help ensure that your web pages are useful, interesting, and accessible.

Изображения HTML, как вставить картинку

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

Пример

Пример

Пример

Синтаксис изображений в формате HTML

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

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

Атрибут src задает URL-адрес (веб-адрес) изображения:

Атрибут ALT

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

Значение атрибута alt должно описывать изображение:

Пример

Если обозреватель не может найти изображение, будет отображено значение атрибута alt :

Пример

Примечание: Атрибут alt является обязательным. Веб-страница не будет корректно проверяться без нее.

Размер изображения-ширина и высота

Для указания ширины и высоты изображения можно использовать атрибут style .

Пример

Кроме того, можно использовать атрибуты width и height :

Пример

Атрибуты width и height всегда определяют ширину и высоту изображения в пикселях.

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

Ширина и высота, или стиль?

Атрибуты width , height и style действительны в HTML5.

Однако рекомендуется использовать атрибут style . Это предотвращает изменение размера изображений в таблицах стилей:

Пример

Изображения в другой папке

Если не указано, обозреватель ожидает найти изображение в той же папке, что и веб-страница.

Тем не менее, он является общим для хранения изображений в вложенной папке. Затем необходимо включить имя папки в атрибут src :

Пример

Изображения на другом сервере

Некоторые веб-узлы хранят свои изображения на серверах образов.

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

Пример

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

Анимированные изображения

HTML позволяет анимированные GIF:

Пример

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

Чтобы использовать изображение в качестве ссылки, поместите тег <img> внутрь тега <a> :

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Плавающее изображение

Используйте свойство CSS float , чтобы изображение поплыло вправо или влево от текста:

Пример

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Совет: Чтобы узнать больше о CSS float, прочитайте наш Справочник по CSS float.

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

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

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

Пример

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

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

Фоновое изображение

Чтобы добавить фоновое изображение в элемент HTML, используйте свойство CSS background-image :

Пример

Чтобы добавить фоновое изображение на веб-страницу, укажите свойство Background-Image элементу Body:

Примере

Чтобы добавить фоновое изображение для абзаца, укажите свойство Background-Image в элементе P:

Чтобы узнать больше о фоновых изображениях, изучите наши CSS Background Справочник.

Элемент <picture>

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

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

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

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

Пример

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

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

Читатели экрана HTML

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

Справка

• Используйте элемент HTML <img> для определения изображения
• Используйте атрибут HTML src для определения URL-адреса изображения
• Используйте атрибут HTML alt для определения альтернативного текста для изображения, если он не может быть отображен
• Используйте атрибуты HTML width и height для определения размера изображения
• Используйте свойства CSS width и height для определения размера изображения (в качестве альтернативы)
• Используйте свойство CSS float , чтобы позволить изображению поплавок
• Используйте элемент HTML <map> для определения изображения-карты
• Используйте элемент HTML <area> для определения областей щелчка на карте изображения
• Используйте атрибут usemap элемента HTML <img> , чтобы указать на карту изображения
• Используйте элемент HTML <picture> для отображения различных изображений для различных устройств

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

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

В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго — до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного <img> элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя <figure> , и разберём, как это относится к фоновым изображениям CSS.

Необходимы:	Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML).
Цель:	Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.

Как разместить картинку на странице?

Чтобы разместить изображение на странице, нужно использовать тег <img> . Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента <a> .

Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адреса.

Например, если ваше изображение называется dinosaur.jpg , и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

Если изображение было в поддиректории images , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: dinosaur.jpg лучше, чем img835.png .

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

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

Предупреждение: Внимание: Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:

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

Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте src ссылку на изображение, размещённое на чужом сайте. Это называется «хотлинкинг» (с англ. ‘hotlinking’ — ‘горячая ссылка’). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

Наш код выше даст нам следующий результат:

Примечание: Такие элементы как <img> и <video> иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

Примечание: вы можете найти готовый пример этого раздела, размещённый на Github (смотрите также исходный код).

Альтернативный текст

Следующий атрибут, который мы рассмотрим — alt . Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута alt на практике, внесём изменения в код из предыдущего примера:

Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg , браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt :

Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведём несколько примеров:

• Пользователь с нарушением зрения использует устройство чтения с экрана, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте alt для описания изображения может быть полезно для большинства пользователей.
• В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).
• Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как Lynx, которые вместо изображений отображают текст из атрибута alt .
• Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута alt .
• Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.

Что именно вы должны писать в атрибут alt ? В первую очередь, это зависит от того, зачем изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:

• Декорация. Вы должны использовать Фоновые изображения CSS для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = «». Если изображение служит просто украшением и не является частью содержимого, добавьте пустой alt=»» . Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
• Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt . Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt=»» .
• Ссылка. Если вы помещаете изображение в <a> , для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a> или атрибут alt . Старайтесь выбрать лучший вариант.
• Текст. Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если действительно этого не избежать, то вам следует дополнить текст в атрибуте alt .

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

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

Ширина и высота

Вы можете использовать атрибуты width и height , чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать Cmd + I чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

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

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

Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.

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

Заголовок изображения

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

Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

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

Активное обучение: встраивание изображения

Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым <img> тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

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

Мы также хотели бы, чтобы вы:

• Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.
• Установите правильные значения width и height (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.
• Установите title для изображения.

Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку Reset. Если вы реально не будете понимать как сделать, нажмите кнопку Show solution, чтобы увидеть ответ:

Придание изображению структуры и установка заголовка

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

Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?

Лучшим решением будет использование элементов HTML5 <figure> и <figcaption> . Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

Элемент <figcaption> говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента <figure> .

Примечание: С точки зрения доступности, заголовки и alt имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как alt обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и alt не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.

Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который:

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

Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.

Активное изучение: создание <figure>

В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:

• Оберните его в <figure> элемент.
• Скопируйте текст из атрибута title , удалите атрибут title , и вбейте текст в элемент <figcaption> .

В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку Reset. Если вы застряли, нажмите кнопку Show solution, чтобы увидеть ответ:

Фоновые изображения CSS

Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS background-image и другие background-* применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!

Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.

Примечание: вы можете узнать больше о фоновых изображениях CSS в нашей теме о CSS.

Проверьте свои навыки!

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

Резюме

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

<img> HTML – Image Tag Tutorial

Kolade Chris

In HTML, you use the <img> tag to add images to websites. It is an inline and empty element, which means that it doesn’t start on a new line and doesn’t take a closing tag (unlike the paragraph ( <p> ) tag, for instance).

The <img> tag takes several attributes, of which src , height , width , and alt are the most important.

Knowing the ins and outs along with some best practices of the <img> tag is crucial because images can negatively affect your site’s load time and SEO.

So in this tutorial, we will take a look at how to add images to websites using the <img> tag, how to use its attributes, some best practices, and modern approaches to using <img> .

Basic HTML <img> Tag Syntax

Here’s the basic syntax for adding an <img> tag to your HTML:

Now let’s talk about its attributes and how they work.

HTML <img> Tag Attributes

The src Attribute

The src attribute signifies the image source. Without it, the tag itself wouldn’t be functional in the real world.

It indicates to the browser where to find the image. So it takes a relative path if the image is hosted locally, or an absolute URL if the image is hosted online.

The alt Attribute

The alt attribute specifies an alternative text for the image. This could be the text that shows during a network failure, for example. Or it could display something when the image source is wrongly specified, so users know what the image is about.

In the code snippet below, the image source is wrongly specified, showing you the role that the alt attribute plays:

This is the CSS that centers the image horizontally and vertically:

And it looks like this:

The alt attribute is very important for 2 other reasons:

• SEO: it indicates to web crawlers what the image is about
• Accessibility: it helps screen readers know what the image is about so they can report that to visually impaired people. In addition, it lets users with low bandwidth know what the image is about.

The width and height Attributes

You can use these attributes to specify a certain width and height for your images. With these attributes, you can resize the image down or up.

Ideally, though, you shouldn’t resize an image with these attributes. We’ll touch on this more under best practices.

HTML <img> Tag Best Practices

Do not resize an image with the width and height attributes.

This is a bad practice because it can make the image appear distorted and can affect the quality.

Instead, you can optimize the image to your desired dimensions with photo editing software such as Photoshop.

In the code snippet below, I specify a width and height for the image – a bad practice:

The image looks like this:

Without using the width and height attributes, the image looks like this:

Looks better? Yes!

Name Your Images Appropriately

Naming images appropriately can help search engines understand what the image is about. For example, name an image ring-tailed-lemurs.webp instead of photo-1580855733764-084b90737008.webp . The latter is not enough for search engine optimization (SEO).

Reduce Image File Size

The image’s file size is crucial when it comes to page speed. A smaller image size (that preserves the image’s quality) reduces load time while larger images take forever to load.

There are several tools and various software that can help you do this. Some examples are imageOptim, jStrip, and PNGGauntet. And if you’re concerned about SEO, you’ll want to look into these – as page speed is an important ranking factor.

Host Images with a CDN

Imagine if a website is hosted in the United States but a user in Africa wants to accessed it. Assets such as images and icons would have to travel from The States to Africa, which in turn slows download time.

Using a CDN (Content Delivery Network) will allow the website’s images to be cached across several locations around the world. The CDN can then serve them from locations closest to the user, improving load time and providing a better user experience.

Cloudflare is a popular CDN that a lot of developers use to host their images.

Use Descriptive Alternative Text

Using descriptive alternative text helps search engines understand what the image is about. But it doesn’t end there – the alt text must also be relevant to the image.

For example, use this:

Use the title Attribute to Show Tooltips

Just like the alt attribute, you can use the title attribute to show additional information about the image. Browsers display this as a tooltip when the user hovers over the image.

<img> Tag Modern Approaches

There are various ways you can use the <img> tag that are a bit more up to date and modern. Let’s look at some of them now.

Lazy Load Images

Lazy loading is a newish «load what is needed» concept. With lazy loading, the image is loaded only when the user scrolls to its viewport.

This is in contrast to eager loading, which loads every image immediately after the page is rendered by the browser.

To apply lazy loading, add the loading attribute to the <img> tag and set the value to “lazy”.

Images are often quite high quality and large these days, but this can negatively impact user experience and SEO – hence the introduction of lazy loading.

Use the <figure> and <figcaption> Tags

Often, you might need to specify to the user the caption of an image. A lot of developers do this by placing a <p> tag right after the <img> .

This might not be wrong, but it defies best practices and does not associate the caption with the image, so search engines won’t understand what it is.

Its is clear that there is no association between the image and the caption in the above example.

HTML5 introduced the <figure> and <figcaption> elements to help with this. You wrap the <img> tag inside a <figure> element, and you specify a caption within the <figcaption> element.

This helps search engines associate the caption with the image, leading to better performance and SEO.

The snippets of code below and the screenshots show you an image with and without the <figure> and <figcaption> elements:

You can see now that the image and the caption are beautifully associated.

Use the .webP Image Format

.webP is an image format created by Google. According to the creator, it’s an image format lower in size than its counterparts — JPG, JPEG, PNG, but with the same quality.

This format has been getting more and more widely accepted and is considered the nextgen image format for the web.

Conclusion

I hope this article helps you understand how the <img> tag works in HTML so you can use it properly in your projects. If you do so, it’ll help improve your user experience and SEO.