Най-често срещаните формати на изображения на уеб страници. Графика на уеб страница в HTML. Поставяне на графично изображение от файл

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

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

ключова думаЛЕНТА.

TAPE=1 - Стандартно номериране (1,2,3,4,5, ...)

TAPE=A - Главни букви (A, B, C, D, ...)

TAPE=a - Спешни букви (a, b, c, d, ...)

TAPE=I - римски цифри (I, II, III, IV, ...)

TAPE=i - малки римски цифри (i, ii, iii, iv, ...)

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

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

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

   Играйте всички от горните списъци

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

   Редица тагове се използват за дефиниране на таблици. етикети

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

   
   
   

   HTML тагове за изграждане на таблици:

   Тагове Описание

   и Тези етикети покриват масата. Етикет

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

   показва се като заглавка. Можете също да използвате тагове, за да зададете заглавието. и.

   Етикетите показват текст като заглавия на редове или колони с малко по-голям удебелен шрифт.

   иЕтикетите дефинират всеки ред на таблицата. Етикетпо избор, но прави вашия HTML код по-пълен и разбираем.

   Тази двойка тагове разделя текста на всяка клетка от таблицата.

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

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

   и текст, маркиран с тези тагове,

   и
   и

   следните изображения:

   В допълнение към ключовата дума BGCOLOR има и други начини за контролиране на цвета:

   BORDERCOLOR Промяна на цвета на решетката на таблицата

   BORDERCOLORDARK/ Използва се за промяна на мрежата от

   BORDERCOLORLIGHT за допълнителен триизмерен ефект

   Променете цвета на решетката на таблицата с 3D ефект.

   Урок 12-13.Използване на графики

   Картините и графиките са много важни за WWW. Това е единственият интернет инструмент, който ви позволява да преглеждате изображения и текст на екрана едновременно.

   За да поставите изображение на уеб страница, трябва да знаете как да приложите етикета . Въведете етикет и ключовата дума SRC=, за да укажете коя графика да се зареди.

   

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

   Графика и трафик

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

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

   GIF и JPEG са два от най-популярните формати за изображения и отдавна са де факто стандартите за използване в WWW. И двете са доста универсални, четат се от повечето браузъри и не изискват специални софтуер(или допълнителни модули). GIF и JPEG са формати за растерни изображения, които съответно определят фиксиран формат (резолюция) при показване на такива изображения на екрана. Когато се опитате да мащабирате (предоставено в някои браузъри), растерните (пикселни) изображения губят много качество. За 8-битовия (256-цветен) GIF формат освен това изборът на цветова палитра е сериозен проблем.

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

   Няколко векторни стандарта бяха предложени сравнително наскоро и форматите PGML и VML в момента се разглеждат от World Wide Web Consortium (W3C). Въпреки това Macromedia, която популяризира VML, отдавна е отворила своя векторен формат. Светкавица с ударна вълнана други разработчици и внедри допълнителни модули за преглед на графики в този формат за популярни браузъри.

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

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

   GIF - формат за дизайн

   CompuServe първоначално е предвидил своя GIF формат за интерактивни приложения в ограничения капацитет на стандартната графика на персонален компютър. Първоначално беше 4-битов, а по-късно 8-битов цветно картографиран растерен формат, който поддържаше максимум 256 цвята. Едно от съществените предимства на формата е, че изображенията могат да бъдат индексирани към определена палитра (набор от цветове), докато JPEG изображенията не могат да бъдат "свързани" с палитра и тяхното "правилно" показване не винаги е възможно. Това свойство е особено важно за онези разработчици, които използват индексиране на палитри, за да оптимизират изобразяването на изображения за всички платформи без изключение (било то PC, Mac, Web-TV или други), независимо от това с каква дълбочина на цвета работи тази или онази система. Тази гъвкавост може да бъде постигната с ограничена палитра от 216 цвята, която включва всички обичайни цветове, използвани както в Windows, така и например в MacOS. Проектирането на сайт в универсална палитра гарантира последователен, междуплатформен и хардуерно независим дисплей. Освен това GIF форматът използва схема за компресия без загуби (с прост алгоритъм за кодиране на повторение: поредица от байтове от един и същи цвят се заменя с дума от два байта, единият от които съдържа шаблон за запълване, а вторият определя числото на повторения), така че графичните данни в този формат не губят информация в процеса на компресиране и възстановяване.

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

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

   Основният критерий за избор на GIF формат: ако вие сами сте нарисували картина в графичен пакет като Photoshop или Painter, който има големи области с един и същи цвят, или сте обработили съществуващо изображение и искате да поддържате висок контраст (необходимо, например, когато показвате текст), след това го запазете в този формат (особено за черно-бели рисунки или чертежи с лош цвят).

   За снимки, видео рамки или други пълноцветни изображения с плавни цветови преходи (градиенти) използвайте JPEG формат.

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

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

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

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

   JPEG - формат за снимки и видео кадри

   Форматът JPEG получи името си от съкращението на комитета на Joint Photographic Experts Group (Съвместен комитет на фотографските експерти), който създаде този стандарт в края на 80-те и началото на 90-те години. JPEG форматът се основава на алгоритъм за компресия със загуби (дискретно косинусово преобразуване), с помощта на който вашето изображение се разделя на региони (обикновено квадратчета 8x8 пиксела), в рамките на които разпределението на цветовете се заменя с математическа функция и само коефициентите на тази функция се съхраняват, което ви позволява да възстановите външния й вид. Естествено, ще срещнете известна загуба на качество (в зависимост от сложността на функцията, използвана за подмяна на изображението) и след възстановяването вече няма да получите реална картина, а нейния математически „сурогат“. Въпреки това, в зависимост от качеството на вашия оригинал и степента на компресия, загубата на качество може да бъде напълно невидима за зрителя. Но най-важното jpeg предимство-формат в сравнение с GIF е, че докато GIF е само 8-битов (256 цвята), JPEG е 24-битов и може да показва до 16,7 милиона цвята.

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

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

   Съотношенията на компресия варират значително за JPEG файлове в зависимост от използваната програма за редактиране на изображения, но уеб страниците обикновено използват съотношения 10:1 или 20:1 (изразени като съотношение по обем към оригиналното изображение), които обикновено осигуряват приемливо качество. Въпреки това е възможно да компресирате изображението до екстремни стойности от 100:1 (разбира се, със значителна загуба на качество).

   Така че, когато работите със снимка във формат JPEG, имате възможност да запазите 24-битово изображение с 16,7 милиона цвята и въпреки загубата на качество по време на компресията, то все още съответства на оригинала много повече от 256-цветен GIF. производителност. В този случай неизбежната загуба на качество е силно зависима от размера, качеството и вида на оригиналното изображение.

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

   Можете да използвате тези инструменти по желание и такова поетапно проявление може да бъде добра помощ в борбата срещу задръстванията в каналите. Единственият проблем с прогресивния JPEG (за разлика от презредовия GIF) е, че по-старите браузъри може да не го поддържат.

   PNG - универсална растерна новост

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

   Форматът PNG (Portable Network Graphics) е сравнително нов растерен графичен формат, който е одобрен като стандарт от консорциума W3C и трябва постепенно да замени и двата "остарели" формата: GIF и JPEG. PNG предлага както цветово индексиране (до 256 цвята), поддръжка както за 24-, така и за 48-битов цвят (True-Color) и работа с канал за прозрачност (алфа канал), освен това е много по-ефективен от традиционното съхранение на растерни изображения формати.

   Алгоритъмът за компресиране на пълноцветна картина надминава JPEG по качество и с поддръжката на ограничена индексирана палитра (до 256 цвята), новият формат извършва компресия без загуби с 10-30% по-добра от тази, реализирана във формата GIF, който го прави оптимален за използване във всички случаи. За съжаление, новият формат не позволява жертване на качеството на изображението в замяна на по-високо съотношение на компресия, както във формата JPEG.

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

   Но въпреки всички подобрения, предлагани от PNG, новият формат ще започне да се използва едва след като бъде използван от дизайнерите на уеб сайтове и създателите на софтуер както за изобразяване на изображения в новия формат, така и за подготовката им за публикуване. Междувременно е доста трудно да се намерят PNG изображения навсякъде в Интернет, въпреки скорошното включване на поддръжка за този формат както в Netscape Navigator, така и в Microsoft Internet Explorer.

   И въпреки че те най-новите версиии поддържат PNG, те го правят по много ограничен начин. В момента единственото решение за потребителите, които искат да видят пълен PNG файл, е сами да инсталират приставка (като PNG Live).

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

   Векторно представяне

   И JPEG, и GIF, и PNG са растерни формати, базирани на дискретно (пиксел или точка) представяне на изображение, докато векторните формати се основават на математически формули (геометрично представяне на форми). Векторна графикапредоставя значителни предимства пред растерните, особено когато става въпрос за диаграми, текст и индустриални графики (и рентабилността на форматите е от голямо значение за Интернет).

   И така, първото предимство е значително по-малкият размер на векторните изображения в сравнение с растерните, тъй като не се описва всеки отделен пиксел от изображението, а цялата фигура (например, за да зададете кръг, трябва да прехвърлите 3-4 числа: радиус, централни координати и, може би, тип или дебелина на линията и нейните атрибути). Математическите формули, които описват векторното представяне, заемат много по-малко място от отделните пиксели и техните атрибути.

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

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

   Проблеми с показването на векторни графики в World Wide Web възникнаха, защото нямаше друг метод за показване, освен растер, а плъгинът за показване на файлове в PDF формат, който се появи, не осигури подходяща гъвкавост на работата и изискваше съхраняване на цялото съдържание в една форма - PDF.

   За да се гарантира, че векторната графика може да бъде безпроблемно вградена в традиционния HTML формат без допълнителен софтуер, два нови векторни стандарта в момента се разглеждат от Комитета по стандартите на W3C: PGML (прецизен графичен маркиращ език) и VML (векторен маркиращ език) . PGML се поддържа от Adobe Systems, IBM, Netscape и Sun Microsystems, докато VML се поддържа от Microsoft, Hewlett-Packard, Autodesk, Macromedia и Visio. И двата стандарта се основават на разширения на езика за маркиране на XML, рекламиран за използване в мрежата като наследник на HTML и препоръчан от W3C за бъдеща употреба.

   Но в момента нито един от браузърите не поддържа никакви стандарти за векторна графика, въпреки че вече са налични добавки. Сред най-популярните начини за показване на статични векторни изображения в мрежата днес са форматът SWF (Shockwave Flash) на Macromedia и все още подценяваният формат Xara Flare.

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

   Анимация, интерактивност и взаимодействие

   Най-общо казано, GIF изображенията могат да бъдат подредени като специален стек в един файл и полученият „филм“ (флипбук) може да бъде възпроизведен чрез създаване на проста растерна анимация. Както Netscape, така и Microsoft поддържат "анимирания" GIF формат от третите версии на своите браузъри, така че присъствието им в мрежата вече е трудно да се избегне. Многобройни GIF аниматори, които ви позволяват да създавате такива GIF стекове, се използват широко (както комерсиални, така и публични). Въпреки това, "съживяването" на GIF формата може да доведе до неуправляемост размери на файловете, тъй като всяко "ниво" на такъв стек е индивидуално GIF изображение, така че типичните 15 кадъра в секунда за компютърна анимация могат да "произведат" неизброим брой килобайти.

   В комбинация с Java или JavaScript можете също да създавате интерактивни анимации, които ще отговарят на потребителя.

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

   Първоначално създаден като формат за Macromedia Director, Shockwave е семейство протоколи, насочени основно към създаване на интерактивно и графично съдържание, създадено специално за използване в Интернет. А Shockwave Flash като цяло е уникален инструмент и един от най- по-добри начинида създадете анимация и да я публикувате на уеб страница. Shockwave Flash генерира много малки файлове (тъй като използва предимно формат за векторно представяне) и в сравнение с други формати е най-удобният по отношение на подготовката.

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

   Крайното решение е ваше

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

   Въпреки това, когато представяте растерни изображения, PNG става по-предпочитан, а ако отидете още по-далеч и се опитате да използвате векторно изображение, тогава форматът Shockwave Flash на Macromedia е на ваше разположение днес.

   Форматът SWF (Shockwave Flash) не е често използван, а вътрешен векторен формат на програмата Macromedia Flash (вижте „Уроци Macromedia Flash” на CD-ROM), така че за да получите собствено изображение или анимация, ще трябва да закупите съответния мултимедиен пакет от Macromedia, а потребителят ще трябва да инсталира допълнителен модул за визуализиране на резултата. По този начин, за да поставите просто векторна рисунка на вашата уеб страница, трябва да преодолеете редица неудобства.

   Въпреки това, други векторни формати са на път, които скоро ще станат стандартни.

   КомпютърПрес 5 „1999г

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

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

   Два формата са широко използвани за уеб графики - 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 (Scalable Vector Graphics, мащабируема векторна графика) е векторен формат, при който изображението не се състои от пиксели, а от обекти и криви. Поради тази причина не е подходящ за растерни снимки, състоящи се от точки, но е отличен за илюстрации, съдържащи отчетливи контури.

   Особености

   • Изображенията във формат 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%" се игнорира.

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

   Графичните файлови формати, които се поддържат от най-популярните уеб браузъри, са: Графичен формат за обмен (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 формат за снимки и илюстрации, където компресията не компрометира визуалното качество на изображението.