Html картинки: как использовать тег img и его атрибуты для вставки изображения

Здравствуйте, уважаемые читатели! Продолжая тему html, хочу предложить сегодня все подробности использования тега img html, а также его атрибутов для вставки html картинки на страницу блога wordpress.

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

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

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

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

Тег img для вставки html картинки на сайт, атрибуты тега img

Итак, для вставки картинки, например, в статью, служит HTML тег img. Основной атрибут src дает возможность указать имя и место хранения файла изображения:

<img src="http://goldbusinessnet.com/image/koala.jpg" Width="192"Height="144">

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

Можно также использовать относительный путь в html теге img. Он задается путем отображения самого файла изображения относительно папки, в которой находится html документ, из которого идет обращение к данному файлу. Если документ и файл картинки находятся в одной папке, то требуется указать только имя и расширение файла html картинки: koala.jpg.

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

<img src="http://ваш_сайт.ru/wp-content/uploads/image/koala.jpg" Width="192"Height="144">

Очень важными атрибутами тега img html являются Width и Height (ширина и высота соответственно). Эти атрибуты используются следующим образом:

<img src="/image/koala.jpg" Width="192"Height="144">

Здесь очень важно отметить следующее. Если вы вставляете html картинку на страницу, загрузив ее, скажем с компьютера, а размеры этого изображения велики и для коррекции вы используете эти атрибуты (которые, к слову, не являются обязательными), то размер рисунка будет изменен до отмеченных в атрибутах Width и Height значений, однако его ”вес” будет по-прежнему большим, что сильно замедлит загрузку страницы с изображением.

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

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

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

<a href="/" target="_blank">
<img src="/image/koala.jpg" Width="192"Height="144"></a>

Теперь html картинка будет кликабельна, при клике на нее откроется документ, на который ведет гиперссылка, причем откроется в новой вкладке, поскольку использован атрибут target=”_blank”. В данном случае это главная страница моего блога. Как видите, использование атрибутов тега А в комбинации с атрибутами тега img html расширяет возможности вставки картинки на страницу блога. Кстати, эксклюзивность изображения можно обеспечить, создав для него водяной знак (например, с помощью сервиса PicMarkr или посредством программы для просмотра изображений).

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

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

6 отзывов

  1. Евгения

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

  2. Анатолий

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

  3. Игорь

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

  4. Ефим

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

  5. Илья

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

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

    С уважением.

  6. Игорь

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

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

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

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