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

Графичните файлови формати, които се поддържат от най-популярните уеб браузъри, са: Графичен формат за обмен (GIF), Съвместна фотографска експертна група (JPEG), Преносима мрежова графика (PNG) и Векторна графика. Някои свойства на графичните файлове:

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

GIF е основан през 1980 г. и е приет от уеб дизайнерите в началото на 1990 г. като основен графичен формат за уеб страници. GIF файловете използват алгоритъм за компресиране, който прави размера на файла малък за бързо зареждане. GIF е ограничен до 256 цвята (8 бита), поддържа прозрачност и преплетени графики. Също така е възможно да се създават анимирани графики с помощта на този формат. Всички браузъри могат да показват GIF файлове без проблеми.

Предимства на GIF файловете:

• Най-широко поддържаният графичен формат
• Диаграмите изглеждат по-добре в този формат
• Поддръжка за прозрачност

Файловете са компресирани, но поддържат "истински цветове" (24 бита) и са предпочитаният формат за снимки, където качеството е много важно. JPEG поддържа прогресивен формат, който ви позволява почти моментално да видите изображението, което ще се подобри като качество, когато изтеглянето приключи.

За разлика от GIF файловете, уеб дизайнерите могат да управляват компресирани JPEG файлове, което позволява различни нива на качество на изображението и размер на файла.

Предимства на JPEG:

• По-голяма компресия означава по-бързи скорости на изтегляне.
• Създава отлично качество за снимки и сложни рисунки.
• Поддръжка на 24-битов цвят.

PNG е сравнително нов формат, който беше въведен като алтернатива за GIF файлове. PNG поддържа до 24 бита цвят, прозрачност, тъкане и може да съдържа кратко текстово описание на изображението, което се използва от търсачките.

Предимства на PNG:

• Преодолява 8-битовите цветови ограничения на GIF
• Позволява текстово описание на изображения за търсачките
• Поддържа прозрачност
• Схемите изглеждат по-добре от JPEG

Векторна графика

Повечето уеб графики са растерно изображениеили модел, който се състои от мрежа от цветни пиксели. Илюстрациите трябва да бъдат създадени във векторна графика, която се състои от математическо описание на всеки елемент, който съставлява формите на линиите и цветовете на изображението. Векторните графики се създават с помощта на програми като Adobe Illustratorили CorelDRAW. Векторната графика трябва да бъде преобразувана във всеки GIF, JPEG или PNG формат за използване на уеб страници.

Какъв формат трябва да се използва?

Уеб дизайнерът може да избере GIF или JPEG формат за повечето приложения. Но тъй като GIF файловете обикновено са малки в сравнение с размерите на JPEG файлове, повечето уеб дизайнери ще използват GIF формата за фонове, кутии, рамки и всяка друга графика, която изглежда страхотно с 8-битов цвят.

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

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

Структура на етикета с атрибута SRC изглежда така:

.

Ако графичният файл с име Institute се намира в същата папка като уеб страницата, тогава, за да го поставите, трябва да напишете:

.

Формат на името на файла

За да поставите графичен файл с име MINSK, намиращ се в D:\Collection\Cities\MINSK.GIF, напишете .

С етикет уеб страницата хоства графичен файл, намиращ се на друг компютър в глобалната мрежа "Интернет".

За да създадете уеб страница със снимка на нашия институт, която е показана на фиг. 4.1, трябва да въведете следния HTML код:

Нашият институт

Ориз. 4.1. Уеб страница със снимка на института

В горния пример височината на снимката (HEIGHT) е 200 пиксела, а ширината (WIDTH) е 300 пиксела. За да поставите снимката, се създава абзац с централно подравняване.

хоризонтални линии

Поставянето на хоризонтални линии на уеб страница се извършва с помощта на един етикет

---

. Атрибутите SIZE, WIDTH, COLOR и ALIGN променят съответно дебелината, ширината, цвета и подравняването на линиите.

Разгледайте няколко примера, обясняващи разположението на хоризонталните линии:

1.

---

- хоризонтална линияцяла страница с дебелина 2 пиксела.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – хоризонтална зелена линия с дебелина 15px, ширина 200px, подравнена вдясно.

3.

---

