Тег img, а также src, alt и другие его атрибуты для вставки картинки в HTML код веб-страницы

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Тег img имеет особое значение в языке гипертекстовой разметки, так как позволяет размещать изображения на web-страницах в сети (напомню, для веба наиболее подходящими форматами являются растровые JPG, PNG, GIF, а также векторный SVG), способные разнообразить предоставляемый пользователям контент.

Но самыми востребованными и часто используемыми на практике являются JPG и PNG (чуть реже используется GIF). Именно такие варианты графики более всего подходят для формирования содержания большинства сайтов, так как их можно оптимизировать по максимуму.

В ходе вступления отмечу, что изображения играют очень важную роль в поиске Yandex и Google, а значит и в продвижении вашего веб-сайта. При грамотном подходе и соблюдении необходимых условий можно добиться весьма существенного прироста трафика на свой ресурс.

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

Тег img и его атрибуты src, height и width

Итак, <img> по своей сути является строчным элементом и не требует закрывающего тега. Его особенностью является наличие обязательного атрибута src, который и инициирует загрузку картинки на вебстраницу, открытую на данный конкретный момент в браузере.

В качестве параметра атрибута src применяется URL-адрес (в данном материале вся информация об унифицированном указателе ресурса) места хранения изображения на сервере. Причем, в урле в зависимости от ситуации может быть использован абсолютный или относительный путь.

Абсолютный путь файла начинается обязательно с названия протокола (HTTP или HTTPS) и имени домена, далее с использованием знака слэш «/» указываются папки, вложенные одна в другую, и заканчивается такая конструкция именем и расширением самого графического файла (koala.jpg):

<img src="https://goldbusinessnet.com/images/koala.jpg">

Абсолютный путь (ссылка) будет работать на любой вебстранице в интернете. Вы даже можете попасть на специальную страничку с изображением, ежели скопируете значение src (то есть, URL) и вставите в адресную строку веб-браузера (для того, чтобы убедиться, можете попробовать).

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

В этом случае путь до файла с картинкой в теге img задается относительно директории, в которой расположен HTML документ, откуда идет обращение к графическому файлику. Скажем, если веб- документ и картинка находятся в разных каталогах, то в общем случае необходимо указать путь файлика со всеми вложенными папками, начиная с той, которая расположена непосредственно в корне сайта. В качестве примера приведу код img с относительным путем до картинки, который можно вставить в любой документ, находящийся в пределах сайта:

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

Если веб-страничка сайта и файл картинки находятся в одной папке, то требуется указать только имя и расширение файла html картинки (на практике такой вариант встречается реже):

<img src="koala.jpg">

Часто используемыми атрибутами являются width и height (соответственно, ширина и высота, выраженная в пикселах или процентах). Они прописываются таким образом:

<img src="https://goldbusinessnet.com/images/koala.jpg" width="192" height="144">
<img src="/images/koala.jpg" width="192" height="144">

Вот как выглядит эта картинка после вставки в ХТМЛ-код страницы:

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

Web-браузер при обнаружении ХТМЛ тега img понимает, что требуется отобразить какой-то файл изображения, однако, при отсутствии width и height он определяет размеры и выделяет место под картинку, так сказать, в процессе, что, естественно, замедляет загрузку графики.

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

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

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

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

Все эти действия по оптимизации (выбор подходящей ширины и высоты, а также сжатие) можно проделать при помощи соответствующих средств, например, используя замечательный редактор Pixlr Editor, являющийся онлайн аналогом знаменитого Adobe Photoshop и позволяющий быстро и качественно создавать красивые картинки и композиции для страниц вашего сайта.

С этой целью можно применить функционал отличной программы FastStone Image Viewer. В любом случае помните, что атрибуты ширины и высоты должны быть заданы обязательно, и при этом их значения должны соответствовать реальным размерам изображения.

Значение атрибута alt и вставка картинки с ссылкой

Теперь давайте разберем еще один обязательный атрибут, коим наряду с src является alt. Он определяет так называемый альтернативный текст, который будет выводится в том случае, если по каким-то причинам браузер не сможет отобразить фото, рисунок или другую графику.

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

<img src="https://goldbusinessnet.com/images/koala.jpg" alt="Коала - австралийское сумчатое животное" width="192" height="144">

В различных веб-обозревателях отображение альтернативного текста различается, но принцип остается одним и тем же. Вот пример текстового содержания alt в браузере Google Chrome, когда сама картинка не выводится (причина — некорректно указанный путь либо иная ошибка):

Однако, содержимое этого атрибута служит не только для достижения выше описанной задачи, но еще и помогает в успешном продвижении сайта. Дело в том, что употребление ключевых слов по теме конкретного материала, задействованных в alt, способствует улучшению ранжирования проекта и участию изображений в поиске по картинкам Яндекса и Гугла. Правда, при этом нужно соблюдать осторожность, поскольку злоупотребление этим методом оптимизации вполне может привести к спаму КС, за что возможны санкции поисковых систем (нюансы здесь и здесь).

Любое изображение вполне может быть сформировано в виде ссылки, которая ведет на нужную вебстраницу. Для этого следует просто вставить конструкцию, созданную при помощи тега img, в качестве анкора гиперссылки, использовав для этого тег a:

<a href="https://goldbusinessnet.com/" target="blank"><img src="https://goldbusinessnet.com/image/koala.jpg" alt="Коала - австралийское сумчатое животное" width="192" height="144"></a>

Соответственно, картинка станет кликабельной, которая в нашем примере после вставки этого фрагмента в HTML-код ссылается на главную web-страницу блога:

