Изображения

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

Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в папку сайта или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег img, у которого два обязательных атрибута: src и alt.

src

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

<img src="/images.png">

alt

Что делать, если наша картинка в данный момент недоступна? Браузеры тогда показывают маленькую картинку, обозначающую, что изображение недоступно.

Как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и стоит через некоторое время вернуться к статье?

Для решения этой проблемы используется атрибут alt, в котором указывается текст. Он отобразится при невозможности загрузить изображение.

<img src="/images.png" alt="Аналитика компании за 2007 год">

Теперь пользователь при наличии проблемы с изображением увидит, «что в нём было»

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

<img src="/images.png" alt="Аналитика компании за 2007 год" width="320" height="240">

Теперь картинка будет отображена в размере 320x240 пикселей.

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

Задание

Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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