Изображения в HTML

Изображенията – картинки, фотографии и др., анимирани или статични, са важна част от почти всеки сайт в Уеб. Добре подбрани и разположени, те могат да „освежат“ HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата „тежка“ и трудна за зареждане.

Формати на файлове за изображения

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

GIF (Graphics Interchange Format) – растерен формат

Изображенията в GIF формат се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат „сложни“ оттенъци и светлосенки.

Файловете с разширение GIF имат две важни предимства пред другите формати:

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

JPEG/JPG (Joint Photographic Experts Group) – растерен формат

Форматът JPEG или JPG (и двете разширения са валидни и равностойни), се използва предимно за висококачествени фотографии.

Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на GIF формата, но за сметка на това JPG файлът не може да бъде анимиран, нито да съдържа прозрачни елементи.

PNG (Portable Network Graphics) – растерен формат

Съществува и още един файлов формат – PNG, който съдържа в себе си най-доброто от GIF и JPG форматите. PNG форматът надгражда gif формата. Има два типа PNG формат – PNG-8 и PNG-24. Първият поддържа само 256 цвята, затова ще ви разкажем повече за втория. PNG-24 поддържа богата гама от цветове и прозрачност с по-добри качества от тази на GIF формата. Подходящ е за рисувани изображения, навигационни бутони, лога. При по-висока резолюция на изображението и голямо разнообразие от цветове, размерът на файла става неоптимално голям и може да затрудни работата на вашия сайт.

В Блога: ⇒ Най-използваните формати изображения в уеб

Сваляне на изображения от Уеб, модифициране и създаване на изображения

В уеб могат да се намерят милиони изображения. Някои от тях са безплатни, други не. Много търсачки имат специална настройка за търсене на изображения. Безплатни изображения може да намерите и като търсите по ключови думи, например free images, free animated gifs, free pictures, free graphics и т.н.

Можете да прехвърлите от интернет на личния си компютър почти всяко изображение по следния начин: поставете курсора на мишката върху изображението, щракнете с десния бутон и от появилото се меню изберете „Save Picture As“. Ще се появи прозорец, в който трябва да напишете избрано от вас име на изображението и да натиснете бутона „Save“.

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

Съществуват и огромно количество програми за създаване на изображения и за обработка на съществуващи изображения. Една от най-популярните е Photoshop, но тя не е безплатна. Безплатен вариант на Photoshop е програмата с отворен код GIMP (www.gimp.org). Може да потърсите безплатни програми за обработка на изображения в търсачките.

В мрежата има и голямо количество графики, специално предназначени за HTML-страници: бутони, стрелки, линии, анимирани надписи, интерфейси, фонови графики и т.н. Повечето от тях се предлагат безплатно. Потърсете такива графики чрез ключови думи като free graphics, free clip art, free buttons, free backgrounds, free interfaces и т.н.

В интернет ще намерите и безплатни програми, чрез които можете online да създадете собствени бутони и лого (надпис) за страницата си например freelogodesign.org.

Показване на изображения в уеб страницата

Най-простия код, с който може да покажете изображение на страницата си е следния:

<img src="име на изображение, например example.png" />

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

Ако отидете върху дадено изображение и кликнете върху него с десния бутон на мишката, ще се появи контролен панел, от който изберете „Properties“. Ще се появи панел, на който ще видите характеристиките на изображението – точния му адрес (URL) в уеб, неговите размери – ширина и височина, и неговата „тежест“ в байтове.

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

<img src="example.png" />

По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изображението вдясно или в средата на страницата можем да използваме тага <div> и CSS стил със съответните стойности – left (което е и по подразбиране – отляво), right (помества изображението вдясно) и center (центрира изображението).

Например за да центрираме изображение ще напишем:

<div>
<img src="example.png" />
</div>

Атрибути на тага за изображение

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

1. Атрибутите width и height задават съответно ширина и височина на изображението в пиксели.

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

2. Атрибутът alt задава алтернативно название на изображението.

Понякога, въпреки че страницата е заредена, изображенията не се появяват. Освен това някои потребители настройват браузърите си да не изтеглят изображенията, за да зареждат по-бързо страниците. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението, се използва атрибутът alt=“Произволно описание на изображението“. Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут и по още една причина – търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви.

Ако комбинираме горните атрибути, ще получим следния код:

<img title="Описание на изображението" src="example.png" width="200"
height="90" alt="Описание на изображението" />

Можете да видите алтернативния текст дори и изображението да се е заредило, ако сте го поставили в атрибута title – отидете с мишката върху него и я оставете неподвижна за няколко секунди – алтернативният текст ще се появи в малък отделен прозорец.

Рамка около изображението

Чрез CSS стил може да се зададе показването на рамка около изображението. Ако желаете да зададете рамка на изображението си например с дебелина 8 пиксела може да използвате стила:

<img src="example.png" />

В браузъра изображението ще изглежда така:

Подравняване на изображение спрямо текст

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

Сега ще научите как да правите така, че текстът да „обтича“ изображението.

Този ефект се постига чрез CSS стил и параметъра float, който трябва да се намира в тага img и да му се зададе някаква стойност.

– Например ако зададем на стойност left, кодът заедно с текста ще изглежда така:

<img src="example.png" width="200" height="90" alt="Описание на изображението" /> текст текст текст текст текст текст

Изображението ще е разположено в лявата част на страницата, а текста ще го обтича отдясно.

Същият ефект се постига и когато се зададе стойност right, само че в този случай изображението е изместено в десния край на екрана, а текстът го „обтича“ отляво.

Ако сте задали стойност left или right, така че текста да „обтича“ изображението, може да поискате да оставите по-голямо от подразбиращото се разстояние между изображението и текста. Това се прави с параметъра за задаване на свободно пространство около изображението – padding.

Например ако сте задали left и искате да добавите 8 пиксела свободно пространство отгоре и отдолу и 16 пиксела отляво и отдясно, трябва да напишете:

<img src="example.png" width="200" height="90" alt="Описание на изображението" style="float:left;padding:8px 16px;" />

Използване на изображение като хипервръзка

Нека да направим нашето изображение връзка към СуперХостинг.БГ. Кодът е следния:

<a href="https://superhosting.bg"><img src="example.png" width="200" height="90" alt="Описание на изображението"></a>
Обновена: 12.07.2022

Беше ли Ви полезна тази статия?

Вижте още