Силата на езикът HTML се състои в създаването и интегрираното представяне на мултимедийни документи, в които освен текст има графични изображения, икони, видеоклипове, звук и анимирани елементи. Понятието in-line graphic предполага, че Web клиентът не се нуждае от допълнителни специализирани програмни средства за визуализация на стандартизирани графични формати.

Командата <IMG> позволява директно включване на графика (in-line graphics) в полето на документа. Елементът <IMG> е команда от празен тип и не изисква затварящ елемент.

Командата <IMG> има следния формат:
 

Например, командата <IMG SRC="picture.gif"> извлича графиката от файла "picture.gif" по относителен адрес (текущата директория) и я извежда в полето на документа. Параметърът "SRC" е задължителен и трябва да сочи абсолютен или относителен URL адрес.

Командата <IMG> има избираеми параметри, които специфицират начина на включване на графиката в документа.

• ALIGN - е параметър, който определя как изображението се подравнява спрямо базовата линия на съседния на графиката текст или спрямо ограничителните линии на страницата (екрана) в рамките на текущия параграф. Ако параметърът е изпуснат подразбиращото се значение е ALIGN=bottom.
  • ALIGN=left - графичният обект се подравнява в ляво, а текстът се разполага в дясно от него;
  • ALIGN=right - графичният обект се подравнява в дясно, а текстът в параграфа се разполага в ляво от него;
  • ALIGN=center - графичният обект се подравнява спрямо центъра на екрана, а текстът заема пространството около графиката;
  • ALIGN=middle - хоризонталната ос на обекта се подравнява вертикално спрямо базовата линия на текста;
  • ALIGN=top - горният край на обекта се подравнява вертикално спрямо базовата линия на текста;
  • ALIGN=bottom - долният край на обекта се подравнява вертикално спрямо базовата линия на текста;

Текст(Align=top)

Текст(Align=middle)

Текст(Align=bottom)

• ALIGN=texttop - горните краища на обекта и текстовата линия се подравняват вертикално;
• ALIGN=texbottom - долните краища на обекта и текстовата линия се подравняват вертикално;
• ALIGN=baseline - долният край на обекта се подравнява вертикално спрямо базовата линия на текста.
• ALT="Text" е параметър, чрез който се задава заместващ графиката текст. Текстът се извежда на местото на графиката в полето на документа. Използването на този параметър е препоръчително в случаите, при които WWW клиентът няма графични възможности или тези му възможности временно са ограничени (чрез параметрите за настройка на Web Browser). Заместващият текст ("Text") трябва да съдържа кратко описание на графиката.
• HEIGHT=n, WIDTH=n са два параметъра, които спомагат за уточняване на размера в пиксели на изобразяваната графика в полето на документа. С помощта на параметрите се постига модифициране на размерите на графичните обекти по височина и/или широчина. Двата параметъра се обслужват напълно само от Netscape, където е допустимо и непропорционалното деформиране на графиката.
• BORDER=n е параметър за включване на рамка, с която се огражда графиката, като дебелината й се влияе от стойността на n зададена в пиксели. При отсъствие на параметъра подразбиращата се стойност е 0, а при стойност за n=0 графиката не се огражда. (Екран 7.2)

Без рамка (Border=0)

С рамка (Border=1)

С рамка (Border=5)

• LOWSRC=URL е параметър, приложим само за Netscape. Употребата му предизвиква извеждане в полето на документа на една начална графика, изобразяване на целия текст от документа и накрая зареждане на графичния файл от <IMG SRC="filename"> върху полето на началната графика. Най-подходящото приложение на атрибута е използване на графично изображение в ниска разрешаваща способност като начална графика, която ще бъде припокрита в края на зареждането на документа с оригинала. Адресът URL сочи абсолютен или относителен адрес на файл с графично изображение.
• HSPACE=n, VSPACE=n са два параметъра, които осигуряват възможност за оформяне на празно пространство (вертикално и хоризонтално) около графичния обект. Атрибутът n се задава в пиксели. В един HTML документ празните позиции се игнорират, което обективно затруднява подравняването на текст около и до графични елементи. Употребата на параметрите създава условия за добро възприемане на графичен обект заобиколен от текст. (Екран 7.3)

Графиката е подравнена в ляво (Align=left), текстът обхожда графиката отдясно. Около графиката е оформено поле в хоризонтална и вертикална посока (Hspace=10, Vspace=5)

Графиката е подравнена в дясно (Align=right), текстът обхожда графиката отдясно. Около графиката е оформено поле в хоризонтална и вертикална посока (Hspace=5, Vspace=10)

