Меню
Спросить
< >

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

7 февраля 2017
HTML изображения

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

Тег IMG

Для того, чтобы добавлять изображения на свой сайт лучше всего воспользоваться тегом IMG, но можно и с помощью css-таблиц - ТЫК.

Но мы, все таки, поговорим о теге IMG. Начнем с простого, как он выглядит в коде?

  1. <img>

Как видим, тег не требует закрытия. С помощью этого тега можно добавить картинки на сайт, говорили они, но как? Все очень просто, для этого мы дописываем тегу IMG обязательный атрибут SRC, который, в свою очередь, будет содержать в себе путь к картинке или изображению.

  1. <img src="/resource/img.jpeg">

Отлично, что еще может IMG? Возьмем к примеру случай, когда нужно вставить картинку с другого ресурса, сайта. К примеру, у вас изображения хранятся в облаке и вы не хотите скачивать на сервер. Для этого нужен полный путь к картинке и так же вставляем в этот атрибут, если это не поможет можно еще добавить атрибут CROSSORIGIN и добавить ему значение ANONYMOUS, смотрим.

  1. <img src="http://www.leningrad.ru/img.jpg" crossorigin="anonymous">

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

  1. <img src="avto.jpg" alt="Москвич">

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

  1. <img src="avto.jpg" alt="Москвич" longdesc="http://www.wiki.ru/avto/moscvich">

В html 5 версии он к сожалению устарел. Теперь поговорим о правильности. Есть два очень хороших атрибута, работают в паре, они помогают с оптимизацией сайта. Чем именно? С помощью этих атрибутов можно подгружать изображения в зависимости от размеров экрана.
Первый атрибут - SRCSET, в нем мы указываем через запятую список изображений с плотностью пикселей.

  1. <img src="img.png" srcset="one_img.png 2x, two_img.png 1.5x">

2x - это плотность пикселей.
Второй атрибут - SIZES, здесь указываем при каких размерах экрана, должен срабатывать атрибут srcset и размер изображения в любых единицах кроме процентов, здесь может быть что-то вроде медиа запросов.

  1. <img src="img.png" srcset="one_img.png 2x, two_img.png 1.5x" sizes=" (min-width: 600px) 700px">

К сожалению эти атрибуты работают не во всех браузерах. Так же можно указать ширину и высоту изображения, с помощью атрибутов WIDTH и HEIGHT, если вы конечно не написали это стилях css. 

Заключение

На этом пока что все, будет что интересное - добавлю.
Всем спасибо.
Пока =)

Следующая статьяПредыдущая статья