Изображения на странице HTML играют ключевую роль. В зависимости от случая можно использовать несколько графических форматов и множество программ обработки графики : диаграммы и графики, фотографии, значки и элементы макета.
HTML-тег <img>
Тег <img> является основным элементом для вставки изображения в HTML-страницу. Минимальный синтаксис выглядит следующим образом:
<img src="https://gospodaretsva.com/Image.png" alt="изображение">
Сначала отметим, что тег <img>— это тег без содержимого, поэтому у него нет закрывающего элемента </ img> . Давайте рассмотрим значение ключевых слов и основных атрибутов:
| ключевое слово | описание |
|---|---|
| IMG | Имя тега, сокращение от image (image) |
| src | Это означает источник , это адрес (URL) файла, который мы хотим показать |
| alt | Это альтернативный текст , который появляется, если по какой-то причине клиент не показывает изображение. Мы также можем опустить этот атрибут, но он полезен для доступности и для поисковых систем |
Благодаря тегу img мы можем вставить на страницу фотографию или рисунок. Это элемент встроенного типа , когда мы вставляем изображение в текст, браузер обычно показывает его в полном разрешении и рассматривает его в соответствии с текстом или как часть самого текста.
Чтобы отделить изображение от текста, мы можем различать строки, вводя наш текст в разные абзацы, как мы видим в следующем примере.
<p>Привет.</p> <img src="logo_html.png"> <p>это логотип</p>
Есть много других способов настроить отображение изображений с помощью CSS, как мы увидим позже.
Img и атрибут Src
Как мы уже говорили, в атрибуте src указываем источник изображения. Обычно мы вставляем URL или путь, указывающий на файл.
Файлы, относительные и абсолютные пути
Мы уже видели, как вставить логотип, когда файл изображения находится в той же папке, что и файл HTML:
<img src="logo_html.png">
Обсуждение относительных и абсолютных путей для ссылок остается в силе. Поэтому можно будет ссылаться на файлы, расположенные в разных папках или сайтах следующим образом:
<img src="../logo_html.png"> <img src="https://gospodaretsva.com/uploads/2019/10/logo.gif ">
Форматы изображений
С помощью атрибута src мы можем загружать различные типы изображений, как растровые, так и векторные. Вот самые важные форматы:
| формат | описание |
|---|---|
| JPG | (или JPEG) Это наиболее используемый формат для фотографий, разработанный Объединенной группой экспертов по фотографии (отсюда аббревиатура), чтобы уменьшить пространство, занимаемое сложными и большими растровыми изображениями. Алгоритм относится к типу с потерями , то есть к «потере информации»: для получения легких файлов в килобайтах берутся образцы и отбрасывают качество изображения. Используя JPG, вы всегда ищите хороший компромисс между весом и качеством изображения. |
| GIF | ( Формат обмена графическими данными ): изображения GIF имеют палитру, которая не превышает 256 цветов. Вы можете оптимизировать вес файла этого типа, уменьшив количество цветов. GIF также позволяет вам устанавливать прозрачные пленки, которые в прошлом делали этот формат пригодным для создания небольших элементов макета. Сегодня одним из наиболее распространенных приложений этого формата является представление небольших видео ( анимированных GIF-файлов ) для использования в качестве анимированных обоев или для распространения в социальных сетях. |
| PNG | ( Portable Network Graphic ). PNG — это тип изображения, представленный совсем недавно, разработанный W3C для решения проблем авторского права в формате GIF (который является собственностью); однако сегодня PNG теперь читается всеми браузерами и предлагает некоторые функции, которых нет в других форматах (например, поддержка альфа-канала , функция, которая еще не полностью поддерживается ни одним браузером). PNG позволяет как отображать изображения фотографического качества ( PNG24 ), так и оптимизировать цвета аналогично GIF ( PNG8 — 256 цветов). |
HTML <img> и атрибут Alt
Атрибут Alt полезно указать альтернативный текст ( альтернативный текст ), этот текст не отображается , за исключением некоторых случаев:
- Когда изображение не может быть загружено;
- Иногда во время загрузки изображения;
- В текстовых браузерах (таких как lynx ), которые не показывают изображения;
- В устройствах для слабовидящих (скрин-ридер).
Слабовидящие и слепые фактически могут понять содержание изображений благодаря специальному программному обеспечению ( программам чтения с экрана ), которые «читают» экран с помощью программы синтеза речи. Не указывать альтернативный текст означает частичное использование контента.
Сказав это, логично, что атрибут alt никогда не должен содержать заголовок изображения или легенду. Он должен содержать текст, который на самом деле может компенсировать отсутствие изображения, чтобы сделать текст одинаково пригодным для использования. По этой причине вставлять атрибут alt бесполезно, если у нас уже есть похожее описание в тексте вокруг изображения.
Наконец, текст, содержащийся в атрибуте alt, может быть полезен для SEO, поскольку пауки поисковых систем предпочитают читать тексты, а не изображения для обработки.
Название в img
Некоторые браузеры (настольные, не мобильные) отображают всплывающую подсказку с текстом, содержащимся в атрибуте title , если они находят его по ссылке или на изображении и если пользователь задерживается над ним с помощью мыши (наведение мыши). Добавление атрибутов title по-прежнему позволяет добавить дополнительную информацию к изображению.
Изображения и ссылки
Мы можем вставить изображение непосредственно в ссылку, чтобы сделать его более понятным. Делать это в этот момент действительно тривиально:
<a href="https://gospodaretsva.com "> <img src="logo.png"> </a>