• ISMAP, USEMAP=URL са два параметъра, които се използват при "горещи" точки в полето на графичното изображение. Изобразеният графичен обект в полето на документа се използва като карта, от която са снети координати на точки и са записани във MAP файл. Снетите точки се използват като хипервръзки за обръщение към други документи. Елементът ISMAP указва, че графиката е избираема. Координатите на избрана точка от нея се изпращат на сървър за обработка, например:

<a href="/cgi/coord.map"><img src=pic.gif ismap></a>

където, HREF сочи адреса на MAP файла или CGI скрипта, който ще обработи данните от клиента, а в IMG се определя изобразената графика като избираема. Елементът USEMAP сочи адрес и име на MAP елемент в локалната машина. Описание на елемента и начина на неговото използване е дадено в раздела "Hotspot Images".

Най-често употребяваният тип графичен формат е .gif. Форматът на графични файлове GIF (Graphics Interchange Format) първоначално е бил разработен за потребителите на частната компютърна мрежа CompuServe и използват компресия от вида на LZH. Цветната палитра на графични изображения, записани в GIF формат е ограничена до 256 цвята, което го прави подходящ за рисунки, икони и графични знаци.

Текущия стандарт за gif формат е GIF89a и поддържа няколко допълнителни ефекта особено подходящи при оформяне на Web страници:

• Interlacing - това е свойство, при което Web браузъра изобразява gif файла на няколко паса като ефект на преминаване от графика с по-ниска разделителна способност към графика с по-висока разделителна способност. Използването на този ефект осигурява възможност на потребителя да добие предварителна представа за съдържанието на графиката без да дочака пълното й изобразяване в полето на Web клиента. (Екран 7.4)
• Transparency - това е свойство, при което един от цветовете в графичното изображение е посочен като прозрачен и основата прозира през него. Изпозването на това свойство интегрира много добре графичното изображение във Web страницата. Създаването на прозрачен gif е възможно със средствата на графични редактори като Photoshop, Paint Shop Pro и други. С тяхна помощ могат да се създават и  interlaced GIF файлове. (Екран 7.4)

• Animation - анимираните gif файлове представляват последователност от кадри, записани в един файл. Програмите за създаване на анимирани gif изображения, като Microsoft GIF animator,  позволяват параметризирането на броя на кадрите, тяхното времетраене, въвеждане на паузи за определено време, броя на цикличните изпълнения на кадрите. Възпроизвеждането на съдържанието на един анимиран GIF файл стартира автоматично след неговото зареждане в полето на Web клиента. (Екран 7.5)

Екран 7.5 - Анимиран GIF

Едно пълноцветно изображение записано в компресиран вид се постига с формата JPEG (Joint Picture Experts Group). Този формат е 24 битов и позволява 2^24 или 16 777 216 цвята. Използването на формата JPEG е подходящ при изобразяване на многоцветни картини и цветна фотография (Екран 7.6).

Екран 7.6 - Стенописи в Рилски манастир, заснети с цифрова камера и изобразени в JPEG формат

Висококачествените представителни възможности на формата JPEG формират от друга страна файлове с по-голям обем в сравнение с файловете записани във формат GIF. Свойствата Transparency и Animation не са възможни при формата JPEG. Сходство със свойството Interlacing при GIF формата се постига с помощта на модифициран от скоро вариант на JPEG - p-JPEG (progressive JPEG).

Бъдещето на Web графичните формати е свързано с обявения нов стандарт от World Wide Web Consortium (W3C) от пролетта на 1996 година. Новият графичен формат PNG (Portable Network Graphic) има за цел да замести GIF и JPEG форматите. Проектът предвижда обединяване на качествата на двата графични формата, като заедно с това предоставя допълнителни възможности, свързани с независимост на формата от машинната и програмната платформа. Версиите 4.x на Netscape и Internet Explorer интерпретират този формат. Основните достойнства на формата PNG включват:

• многослойност на свойството Transparency;
• възможност за използване на свойството Interlacing;
• поддържа повече от 256 цвята;
• подобрено качество на изображението;
• по-ниско ниво на компресия в сравнение с това при jpeg, поради прилагане на компресиращ метод без загуби;
• независимост от платформата.

Екран 7.6.1 - Изображение във формат PNG

Ако на мястото на изображението от Екран 7.6.1 се появява служебната икона заместител на графика, това означава, че браузърът не поддържа PNG формат, или липсва съответният plug-in.

В таблица 2 е посочен списък на графични файлове, разпознавани от болшинството WWW клиенти.

Екран 7.7 - Смесване на графика с текст

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

Известно е, че графичните файлове са с голям обем. Например, графично изображение с 256 цвята, заемащо целия екран, изисква над 100K байта, докато няколко килобайта HTML текст се разполага в няколко страници на екрана. Следователно честото използуване на графика в даден документ забавя визуализацията, особено ако връзката към Internet е бавна.

