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

html

Изображенията могат да бъдат представителни елементи на уеб страницата или декоративни елементи. Въпреки това, в случай че са декоративни елементи, трябва да използваме CSS, за да ги вмъкнем в нашата уеб страница.

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

Вмъкване на изображение: Елементът img

За да вмъкнем изображение в HTML, имаме елемента img, чийто основен синтаксис е:

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

Основният атрибут на img елемента е src указва пътя на изображението, което искаме да заредим. По този начин, ако изображението е по същия път като нашия уебсайт, ще поставим:

Дори изображението може да се намира на друг сървър. В този случай URL адресът, който съдържа изображението, трябва да посочва протокола и сървъра, който хоства изображението. Например можем да имаме следния код:

Размери на изображението: ширина и височина

Ако не посочим повече за img елемента, изображението, което сме предали в неговото поле src, ще бъде заредено с оригиналния си размер.

Въпреки че имаме атрибутите width за ширината на изображението и височина за височината на изображението. По този начин, ако искаме изображението ни да се вижда в 100x100 пиксела, можем да вмъкнем следния код:

Размерът на изображението може да бъде посочен в пиксели или в проценти. В случай на пропускане на единицата, ще се използва пикселът.

От съображения за производителност при зареждане на мрежите винаги е добре да се посочат техните ширини и височини.

Текст на изображението alt: атрибут alt и longdesc

На изображение можем да посочим алтернативен или описателен текст на него. За това имаме атрибут alt.

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

Ето защо алтернативният текст, който вмъкваме в изображението, трябва да е доста описателен за него. В някои случаи се посочва размерът на изображението.

Видове формати на изображения

Към този момент имаме малък проблем и той е, че HTML стандартите не определят типовете формат на изображението, които могат да се видят в уеб браузър.

Най-често приеманите формати на изображения са: