Как использовать изображения в HTML?

Тег изображения HTML

«Картинка стоит тысячи слов»- цитата, не требующая пояснений. Изображение, встроенное в текст, называется встроенным изображением, и большинство современных браузеров могут отображать встроенные изображения. Для этого вам просто нужно использовать код изображения HTML , а значением атрибута SRC является файл изображения (может быть png, bmp, jpg, gif и т. Д.) .

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

<IMG SRC="https://www.webnots.com/html-images-tutorial/myimage.bmp"></IMG> <!-- image located in the same directory --!>
<IMG SRC="../images/myimage.gif"> <!-- image located in the different directory --!>

Например, фрагмент кода:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png">

отображается, как показано ниже:

Заметка: Приведенный выше пример работает без закрывающего тега, и использовать закрывающий тег изображения в HTML не обязательно.

Растягивать слишком далеко?

Чтобы браузер знал, сколько области на экране нужно отдать изображению, можно использовать атрибуты HEIGHT и WIDTH. Например, мы могли бы изменить предыдущий пример так, чтобы он выглядел так:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" HEIGHT=40 WIDTH=60>

Или посмотрите это…

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" HEIGHT=100 WIDTH=300>

И соответствующие изображения результатов будут меньше или больше, как показано ниже:

Регулировка ширины и высоты изображения
Регулировка ширины и высоты изображения

Нажмите на это изображение, чтобы ..

Разве вы не хотите, чтобы вы могли нажать на это изображение и превратить его во что-то более красивое? Есть несколько способов сделать это … вот простая техника. Сделаем это изображение ссылкой. Как это сделать?

Ну вот … просто нажмите на изображение ниже!

Сделай сам SEO

И вот как вы это делаете !!!

<A HREF="https://www.webnots.com/do-it-yourself-seo-tutorials/">
<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png">
</A>

Хотите добавить границу? Отлично! Просто добавьте «BORDER = 1» в тег IMG.

Выравнивание изображений

Угадайте, какой атрибут вы собираетесь использовать ?? Да, конечно, свойство ALIGN. Например, рассмотрим фрагмент HTML:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" ALIGN=TOP HEIGHT=200 WIDTH=300> Learn how to submit your site to search engines for free!!

Это отображается как:

Сделай сам SEO

Узнайте, как разместить свой сайт в поисковых системах бесплатно !!

А теперь посмотрите на разницу:

Сделай сам SEO

Узнайте, как разместить свой сайт в поисковых системах бесплатно !!

Вы можете понять, что было изменено? Да, текст выравнивается по середине изображения с помощью атрибута «ALIGN = CENTER».

Заметка: Атрибут align с Тег может принимать значения top, bottom, middle, left и right. Помните, что атрибут align не поддерживается в HTML5, вы должны управлять выравниванием с помощью CSS.

Атрибут ALT

Что делает этот атрибут? Если изображение отсутствует или браузер не является графическим браузером (например, Lynx), вместо изображения отображается текст ALT. Рекомендуется всегда указывать атрибут ALT как часть хорошего пользовательского интерфейса.

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

<IMG SRC="https://www.webnots.com/html-images-tutorial/Null.jpg" ALIGN=CENTER ALT="SEO For Images">

Браузер отобразит несовместимое изображение, как показано ниже, путем отображения тега ALT, определенного для этого изображения:

Замещающий текст в несовместимом изображении
Замещающий текст в несовместимом изображении

Рисунок и подписи к рисунку

Поскольку изображения имеют заголовок, HTML5 позволяет охватить элемент внутри элемента

и предлагает дополнительную функцию для добавления заголовка к изображениям —
. В приведенном ниже коде будет показано изображение с подписью:

<FIGURE>
<IMG src="https://www.webnots.com/html-images-tutorial/books.png" alt="Tied Books" height=300 width=300>
<FIGCAPTION>Tied Books</FIGCAPTION>
</FIGURE>

Это будет выглядеть в браузере, как показано ниже, с подписью под изображением:

HTML5 элемент FIGURE
HTML5 элемент FIGURE

Не может быть все хорошо!

Изображения — это хорошо, если они есть на страницах; они добавляют ценность описанию, иногда говорят сами за себя, оживляют страницу и делают многое другое. Однако их нужно использовать с осторожностью.

Что ж, изображение может стать очень большим — и это может убить время загрузки страницы, так как его загрузка занимает много времени, особенно при низкоскоростных интернет-соединениях! Кроме того, для каждого изображения на вашей странице от клиента на сервер отправляется новый HTTP-запрос. Итак, если у вас есть два изображения на вашей странице, всего будет три запроса — первый для реальной HTML-страницы, а следующие два для изображений. Это приводит к возникновению трех циклов приема-передачи (запрос + ответ = круговое обращение) — это также может вызвать засорение сети дополнительными данными.

Так что же в итоге? Что ж, проявляйте осмотрительность при разработке своих страниц. Помните, всегда есть компромисс! В общем, имейте в виду следующее:

  • Всегда оптимизируйте изображения на своем сайте для поисковых систем.
  • Используйте соответствующий размер для изображений. Убедитесь, что изображения адаптируются и автоматически настраиваются в зависимости от ширины браузера. Все современные темы будут поддерживать отзывчивость.
  • Используйте правильный формат изображения. Обычно для веб-страниц подходят форматы изображений jpeg или png.
  • Используйте масштабируемые векторные изображения (SVG) для значков вместо форматов bmp, png или jpeg.
  • Используйте такие инструменты, как SnagIt и Photoshop, для создания изображений. Вы также можете получить бесплатные стоковые изображения со многих веб-сайтов.

Похожие записи

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

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