Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Getting started with HTML.)
Objective: To learn how to embed simple images in HTML, annotate them with captions, and how HTML images relate to CSS background images.

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

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

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

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

<img src="dinosaur.jpg">

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

<img src="images/dinosaur.jpg">

И так далее.

Примечание: Search engines also read image filenames and count them towards SEO. Therefore, give your image a descriptive filename; dinosaur.jpg is better than img835.png.

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

<img src="https://www.example.com/images/dinosaur.jpg">

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

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

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

Нарушение авторских прав является не закооным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенную на чужом сайте. This is called "hotlinking". Again, stealing someone's bandwidth is illegal. It also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing.

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

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

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

Примечание: Вы можете найти готовый пример здесь running on Github (see the source code too.)

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

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

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

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

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

So, why would you ever see or need alt text? It can come in handy for a number of reasons:

  • The user is visually impaired, and using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users.
  • As described above, you might have spelt the file or path name wrong.
  • The browser doesn't support the image type. Some people still use text-only browsers, such as Lynx, which alternatively displays the alt text of images.
  • You may want to provide text for search engines to utilize. For example, search engines can match alt text with search queries.
  • Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones, and in countries where bandwidth is limited and expensive.

What exactly should you write inside your alt attribute? It depends on why the image is there in the first place. In other words, what you lose if your image doesn't show up:

  • Decoration. If the image is just decoration and isn't part of the content, add a blank alt="". For example, a screen reader doesn't waste time reading out content that is no core need to the user. Decorative images don't really belong in your HTML. CSS background images should be used for inserting decoration, but if it is unavoidable, alt="" is the best way to go.
  • Content. If your image provides significant information, provide the same information in a brief alt text. Or even better, in the main text which everybody can see. Don't write redundant alt text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use alt="".
  • Link. If you put an image inside <a> tags, to turn an image into a link, you still must provide accessible link text. In such cases you may, either, write it inside the same <a> element, or inside the image's alt attribute. Whatever works best in your case.
  • Text. You should not put your text into images. If your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image. However, If you really can't avoid doing this, you should supply the text inside the alt attribute.

Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realise how unhelpful alt text is if the image cannot be seen, such as "logo" or "my favourite place".

Примечание: Более подробную информацию, смотрите здесь Text Alternatives.

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

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

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy,fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor, to put your image at the correct size, before putting it on your webpage.

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

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

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

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

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

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

Нет необходимости писать заголовки изображений. It is often better to include such supporting information in the main article text, rather than attached to the image. However, they are useful in some circumstances; for example, in an image gallery when you have no space for captions.

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

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic <img> tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

We would also like you to:

  • Add some alt text, and check that it works by misspelling the image URL.
  • Set the image's correct width and height (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.
  • Set a title on the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Annotating images with figures and figure captions

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you doing this:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML5 <figure> and <figcaption> elements. These are created for exactly this purpose: to provide a semantic container for figures, and clearly linking the figure to the caption. Our above example, could be rewritten like this:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

The <figcaption> element tells browsers, and assistive technology, that the caption describes the other content of the <figure> element.

Note: From an accessibility viewpoint, captions and alt text have distinct roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn't have to be an image. It is an independent unit of content that:

  • Expresses your meaning in a compact, easy-to-grasp way.
  • Could go in several places in the page's linear flow.
  • Provides essential information supporting the main text.

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

Active learning: creating a figure

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

  • Wrap it in a <figure> element.
  • Copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

CSS background images

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS background-image property, and the other background-* properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:

p {
  background-image: url("images/dinosaur.jpg");
}

The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!

Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Note: You'll learn a lot more about CSS background images in our CSS topic.

That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages.

Метки документа и участники

Внесли вклад в эту страницу: AliyevHrn, sowdfr, tav1313
Обновлялась последний раз: AliyevHrn,