Когато запазвате изображения в графична програма, имате различни графични формати на разположение. Но кой да изберете, когато става въпрос за вграждане на изображението в уебсайт? 
За да покажете изображение на уебсайта си, имате избор между три формата.
• GIF
• JPEG
• PNG
Но кой формат да изберете за коя цел? Предпочитате ли GIF или PNG за снимки? Първо, кратък преглед на възможностите на всяко от форматите.
| Характеристика | JPEG | GIF | PNG |
| Запазване без загуба | Не | Да | Да |
| Цветове | 24 бита | индексиран до 256 | индексиран (до 256), 24 бита или 48 бита |
| Прозрачност | Не | Да, един цвят | Да |
| Прогресивно зареждане или интерлейс | Да | Да | Да |
| Анимации | Не | Да | Не |
Този кратък преглед вече показва различните характеристики на форматите. Не изненадва, че някои формати са по-подходящи за определени цели. Точно на този етап, следващата секция стъпва на сцената. Там ще бъде показано кога най-добре да използвате кой формат.
Снимки
Няма съмнение, JPEG е подходящ за снимки. Тук изображенията могат да се компресират много добре, като качеството може да се избира вариантно. Тук можете да намерите правилния баланс между качество и скорост на компресия.
Скрийншотове/Диаграми
За това PNG форматът се оказва най-подходящ. PNG също е интересен за технически чертежи, планове и т.н. PNG може също да се използва за изображения, при които работите с прозрачни области.
Шрифтове/Лога
Ако в логото си имате текст или искате да покажете шрифт, трябва да използвате GIF или PNG. Поради по-добрата ефективност, обикновено се предпочита PNG. Всяко друго изображение е неподходящо за показване на шрифтове, тъй като ръбовете се показват нечисто.
Прозрачност
Когато става въпрос за показване на прозрачни области, JPEG отпада от самото начало. Остават GIF и PNG. Но кой от тези формати да изберете, когато става въпрос за прозрачност? Въпреки че GIF фактически може да се справи с прозрачност, резултатите обикновено са нечисти. Един пиксел в GIF формата може да бъде напълно видим или напълно прозрачен. Този проблем не възниква с PNG формата. Този формат разполага с допълнителен алфа канал, който позволява по-добри резултати за прозрачност.
Вграждане на изображения
Графиките могат да бъдат вградени чрез елемента img. (Моля, обърнете внимание, че в момента изображенията често се вграждат чрез CSS. Подробна информация за CSS все още предстои. Показаният начин на HTML е напълно стандартен и може да се използва безпроблемно и в HTML5.)
<img src="logo.png" alt="PSD-Tutorials.de" />
Когато става въпрос за img, това е самостоятелен елемент. Чрез съответните атрибути може да се опише по-подробно изображението. Най-важният атрибут е със сигурност src. Този атрибут определя изображението, което трябва да бъде вградено. В показания пример предполагам, че графиката logo.png се намира в същата директория като HTML файла, в който е дефиниран елемента img.
За да се покажат изображенията, трябва да се посочи правилният път към тях. HTML предлага различни начини за референциране.
• Абсолютни пътища
• Абсолютни пътеки, относително базисния адрес
• Относителни пътеки, относително базисния адрес
Първо към абсолютните пътища. Този вариант се използва обикновено в случаите, когато изображението не се намира на собствения ви сървър. Ако искате да вградите познатата на вас PSD-Tutorials.de пеперуда в уебсайта си, теоретично можете да я заредите директно от сървъра, на който се намира. Първо, определете пътя към изображението. Това става най-лесно, като щракнете с десния бутон върху изображението в браузъра и след това изберете Копиране на URL на изображението.
Това, което е вече копирано в клипборда, би трябвало на края да изглежда така:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Това е пълното URL на изображението. Тази информация вече е достатъчна, за да вградите изображението.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
Можем да определим пълния път към изображението в атрибута src.
Проблемът с тези абсолютни пътища е, че нямате истински контрол върху вграденото съдържание. Ако изображението, на което се позовавате, бъде изтрито от сървъра или преместено в друга директория, ще възникне грешка в показването.
Затова абсолютното рефериране трябва да бъде наистина изключение.
Абсолютни пътни указания относно основния адрес
Този вариант е подходящ винаги, когато картинката е на същия компютър/сървър като HTML файлът и може да се достъпва по текущият протокол. Това изглежда сложно, но не е.
Например:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Това е пълният адрес. Следващата част е абсолютното пътно указание.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Това абсолютно пътно указание се отнася относно базовия адрес http://4eck-media.de.
Релативни пътни указания относно основния адрес
Представеният сега вариант е вероятно най-използвания. Винаги се взима текущият път като референтна точка, от която се направя адресирането. Представени са и няколко примера. Нека предположим, че съществува файлът index.htm,, в който искате да вградите изображение. Допълнително, на същото ниво съществува папката images, в която се намира изображението.
index.htm
images
--logo.png
При този случай, извикването в атрибута src ще изглежда по следния начин:
src="images/logo.png"
А как ще изглежда всичко, ако изображението се намира в директория, която е над HTML файла?
project
--images
-----logo.png
--archive
-----index.htm
В този случай, index.htm е на едно ниво под изображението, което трябва да се вгради logo.png.
src="../images/logo.png"
Тук синтаксисът означава: Иди на едно ниво нагоре, премини в папката images и покажи logo.png.
project
--images
----logo.png
----2013
------januar
--------index.htm
Тук синтаксисът би изглеждал така:
src="../../images/logo.png"
Изображението logo.png в този случай лежи на две нива нагоре от index.htm в папката images.
Предимството на релативните пътни указания е тяхната гъвкавост. Можете например да разработвате проекта локално и след това да го качите на "реален" сървър. Пътищата остават непроменени.
