Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Работа с изображения - <img /> 9

Сподели урока

Изображенията ни помагат да “кажем” неща, които много трудно бихме могли да опишем с думи. Както гласи една известна народна мъдрост – “Една снимка казва повече от 1000 думи”. Може би това е причината голяма част от уеб сайтовете да използват изображения не само като средство за комуникация, но и за обогатяване на дизайна.

В този урок ще разгледаме основните техники за работа с изображения в xHTML.

В урока Разлики между HTML и xHTML научихме за така наречените “празни” елементи. Това са елементи, които нямат затварящ таг. Те се затварят като се постави дясно наклонена черта (/) преди края на отварящия таг.

Елемента img спада към групата на тези “празни” елементи.

В този урок ще разгледаме:

Употреба

За да поставиш изображение на своята уеб страница, трябва да използваш елемента img. Този елемент има два задължителни атрибута: src и alt.

В Разлики между block и inline елементи говорихме за видовете инлайн (inline) и блокови (block) елементи. Img е от групата на инлайн елементите.

Визуално структурата на img елемента може да бъде представен така:

Структура на img елемента

Кратко обяснение:

  1. Начало на img елемента. От урока знаем, че символа < маркира началото на отварящия таг.
  2. Името на елемента, който ще използваме. В случая искаме да поставим изображение затова въвеждаме img (съкратено от image).
  3. src е един от задължителните атрибути на img. src е съкратено от английската дума source, което значи “източник”. Стойността на src е пътя (адреса) до желаното изображение последван от името на файла и неговото разширение. Когато html документа и изображението са в една и съща папка, директно пишем името на изображението и неговото файлово разширение.
  4. alt е втория задължителен атрибут. alt е съкратено от английската дума alternative, което значи “алтернатива”. Стойноста на alt атрибута е алтернативен текст, който се показва, в случай че изображението не успее да се покаже (или да зареди).
  5. Тъй като img елемента е част от групата на така наречените “празни” елементи, то той трябва да бъде “затворен” с дясно наклонена черта (/), преди края на отварящия таг.
  6. Край на img елемента. Символа > маркира края на отварящия таг, а в случая маркира и края на самият елемент.

Уеб изображения - поддържани файлови формати

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

Най-широко поддържаните формати на изображения от повечето браузъри и операционни системи са JPEG (с разширение .jpg), GIF (.gif) и PNG (.png). В последните 1-2 години популярен стана SVG формата, но той е все още относително нов и се поддържа частично.

Всеки от тези формати има своите предимства и недостатъци. В някои случаи ще се нуждаеш от png (или дори gif) изображения, но съвета ми е като цяло се придържаш към jpg, защото позволява високо качество на снимката и сравнително малък файлов размер.

Надявам се, че всичко до тук ти е ясно. Сега нека видим как ще го приложим на практика.

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

Стъпка 1

Създай нов документ със Strict Doctype, а в body постави h1 заглавие и кратък текстов параграф. Пробвай се да напишеш кода сам/а, използвайки знанията до сега. В следващата стъпка ще ти покажа моят резултат.

Стъпка 2

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; 
			charset=utf-8" />
		<title>Работа с изображения</title>
	</head>
	<body>
		<h1>Работа с изображения</h1>
		<p>В този урок ще научим как да поставим 
		изображение на нашата уеб страница.</p>
	</body>
</html>
Стъпка 3

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

Изображението е в папката, в която е запазен html документа

В снимката по-горе виждаш, че изображението което ще използвам в този урок се казва “cherven-stol” (1). Неговият тип (в колоната Type) е JPEG, което значи че изображението ще бъде с разширение .jpg. Освен това, колоната Size ни показва размера на файла. В случая той е 126 KB.

Сега нека поставим изображението в страницата.

Стъпка 4

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

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

Като стойност на атрибута alt пишем алтернативния текст. Добра практика е той да описва накратко (с около 5-7 думи) изображението.

Това трябва да изглежда по следния начин:

<p>В този урок ще научим как да поставим 
изображение на нашата уеб страница.</p>
<p><img src="cherven-stol.jpg" alt="Червен стол 
посипан със сняг." /></p>
Стъпка 5

Запази промените и отвори страницата с браузър. Резултата трябва да е следния:

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

Резултата е наистина страхотен.

По подразбиране изображението ще се покаже на страницата в пълния си размер. Ако искаш то да бъде по-малко е най-добре да използваш редактор на изображения (като Photoshop) и да намалиш размера му ръчно.

Сега нека видим как работи alt атрибута.

Стъпка 6

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

За да симулираме един такъв случай нека приемем, че неволно сме допуснали грешка при въвеждането на името на изображението в src атрибута.

Промени кода по-горе като изтриеш някоя произволна буква. Например, вместо “cherven-stol.jpg” като стойност на src, нека оставим “cherven-sto.jpg” (премахнах буквата l):

<p><img src="cherven-sto.jpg" alt="Червен стол 
посипан със сняг." /></p>
Стъпка 7

Запази промяната и отвори отново страницата с браузър. Резултата трябва да е следния:

Когато изображението не успее да зареди, браузъра показва стойността на alt.

В случая “казваме” на браузъра да зареди изображение с името “cherven-sto.jpg”. Той търси в папката да намери файл с такова име, но не успява. При такова стечение на обстоятелствата браузъра решава да покаже текста в alt атрибута.

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

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

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

Надявам се, че всичко до тук ти е ясно. Ако имаш затруднения, задай въпросите си след урока.

Промяна на пътя до изображението

Нека разгледаме вариант, в който изображението се намира на различно място, а не в същата папка, в която е html файла. В този случай в src атрибута трябва да въведем пътя до това “друго” място.

Стъпка 1

В папката, в която се намира html файла създай нова папка и я наименувай images (1). Премести изображението в нея (2).

Създай нова папка images и премести изображението в нея.

Стъпка 2

Промени кода във втория параграф като в src добавиш името на новата папка.

<p><img src="images/cherven-sto.jpg" alt="Червен стол 
посипан със сняг." /></p>
Стъпка 3

Запази промените и отвори страницата с браузър. Резултата трябва да е същия като от по-рано.

Браузъра търси да  зареди изображенеито в папка images.

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

Промяна на размера на изображението

Нека предположим, че нямаш програма с която да промениш размера на изображението, а наистина искаш то да изглежда по-малко (или по-голямо) на страницата. Тогава на помощ идват два допълнителни атрибута – height (височина) и width (ширина). Те не са задължителни и използването им е по избор.

Стъпка 1

В img елемента ще направим малки промени като използваме атрибута width да намалим ширината на снимката на 300px.

Промени кода във втория параграф така:

<p><img src="images/cherven-sto.jpg" alt="Червен стол 
посипан със сняг." width="300px" /></p>
Стъпка 2

Запази промените и отвори страницата с браузър.

Чрез  атрибута width можем да променяме ширината на изображението

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

Стъпка 3

Сега нека променим височината. Промени кода като този път на мястото на width ще използваме height.

<p><img src="images/cherven-sto.jpg" alt="Червен стол 
посипан със сняг." height="100px" /></p>
Стъпка 4

Запази промените и отвори странита с браузър.

Чрез  атрибута height можем да променяме височината на изображението

Сега изображението стана дори още по-малко, защото този път намалихме неговата височина на 100 px. Ширината също се промени.

Забележка Важно е да отбележа, че стойностите на height и width могат да бъде не само в пиксели (px), но и в проценти (%).

Тези два атрибута (height и width) са част от img елемента, но лично аз не ти препоръчвам да разчиташ на тях всеки път, когато искаш да промениш размера на дадено изображение.

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

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

Друга много важна точка е, че когато твоята уеб страница е вече онлайн и приятелите ти искат да я разгледат (ако изображението е с голям размер) времето за зареждане ще бъде по-дълго, защото преди да видят изображението браузъра трябва да го “свали”. Така че, вместо да използваш големи изображения и да им променяш размера с width и height, по-добре (и по-бързо за зареждане) би било предварително да намалиш размера и да използваш изображението в реалния му вид.

Голям недостатък при използването на width и height многократно е в самата поддръжката на уеб страницата. Представи си, че имаш няколко страници и в тях използваш 10 снимки като манипулираш размера им чрез атрибутите width и height. Месец по-късно решаваш, че снимките трябва да бъдат с по-голям размер от настоящия. Тогава трябва ръчно да промениш всеки width и height във всяка страница, което ще ти отнеме страшно много време.

Обобщение

В този урок разгледахме начините за работа с изображения в уеб страница.

Обхванахме доста материал и изпробвахме различни случаи. Надявам се всичко това да ти бъде от полза и да обогати знанията, които вече имаш за xHTML.

