Особенности вставки картинки в HTML

Здравствуйте, дорогие друзья!

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

Как вставить картинку в HTML?

За вставку картинки в HTML отвечает тег img, который имеет свои атрибуты

В атрибуте src мы указываем путь к изображению, причём путь может быть относительным или абсолютным.

Например, если у вас есть файл index.html, в который вы хотите вставить картинку, расположенное в папке images, находящейся в одной и той же папке с index.html, то относительный путь будет выглядеть так:

А абсолютный так:

Атрибут alt используются для задания альтернативного текста. Именно на него обращают внимание поисковые системы чтобы понять что изображено на картинке и определить по какому запросу нужно высвечивать эту картинку в «Поиске по картинкам».

Так же если у посетителя сайта в браузере отключен показ изображений или картинка по каким либо причинам не загрузилась то на его месте должен будет высветиться этот альтернативный текст, указанный в атрибуте «alt»

Например:

Однако это не значит, что на картинке с изображением дивана в атрибуте alt можно написать «диван» и ничего более. Это может быть текст, соответствующий какому-то ключевому запросу, по которым вы продвигаете свой сайт, например, «перетяжка мягкой мебели» или «купить диван в Москве» и так далее.

В WordPress этот атрибут можно добавит при вставке или редактировании картинки:

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

Атрибут title используется для задания заголовка картинки, которое высвечивается при наведении курсора на картинку:

Например:

В WordPress этот атрибут задаётся в окне редактирования картинки

Как задать размер изображения html?

Для этого в HTML существуют специальные атрибуты для тега img

• width – для задания ширины картинки
• height – для задания высоты картинки

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

Например:

Лично мне больше нравится задавать размер изображения в CSS так как там можно задавать ещё минимальную и максимальную ширину и высоту для изображений. Это особенно актуально если нужно несколько разных по размеру изображений выровнять по высоте или ширине.
Для этого можно использовать CSS свойства:

• max-width – максимальная ширина изображения
• min-width – минимальная ширина изображения
• max-height – максимальная высота
• min-height – минимальная высота

Например:

Так же при задании ширины или высоты изображения в CSS для того чтобы не происходило деформации изображения используется значение auto.
Например:

Как сделать картинки адаптивными?

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

1. 1.При помощи html с использованием атрибута width
   Например:
   
   PHP

   <img src="images/example.jpg" alt="Вставка изображения" width="100%">

   1	<img src="images/example.jpg" alt="Вставка изображения" width="100%">

2. 2.При помощи CSS. Например:
   
   PHP

   img { width: 100%; height: auto; }

   1 2 3 4

   img { width: 100%; height: auto; }

Так же не стоит забывать о свойстве max-width, которое позволяет сделать так чтобы на больших экранах ваша картинка занимала не более 300 пикселей, к примеру. А на маленьких оно было на всю ширину.

Делается это следующим образом:

Так же перед тем как загружать картинку на сайт не забывайте его оптимизировать.

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

Спасибо что дочитали статью до конца! Если у вас есть какие то вопросы, относящиеся к размещению изображений на сайте – напишите их в комментариях!

Успехов вам и процветания!

С уважением Юлия Гусарь