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

Размещение: изображения в HTML на странице

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

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

< img src=»dinosaur.jpg»>

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

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

И так далее.

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

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

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

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

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

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

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

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

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

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

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

<img src="images/dinosaur.jpg"
     alt="Голова и туловище скелета динозавра;
         у него большая голова с длинными острыми зубами">

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

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

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

Что же писать в атрибут alt?

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

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

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

Чтобы указать ширину и высоту вашего изображения, необходимо использовать атрибуты 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">

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

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

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

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

Изображения в HTML: заголовок

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

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

Проверить знания, на тему изображения в HTML, вы можете пройдя тест сверху. Если хотите узнать больше про создание сайтов приглашаем на курс программирование HTML\CSS. Мы находимся на м. Академгородок, м. Житомирская, также у нас есть онлайн формат обучения.