Таг img

Таг img създава изображение. Пътят към изображението се прописва в атрибута src. Не изисква затварящ таг.

Атрибути

Атрибут	Описание
src	Задава пътя към изображението. Задължителен атрибут.
alt	Алтернативен текст, който ще бъде показан вместо изображението, ако то не е намерено (например, неправилно е прописан пътя към него). Задължителен атрибут. При липсата му валидаторът (програма, която проверява коректността на HTML или CSS) ще се оплаква.
width	Ширина на изображението, в пиксели (в този случай мерните единици не се посочват) или проценти от родителя на изображението.
height	Височина на изображението, в пиксели (в този случай мерните единици не се посочват) или проценти от родителя на изображението.

Нюанси

Ако за изображението не е зададена нито ширина, нито височина - изображението ще има своя реален размер. Ако е зададена височина - изображението ще стане с зададената височина, а по ширина ще се настрои така, че пропорциите му да не бъдат изкривени.

Ако е зададена само ширина - аналогично, изображението ще се настрои по височина така, че да запази пропорциите.

Ако са зададени и ширина, и височина - пропорциите на изображението могат да бъдат изкривени (а може и да не са, както познаете). Ако ширината или височината (или и двете заедно) са по-големи от реалните - изображението ще се увеличи, но ще загуби от качеството.

Препоръчително е да се задават ширина и височина на изображенията в атрибути (а не чрез CSS) - в този случай браузърът ще зарежда по-бързо изображенията - няма нужда да изчислява размера на всяко изображение след неговото получаване.

Не се препоръчва намаляването на реалните размери на изображението без необходимост. Например, реален размер на изображението 1000 на 1000 пиксела, а вие му зададете ширина от 100px. В този случай изображението на екрана ще изглежда с 100 пиксела, но ще има размер от цялата хиляда и съответно ще се зарежда много по-бавно.

Пример

Нека добавим изображение в сайта и не задаваме атрибути height и width. Изображението ще има своя реален размер:

:

Пример

Нека опитаме да добавим ширина на изображението с помощта на атрибута width, височината при това трябва да се настрои така, че да запази пропорциите на изображението:

:

Пример

А сега нека добавим височина на изображението с помощта на атрибута height, ширината при това ще се настрои така, че да запази пропорциите на изображението:

:

Пример

Нека едновременно добавим на изображението и височина, и ширина. Пропорциите на изображението при това трябва да станат изкривени (не е задължително, но в този случай височината и ширината са подбрани така, че пропорциите да се изкривят):

:

Пример

Нека зададем неправилен път към изображението (за простота ще го оставим празен). Вместо изображението ще видим съдържанието на атрибута alt (изглежда, че това е обикновен текст - но опитайте да го копирате - няма да успеете, той ще се тегли като изображение):

:

Вижте също