Целевая страничка откроется в новой вкладке, так как использован атрибут target="_blank".

Какие еще атрибуты есть у тега img

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

1. Ismap. Данный атрибут, не имеющий значений, сообщает браузеру, что изображение является серверной картой-приложением. Сущность заключается в том, что карта позволяет привязывать различные ссылки к каждой из областей картинки.

Механизм заключается в следующем. После выбора нужной области, привязанной к определенной ссылке, браузер посылает запрос на сервер для получения ее адреса и ожидает соответствующей информации. Чтобы реализовать его на практике, необходимо элемент img, каждой точке которого соответствуют свои координаты по осям x и y, сделать ссылкой, в которой параметром атрибута href установить путь до серверного приложения. Программа анализирует полученные координаты (например, «x=50, y=25») и возвращает соответствующую им страницу.

<a href="mode.php"><img src="image/xyz.gif" alt="" width="150" height="150" ismap></a>

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

2. Srcset [HTML5]. Атрибут, появившийся в 5-й версии HTML, позволяет корректно адаптировать изображения к мониторам различного размера, что в современных условиях архиважно.

В качестве значений (параметров) srcset могут выступать следующие составляющие:

  • адрес изображения;
  • дескриптор ширины (целое положительное число в сочетании с w, например, 500w);
  • дескриптор плотности пикселей (положительное число в сочетании с x, например, 1.5x).

Обычно в состав параметров srcset входит несколько адресов с путями до различных вариантов одного и того же изображения. При использовании дескриптора плотности пикселов для дисплеев с высоким разрешением конструкция для вставки в HTML код будет выглядеть примерно так:

<img src="images/koala.jpg" srcset="images/koala-1.5x.jpg 1.5x, images/koala-2x.jpg 2x, images/koala-3x.jpg 3x">

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

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

<img src="images/koala.jpg" srcset="images/koala-1.5x.jpg 200w, images/koala-2x.jpg 400w, images/koala-3x.jpg 600w">

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

3. Sizes [HTML5]. Еще один новый атрибут, позволяющий отображать адаптивные изображения. Он используется тогда, когда требуется предоставить пользователям максимально качественную графику под разнообразные размеры экранов. Применяются следующие варианты параметров (используемые единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px):

3.1. Единственное значение ширины (vw — ширина в процентах от области просмотра):

sizes="100vw"

3.2. Медиа-запрос с единственным значением ширины. В качестве примера указана контрольная точка 50em:

sizes="(min-width: 50em) 100vw"

3.3. Несколько размеров в виде медиа-запросов, перечисленных через запятую. Например:

sizes="(max-width: 35em) 100vw, (max-width: 45em) 45vw"

Чтобы стало понятнее, приведу полный образец с привлечением атрибута srcset и дескриптора w:

<img 
    src="images/koala.jpg"
    srcset="images/koala-small.jpg 300w, images/koala-large.jpg 550w" 
    sizes="(max-width: 500px) 250px, (min-width: 500px) 500px">

Таким образом, при сужении ширины области просмотра до 500px изображение будет уменьшено.

4. Usemap. Позволяет реализовать внедрение ссылок, ведущих на разные страницы, связывая изображение и карту, реализуемую при помощи HTML тегов <map> и <area> (мы их пока еще не разбирали, но подробности в их отношении обязательно последуют в дальнейшем).

Привязка осуществляется при помощи имени идентификатора, которое устанавливается в роли параметра атрибута usemap тега <img> и атрибута name элемента <map>. Значением (именем идентификатора) является любая текстовая строчка, начинающаяся с «#». На словах все это осознать довольно непросто, а вот конкретный пример, полагаю, внесет ясность. Для начала код:

<div id="banner">
<img src="//goldbusinessnet.com/images/geometry.jpg" width="400" height="75" 
                 alt="Волшебство геометрии">
<img src="//goldbusinessnet.com/images/menu.png" width="400" height="20" alt="Меню сайта" usemap="#Menu">
</div>               
 <p><map name="Menu">
  <area shape="rect" coords="0,0,100,20" href="page/home.html" alt="Главная">
  <area shape="rect" coords="100,0,200,20" href="page/figures.html" alt="Фигуры">
  <area shape="rect" coords="200,0,300,20" href="page/lines.html" alt="Линии">
  <area shape="rect" coords="300,0,400,20" href="page/effects.html" alt="Эффекты">
</map></p>

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

В заключение скажу, что элемент img имеет еще несколько атрибутов: align (обтекание картинки текстом), а также border (толщина рамки вокруг изображения), hspace (горизонтальный отступ), longdesc (адрес документа с аннотацией к картинке), vspace (вертикальный отступ).

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

6 отзывов

  1. Евгения

    Спасибо за содержательную и ценную для меня информацию. Очень даже пригодится.

  2. Анатолий

    Спасибо, Игорь. Очень полезная публикация, особенно для таких новичков, как я. Думаю, действуя согласно Вашим рекомендациям смогу вставит картинку на страницу сайта. А не разъясните доступным языком, как вставить картинку в "шапку" сайта?

  3. Игорь

    Анатолий, думаю посвятить этому на днях отдельный пост.

  4. Ефим

    Огромное спасибо, интересно.

  5. Илья

    Приветствую, Игорь.

    "..далее с использованием знака флэш «/» прописываются папки.."
    Может, Вы опечатались и это "слэш"?

    С уважением.

  6. Игорь

    Конечно, Илья, спасибо за обнаруженную ошибку, вот что значит внимательный читатель. Опечатку исправил.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.