- хоризонтална линия със син цвят върху цялата страница с дебелина 25 пиксела.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – червена хоризонтална линия с дебелина 20 пиксела, ширина 300 пиксела, подравнена вляво.

Съпоставянето на линиите за четирите записани примера е показано на фиг. 4.2.

Ориз. 4.2. Редове на уеб страница

ТАБЛИЦИ

Създаване на таблици

Таблицата е създадена с помощта на сдвоен етикет

… . Този таг създава таблица на мястото, където е добавен
в HTML код.

Всяка таблица е съставена от редове, а редовете са съставени от клетки. Следните тагове се използват за формиране на редове и клетки на таблицата:

... – нова линия;

... – заглавна клетка;

... е нормална клетка от таблица.

Тези тагове се записват вътре в тага за двойка

… .

Таблицата се оформя ред по ред - първо се посочва един ред и в него се посочва необходимия брой клетки, след това вторият ред и т.н.

За да получите таблицата, показана на фиг. 5.1, трябва да въведете следния HTML код:

Ориз. 5.1. Таблица страница

Текстът в клетките на заглавките на таблицата (Фиг. 5.1) се показва с полу-удебелен шрифт с подравняване към центъра на клетката, докато в обикновените клетки текстът не се маркира и е подравнен вляво.

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

автомобили	Цена	Форд	5000	Голф	6000

съдържа атрибута BORDER със стойност "1". Това означава, че в таблицата, показана на фиг. 5.1, дебелината на външната граница е
1 пиксел. Ако пишете

… ,

тогава дебелината на външната граница ще бъде 6 пиксела. За да не се показват границите на таблицата, е необходимо да зададете стойност равна на 0 на атрибута BORDER или просто да пропуснете този атрибут.

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

У дома

Поръчайте сайт и правете бизнес!

Тази фраза може да се чуе и види в много сайтове и не е напразно!

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

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

И това е печеливш начин за ефективно и същевременно просто и визуално представяне на вашите идеи или разработки пред най-широка аудитория. И днес уеб документите, написани на езика за маркиране на хипертекст HTML, продължават да бъдат основната форма за представяне на данни в уеб средата.

Основните предимства на HTML са:

• простота, която ви позволява да научите HTML за възможно най-кратко време.
• възможността да създавате свои собствени уеб страници
• и HTML работи абсолютно еднакво на всички платформи, които съществуват днес, няма нужда да купувате допълнителен хардуер. И е достатъчно да използвате всеки наличен текстов редактор, като Notepad.

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

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

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

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

Двата най-често използвани формата за изображения в Интернет са GIF и JPEG. Разработен и наименуван от групата JPEG (Joint Photographic Experts Group), той обикновено се използва за запазване на изображения с плавни цветови преходи, като например снимки.

Почти всички други графични елементи се записват във формат GIF (Graphics Interchange Format), формат за обмен на графични данни. В момента има друг нов графичен формат, който набира популярност: PNG (Portable Network Graphics). мрежова графика). Очаква се с течение на времето той да замени GIF формата. Въпреки това, не бързайте да запазвате отново всичките си графични файлове в този формат, докато той все още не се поддържа от всички браузъри.

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

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> Първи изображения e> Тази графика беше добавена към първата ми уеб страница. p >

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

Следният пример за HTML код показва как атрибутът alt се добавя вътре в тага . Подобно на атрибута src, атрибутът alt съобщава на уеб браузъра допълнителна информация за изображението и винаги може да се използва заедно с таг. .

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

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

Въпреки че атрибутът alt може да бъде дефиниран за всеки таг , внимавайте да не присвоите неподходящи текстови съобщения на някои графични елементи. Например, няма смисъл да добавяте алтернативни текстови етикети към различни елементи външен дизайнуеб страници. За да избегнете такива грешки, можете да зададете атрибута alt на такива елементи на празна стойност (alt=” ”). Ако не зададете други стойности на атрибути, браузърът ще изобрази изображението в оригиналния му размер, подравнявайки горния край на изображението с горния край на съседния текстов низ. Можете да промените и двете настройки с помощта на етикети на таблица със стилове.

Атрибути на изображението
За етикет Предоставени са атрибути, които ви позволяват да промените размера на изображението. Някои от тези атрибути са изброени по-долу.
височина- Посочено в пиксели или проценти - Указва височината на изображението
ширина— Посочено в пиксели или проценти — Указва ширината на изображението.