Ако имаш допълнителни въпроси и коментари, можеш да ги споделиш след урока.

Използвани снимки

Към урока: Stephen Heron

Към упражненията: Sharon Drummond

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

9 страхотни коментара

  1. 1

    Тони
    12 юни 2012 00:12

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

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

  2. 2

    Джават Ушев (автор)
    12 юни 2012 15:59

    Аз също благодаря за коментара.

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

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

    12 jQuery Image Hover Effects examples and plugins

    jQuery Image Swap Gallery with Just 3 Lines of Code!

  3. 3

    Антон
    30 юли 2012 13:51

    Задължително ли е снимката да е в <p>изображение</p>? Моите са без, вижте тук: http://www.barmagazin.net/chashi-margarita.html Валидира ми го нормално XHTML 1.0 Strict.

    Има ли значение <p>изображение</p> за индексацията на снимки? Проблем ли е, че съм сложил и title="име сходно с това в alt" или индентично с това в alt?

    Ще Ви бъда благодарен, ако ми отговорите. Поздрави.

  4. 4

    Джават Ушев (автор)
    30 юли 2012 17:17

    Здравей. Не е задължително изображението да се поставя в <p> елемент. Това понякога се използва, в случаите когато искаме да обградим дадена снимка с текст. Дали ще бъде в <p> или не е въпрос на личен избор. И в двата случая кода ще бъде валиден и снимката ще бъде индексирана.

    Обърни повече внимание на alt, защото това е най-важния фактор за добрата индексация на едно изображение. Постарай се стойността да бъде кратка (изречение от няколко думи) и да описва добре съдържанието на снимката. Колкото до title, не виждам нищо лошо в използването му, дори и съдържанието да е подобно на alt. Аз лично използвам alt за изображения, а оставям title за линкове.

  5. 5

    Антон
    30 юли 2012 20:10

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

    Поздрави

  6. 6

    Seahawk
    17 септември 2013 05:30

    Едно въпросче, като за начинаещи. Как е по-правилно, когато пишем код и трябва да поставим някакво изображение (например background). Как е по-правилно да се постави? В CSS (backgorund-image ...) или в HTML (img src ...)? Защото някои си поставят изображенията в HTML и съответно ги манипулират чрез CSS. A понякога изображението се поставя директно в CSS. Как e по-правилно?

  7. 7

    Джават Ушев (автор)
    18 септември 2013 14:22

    Здравей, @Seahawk. Разбирам въпроса ти и трябва да кажа, че понякога е трудно да се реши, кой от двата метод би бил по-правилен за използване. Краткият отговор е, че е най-добре да използваш и двата. Всичко зависи от начина, по който ще се използва изображението. Ще ти дам два примера, които аз самия използвам, за да преценя дали да поставя изображението като background или като нормално изображение чрез <src />.

    Пример 1: Имам декоративен елемент (напр. меню или логин форма), който искам да бъде малко по-креативен и нестандартен. За целта ще трябва да използвам едно изображение, за да създам желания стил. Това е идеалното място да поставя изображението като background чрез CSS. Защо? Защото тук изображението е декоративен елемент и не придава смислово значение на съдържанието в страницата. Т.е. дори и да го няма, това не възпрепядства посетителя да разбере правилно съдържанието.

    Пример 2: Създал съм нов урок на Photoshop и искам към всяка стъпка да приложа изображение, което визуално ще покаже постигнатия резултат. Тук ще използвам <src />, за да поставя изображението, защото то придава смисъл не само на съдържанието, но и подобрява страницата от гледна точка на SEO. Т.е. тук изображението играе важна роля и ако по някаква причина не зареди, посетителя няма да може да разбере достатъчно добре съдържанието.

    Надявам се, че тези два примера ти изясниха малко нещата. Като обобщение можеш да използваш следното правило: използвай backgorund-image за декоративни елементи, а <src /> за изображения, които са важни за страницата и посетителя.

  8. 8

    Васил
    21 септември 2015 17:22

    Как може да се сложи върху картинка? Искам върху картинка да сложа по-малка, с която да осъществявам хипервръска.

  9. 9

    Владислав
    18 октомври 2015 19:58

    Как може да се направи така, че примерно изображения към някои от социалните мрежи да играят ролята на хиперлинкове? Примерно ето тази снимка как мога да направя така, че четирите изображения към социалните мрежи да ми бъдат линкове?

Твоят коментар

* - задължителни полета