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

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

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

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

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

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

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

<img src="dinosaur.jpg">

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

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

И так далее.

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

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

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

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

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

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

Нарушение авторских прав является не законным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража чей-то пропускной способности не законно. Кроме того, это замедляет вашу страницу, оставляя вас без контроля над изображением; было ли оно удалено или случайно перемещено.

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

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. Предполагается, что значением атрибута является текстовое описание изображения; данный атрибут используется в ситуациях, когда изображение скрыто или его не удается отобразить. Чтобы продемонстрировать использование атрибута 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.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведем несколько примеров:

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

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

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

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

Примечание: Более подробную информацию, смотрите здесь 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">

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

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

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

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

Примечание: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать 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

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

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

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

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

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

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

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

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

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

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

<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>

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

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

<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>

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

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

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

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

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

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

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

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

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

CSS background-images

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

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

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

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

Замечание: Вы можете узнать больше о CSS background images в нашей теме о CSS.

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