Регулиране на височината и ширината на изображението
Размерите на изображение, поставено на уеб страница, могат да бъдат зададени с помощта на атрибутите за височина и ширина. 3 стойностите на тези атрибути се задават или като фиксирани количествапиксели или като процент спрямо размерите на страницата. Разгледайте HTML кода по-долу. В първия етикет размери оригинално изображение, които вече сте виждали в предишните изображения на този урок, са зададени на 60 пиксела вертикално и 60 пиксела хоризонтално. Във втория таг ширината на същото изображение е зададена на 6% от ширината на страницата, а височината на 10% от височината на страницата. Фигурата показва как изглеждат и двете изображения в прозореца на браузъра.

Когато показва изображение в своя прозорец, браузърът обработва еднакво добре както пикселните, така и процентните стойности. Имайте предвид обаче, че компютрите на посетителите на вашата уеб страница може да са настроени на различна разделителна способност на екрана от тази, зададена за вашия монитор. Какво следва от това? Например разделителната способност на монитора е зададена на 800x600. В предишния пример графиката, добавена към уеб страницата, беше зададена на ширина от 6% от ширината на страницата, което би било 48 пиксела при тази резолюция. Ако гледате същото изображение на монитор с разделителна способност 1024x800, посочените 6% от ширината на страницата вече ще съответстват на ширина от 61 пиксела.

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

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

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

Подравняване на текст и графики
Атрибутът align на тага ви позволява да подравните изображението към десния (дясна стойност) или левия (лява стойност) край на текстовия низ. Примери за това как да използвате този атрибут са показани на фигурата.

Същият атрибут може да се използва и за вертикално подравняване на изображението (отново спрямо текстовия ред). Може да приеме три други стойности отгоре, отдолу и в центъра. Ако атрибутът за подравняване е зададен на върха, горната част на изображението се подравнява с горната част на всеки околен текст. Ако атрибутът за подравняване е зададен на bottom, долният ръб на изображението се подравнява с долния ръб на околния текст. Ако атрибутът за подравняване е зададен на център, центърът на изображението се подравнява спрямо центъра на текстовия низ.

Използване на изображения като връзки
Изображенията са добри за нещо повече от дизайн на уеб страница. Те могат успешно да се използват като хипервръзки към други документи. В HTML тази задача е лесна, защото изображенията се преобразуват в хипервръзки по абсолютно същия начин като етикетите. За целта трябва да приложите и тага, като в него оградите елемента от уеб страницата, който трябва да стане връзка към друг документ. По този начин, ако трябва да се последва хипервръзка след щракване върху някое изображение, тагът трябва да бъде затворен в тага на това изображение.

a>

В този случай, след като посетител на уеб страницата задържи курсора на мишката над това изображение, текстовото съобщение „Това е моят автопортрет!“ ще се покаже до курсора. Щракването върху изображението ще отвори документа DOC2.htm, към който сочи хипервръзката.

Миниатюри на изображения
Друг често срещан начин за използване на възможността за хипервръзки на HTML е използването на едно изображение за навигиране към друго. За какво е? Факт е, че доста често размерът на изображенията, които искате да публикувате на уеб страница, е твърде голям и няма гаранция, че посетителите ще имат търпението да ги изчакат да приключат с изтеглянето. В такива случаи се създава по-малко копие на оригиналното изображение, наречено миниатюра, което браузърът може да зареди много по-бързо. Ако посетителят се интересува от изображението и иска да изтегли пълното му копие, той ще трябва само да кликне върху тази миниатюра. Ето как изглеждат съответните HTML кодове.

a>

Както можете да видите, щракването върху изображението thumbnail.jpg ще отвори друг файл с изображение (image.jpg). Текстов низ, дадено като стойност на атрибута alt, казва на посетителя как да отвори основното изображение.

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

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

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

