Маркери на IMG атрибути

Използване на маркера HTML IMG за изображения и обекти

Маркерът HTML IMG урежда вмъкването на картини и други статични графични обекти в уеб страница. Този често използван маркер поддържа няколко задължителни и незадължителни атрибута, които добавят богатство към способността ви да проектирате ангажиращ, фокусиран върху изображения уебсайт.

Пример за напълно оформен HTML IMG таг изглежда така:

Необходими атрибути на маркера IMG

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

ALT. За да пишете валидни XHTML и HTML4, е необходим и атрибутът ALT. Този атрибут се използва за предоставяне на невиждани браузъри с текст, който описва изображението. Браузърите показват алтернативния текст по различни начини. Някои я показват като изскачащ прозорец, когато поставите курсора на мишката върху изображението, други го показват в свойствата, когато щракнете с десния бутон на мишката върху изображението, а някои изобщо не го изобразяват.

Използвайте алтернативния текст, за да дадете допълнителни подробности за изображението, които не са уместни или важни за текста на уеб страницата. Но не забравяйте, че в екранните четци и други текстови браузъри текстът ще бъде прочетен заедно с останалата част от текста на страницата. За да избегнете объркване, използвайте описателен алтернативен текст, който казва (например) "About Web Design and HTML" вместо просто "лого".

В HTML5 атрибутът ALT не винаги се изисква, защото можете да използвате надпис, за да добавите още описание към него. Можете също да използвате атрибута ARIA-DESCRIBEDBY, за да посочите идентификационен номер, който съдържа пълно описание.

Алтернативен текст също не се изисква, ако изображението е чисто декоративно, например графика в горната част на уеб страница или икони. Но ако не сте сигурни, включете друг текст само за всеки случай.

Препоръчителни атрибути на IMG

ШИРИНА и ВИСОЧИНА . Трябва да получите навика винаги да използвате атрибутите WIDTH и HEIGHT. И винаги трябва да използвате реалния размер и да не преоразмерявате вашите изображения с браузъра.

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

Други полезни атрибути на IMG

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

Повечето браузъри поддържат атрибута TITLE, но го правят по различни начини. Някои изобразяват текста като изскачащ прозорец, докато други го показват в информационните екрани, когато потребителят кликне с десния бутон върху изображението. Можете да използвате атрибута TITLE, за да напишете допълнителна информация за изображението, но не разчитайте, че тази информация е скрита или видима. Определено не би трябвало да използвате това, за да скриете ключови думи за търсачките. Тази практика вече се наказва от повечето търсачки.

USEMAP и ISMAP . Тези два атрибута задават картографски изображения от страна на клиента () и от сървъра (ISMAP) към вашите изображения.

LONGDESC . Атрибутът поддържа URL адресите на по-дълго описание на изображението. Тази функция прави вашите изображения по-достъпни.

Отменени и остарели атрибути на IMG

Няколко атрибута вече са остарели в HTML5 или са отхвърлени в HTML4. За най-добър HTML трябва да намерите други решения, вместо да използвате тези атрибути.

ГРАНИЦИ . Атрибутът определя ширината в пиксели на всяка граница около изображението. Той е отхвърлен в полза на CSS в HTML4 и е остарял в HTML5.

ALIGN . Този атрибут ви позволява да поставите изображение в текста и да имате поток от текст около него. Можете да приведете изображение вдясно или наляво. Той е отхвърлен в полза на собствеността на CSS float в HTML4 и е остаряла в HTML5.

HSPACE и VSPACE . HSPACE и VSPACE добавят бяло пространство хоризонтално (HSPACE) и вертикално (VSPACE). Бялото пространство ще бъде добавено от двете страни на графиката (отгоре и отдолу, или отляво и отдясно), така че ако се нуждаете само от пространство от едната страна, трябва да използвате CSS. Тези атрибути са отхвърлени в HTML4 в полза на маргиналната CSS собственост и те са остарели в HTML5.

LOWSRC . Атрибутът LOWSRC осигурява алтернативно изображение, когато вашият източник на изображения е толкова голям, че се изтегля изключително бавно. Например, може да имате изображение, което е 500KB, което искате да се показва на уеб страницата ви, но 500KB ще отнеме много време, за да изтеглите. Така че можете да създадете много по-малко копие на изображението, може би в черно-бяло или просто изключително оптимизирано и да го поставите в атрибута LOWSRC. По-малкото изображение ще се изтегли и покаже първо, а след това, когато се появи по-голямото изображение, ще се замени с нисък източник.

Атрибутът LOWSRC бе добавен към Netscape Navigator 2.0 към IMG тага. Тя беше част от ниво 1 на DOM, но бе премахната от ниво 2 на DOM. Поддръжката на браузъра е скитаща за този атрибут, въпреки че много сайтове твърдят, че е поддържана от всички съвременни браузъри. Той не е отхвърлен в HTML4 или остарял в HTML5, защото никога не е бил официална част от нито една спецификация.

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