Първият широко разпространен WWW клиент, Mosaic 1.0.3 не позволяваше на потребителя да прави нещо друго до пълното получаване на графиката. WWW клиентите от следващото поколение, като Netscape Navigator и Microsoft Internet Explorer, осъществяват извличането на графичните файлове във "фонов" режим, като позволяват на потребителя да се движи по документа или да осъществява преход към друг документ преди пълното получаване на графичния файл.

Списъчните структури, описани в List Commands, се оформят с специален водещ символ. Този символ, генериран от съответният Web браузър може да бъде заменен от графичен по избор на потребителя. Автоматичното оформяне на списъка в този случай не може да се използва, т.е. подреждането на елементите в списъка, както и тяхното вмъкване трябва да бъде управлявано "речно". Следният HTML код е интерпретиран на Екран 7.8.
 

"Ръчното" оформяне на списъка касае самостоятелното изписване на всеки ред в рамките на един параграф (<P>), предхождан от команда <IMG>  за поставяне на графичния списъчен разделител. Преминаването на следващ ред става с команда <BR>. Текстът на всеки списъчен елемент в примера е оформен в получер стил <B>. За Web браузъри без  графични възможности алтернативно (ALT) списъчните елементи се предхождат от символа "*".

 
Екран 7.8 - Списък с водещ графичен елемент

Списък от дефиниции, който наподобява неподреден списък, се оформя чрез последователност от команди <DL> <DT> <DD>. Ако в тялото на елемента се вмъкне команда за изобразяване на графичен компонент, то водещите символи на списъка се заменят с този компонент. Този случай е един от най-често срещаните при приложението на графични елементи във Web страниците. Следният HTML код илюстрира това приложение.
 

Интерпретацията на кода е показана на Екран 7.9.

 
Екран 7.9 - Неподреден списък, реализиран чрез списък от дефиниции

Хоризонтални линии в една HTML страница се изтеглят чрез команда <HR>, като дебелината, дължината и ориентацията на линията се задава с помощта на параметрите на командата. Графично оформени линии и записани във формат на файлове gif или jpg могат успешно да заменят използването на командата. Следният фрагмент от HTML код при интерпретация извежда в полето на документа (Екран 7.10) графична линия от gif файл (bluelinе.gif) чрез командата <IMG>.
 

Изображението се извежда в самостоятелен параграф, центрирано спрямо средата на документа с указани значения за височина и дължина. За Web браузъри без  графични възможности алтернативно (ALT) на мястото на графичната линия се извежда "- - -".

 
Екран 7.10 - Поставяне на графична линия в полето на документа

Графични изображения могат да бъдат използвани за създаване на хипервръзки (<A>) към части от документа или към други HTML документи или изобщо към друг Web site.  "Горещата дума" в този случай е графичен обект изобразен чрез команда <IMG>. Когато графичен обект сочи хипервръзка, той се огражда в рамка с цветовата палитра на връзките дефинирани от атрибутите (LINK, VLINK и ALINK) в командата <BODY>. Ограждането се дължи на факта, че по подразбиране "горещата дума" в смисъла на хипервръзка се извежда с подчертаване. За да се премахне рамката трябва изрично да се укаже BORDER=0 в командата <IMG>. Посоченият по-долу HTML код дефинира хипервръзка чрез графичен обект (книги) от началото на този параграф и сочи към раздела "Литература".
 

Създаването на собствени графики изисква умения за работа с графични редактори като Photoshop,  CorelDRAW или Paint Shop Pro. Естетичното, добре направеното и цветово балансирано графично изображение е изкуство, което не се отдава в еднаква степен на всеки. Дори направата на един графичен надпис не e чак толкова проста работа.  Проблемът за мнозина може да се разреши, ако се копират графични елементи от достъпните по Internet Web сървъри с богат набор от свободно предоставяни графични компоненти Сървърът на CERN (http://www.w3.org/hypertext/WWW/Icons) и този на Randy Bazaar (http://www.infi.net/~rdralph/icons/) предоставят свободно значителен набор от най-разнообрази елементи. По амбициозни решения могат да се постигнат чрез сканиране на фотоснимки, постери, диапозитиви. В този случай често се налага допълнителна обработка на сканираното изображение със средствата на познатите графични редактори. Създаването на изцяло оригинални висококачествени изображения се постига най-лесно с помощта на цифрова камера. Заснетите кадри се прехвърлят директно в компютър в избран графичен формат. Наличието на CDROM в компютърната конфигурация позволява използването и на PhotoCD format от който лесно цифровите кадри могат да бъдат презаписани в познатите GIF, JPEG или PNG.