Тъй като атрибутът alt е толкова важен (тъй като се препоръчва да го дефинирате за всеки таг , бъдете внимателни, когато го използвате. Уверете се, че съдържанието на текстовото съобщение винаги съответства на самото изображение, в противен случай посетителите на вашата страница могат да бъдат подведени. Същата забележка важи и обратно: уверете се, че изображенията съответстват на текстовата информация, представена на уеб страницата. Снимка на самолет би била подходяща за сайт за пътуване със самолет, но напълно излишна за сайт за диви животни.

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

Ако изображението, показано на уеб страницата, не е защитено с авторски права, можете да го копирате в паметта на вашия компютър. За да направите това, просто щракнете върху това изображение Кликнете с десния бутонщракнете и изберете Save Image As от менюто, което се отваря. След като запазите изображението на вашия компютър, можете да го използвате по-нататък като всеки друг чертеж.

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

Файлови формати

Два формата са широко използвани за уеб графики - PNG и JPEG. Тяхната универсалност, многофункционалност, малък обем изходни файловес достатъчно качество за сайта, те са им служили добре, всъщност ги определят като стандарт за уеб изображения. В допълнение към тях в сайтовете се използват GIF и SVG формати.

PNG-8 формат

PNG-8 (преносима мрежова графика, преносима мрежова графика) е безплатен формат, създаден да замени GIF, в който за дълго времеизползвани са патентовани алгоритми.

Особености

• Той използва 8-битова палитра (256 цвята) в изображението, за което получи номер осем в името си. В този случай можете да изберете колко цвята да бъдат записани във файла - от 2 до 256.
• За разлика от GIF, той не показва анимация.

Област на приложение

PNG-24 формат

PNG-24 е формат, подобен на PNG-8, но използва 24-битова цветова гама. Подобно на JPEG, запазва яркостта и оттенъка на цветовете във снимките. Подобно на GIF и PNG-8, запазва детайлите на изображението като щрихови изображения, лога или илюстрации.

Особености

• Използва приблизително 16,7 милиона цвята на файл, поради което този формат се използва за пълноцветни изображения.
• Поддържа многостепенна прозрачност, което ви позволява да създавате плавен преходот прозрачната област на изображението до цветната област.
• Поради факта, че използваният алгоритъм за компресиране запазва всички цветове и пиксели в изображението непроменени, в сравнение с други формати, PNG-24 има най-големия краен размер на графичния файл.

Област на приложение

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

JPEG формат

JPEG (Joint Photographic Experts Group) е популярен файлов формат за изображения, който се използва широко за създаване на уебсайтове и съхраняване на снимки. JPEG поддържа 24-битов цвят и запазва яркостта и нюанса на цветовете в снимките непокътнати. Този форматнаречена компресия със загуби, тъй като JPEG алгоритъмът избирателно отхвърля данните. Методът на компресиране може да доведе до изкривяване на изображението, особено ако съдържа текст, фини детайли или остри ръбове. JPEG форматне поддържа прозрачност. Когато запишете снимка в този формат, прозрачните пиксели се запълват с посочения цвят.

Особености

• Броят на цветовете в изображението е приблизително 16,7 милиона, което е напълно достатъчно за запазване фотографско качествоИзображения.
• Основната характеристика на формата е "качество", което ви позволява да контролирате крайния размер на файла. Качеството се измерва от 0 до 100, колкото по-висока е стойността, толкова по-добра е картината, но размерът на файла също се увеличава.
• Поддържа технология, наречена прогресивен JPEG, при която версия с ниска разделителна способност на изображение се появява в прозореца за изглед, преди самото изображение да се зареди напълно.

Област на приложение

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

GIF формат

GIF (Graphics Interchange Format) е графичен файлов формат, широко използван за създаване на анимирани изображения. GIF използва 8-битов цвят и ефективно компресира плътно оцветени области, като същевременно запазва детайлите на изображението.

Особености

• Броят на цветовете в едно изображение може да бъде от 2 до 256, но може да бъде всеки цвят от 24-битовата палитра. GIF файлът може да съдържа прозрачни области. Ако се използва фон, различен от бял, той ще се показва през „дупки“ в изображението.
• Поддържа смяна на изображения кадър по кадър, което прави формата популярен за създаване на прости анимации.
• Използва метод за компресия без загуби

Област на приложение

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

SVG формат

SVG (мащабируема векторна графика) - векторен формат, при който изображението не се състои от пиксели, а от обекти и криви. Поради тази причина не е подходящ за растерни снимки, състоящи се от точки, но е отличен за илюстрации, съдържащи отчетливи контури.

Особености

• Изображенията във формат SVG могат да бъдат мащабирани колкото искате, без да губите качеството на изображението.
• Размерът на файла обикновено е малък.
• Поддържа анимация и интерактивност.

Област на приложение

Текст, лога, илюстрации с ясни ръбове.

Добавяне на изображение

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

"alt="(!LANG:<альтернативный текст>!}">

И двата атрибута src и alt са задължителни.

Атрибутът src задава пътя към графичния файл; за указването му могат да се използват както абсолютни, така и относителни адреси. След това помислете за няколко различни начини, как да определите пътя до изображение, за да го поставите на уеб страница. Като пример, нека вземем файл, наречен target.png, който се съхранява в папката с изображения на корена на сайта.

http://example.ru/images/target.png
Ако адресът започва с протокол (http:// или https://), това е абсолютен адрес. Изображението винаги ще се зарежда от посочен адресв интернет, дори ако запазите уеб страницата на вашия локален компютър.

//example.ru/images/target.png
Това е абсолютният адрес на изображението без посочване на протокола. Браузърът самостоятелно ще замени необходимия протокол, на който работи сайтът (http:// или https://). Моля, обърнете внимание, че тези видове адреси не работят на локални уеб страници, а само в Интернет под контрола на уеб сървър.

/images/target.png
Ако в началото на адреса има наклонена черта (/), това означава, че папката с изображения се намира в корена на сайта. Една папка може да бъде вложена в друга, така че пътят може да се увеличи. Например /assets/images/target.png означава, че папката с активи се намира в основата на сайта, съдържа папката с изображения, вътре в която се намира файлът target.png.

../images/target.png
Двете наклонени черти (../) показват, че папката с изображения е едно ниво по-високо в структурата на папките от HTML документа. На фиг. Фигура 1 показва файла source.html, в който трябва да се вмъкне изображението target.png.

Ориз. 1. Поставяне на файл

изображения/target.png
Името на папката без точки в началото на адреса показва, че HTML документът и папката с изображението са на едно ниво (фиг. 2).

Ориз. 2. Поставяне на файл

target.png
Името на един файл показва, че изображението и уеб страницата се намират на едно и също място (Фигура 3).

Ориз. 3. Поставяне на файл

Пример 1 показва няколко начина за добавяне на картина към уеб страница.

Пример 1: Добавяне на изображения

Алтернативен текст

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

Атрибутът alt трябва да описва съдържанието на изображението и ако изображението изпълнява декоративна функция и не носи никакво смислено значение, оставете alt празен (пример 2).

Пример 2: Използване на alt

Ако изображенията изискват видима подсказка, тогава трябва да използвате глобалния атрибут за заглавие, който може да се добави към всеки елемент, не само към изображения. Когато задържите курсора на мишката върху изображението, ще се появи текст, съдържащ стойността на атрибута title (пример 3).

Пример 3: Използване на заглавие

Появата на подсказката зависи от конкретния браузър и не може да бъде променяна. На фиг. 2 показва подсказка в браузъра Firefox.

Ориз. 2. Тип подсказка

Преоразмеряване на картина

За да промените размера на изображението на елемент предоставени са атрибути width (ширина) и height (височина). Като стойност се използват пиксели или проценти. Пример 4 показва как да добавите тези атрибути към .

Пример 4. Начертаване на размери

Атрибутите за ширина и височина не са задължителни, след зареждане на изображението браузърът автоматично ще зададе оригиналния му размер. По принцип тези атрибути се използват за следните цели:

• запазване на място за снимка;
• намаляване на размера на големите снимки;
• подобряване на качеството на изображението за Retina дисплеи.

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

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

Retina дисплеите се характеризират с висока плътност на пикселите и детайлност на изображението, така че обикновените изображения изглеждат малко замъглени върху тях. За да се подобри качеството им, снимките са удвоени по размер. Например, ако една уеб страница изисква снимка с ширина 400 пиксела, тогава вземаме снимка с ширина 800 пиксела, но оставяме ширина 400 пиксела в стойността на атрибута width.

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

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

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

В такива случаи има трудности с височината, тъй като височината на изображението като процент се взема предвид само когато височината на неговия родител е изрично дефинирана. Ако височината на родителския елемент не е посочена по никакъв начин, тогава запис като height="100%" се игнорира.