Изображения

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

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

src

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

<img src="/images.png">

alt

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

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

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

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

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

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

<img src="https://example.com/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

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

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