Тайните на уеб графиките
Както знаете, 70% от информацията за света около човек получава чрез зрението. Естествено, с появата на графичните браузъри, придобили възможността да добавят изображение към текста, Интернет получи мощен инструмент за въздействие върху своите потребители. Като по същество една и съща компютърна графика, изображенията в мрежата все още имат редица характеристики, на които (и не само те) си струва да се обърне внимание.
Известно е, че за да се получи какъвто и да е цвят, е достатъчно да се смесят само три в съответните пропорции: червено (Red), зелено (Green) и синьо (Blue) - в английското съкращение RGB. Този принцип се използва широко в цветни фотографски филми, където чрез промяна на степента на осветяване на червения, зеления и синия слой се получава един или друг цвят. От цветното кино принципът RGB се премести в цветната телевизия, където цветовете се получават чрез комбиниране на червени, зелени и сини лъчи с различен интензитет. Естествено, от телевизионните екрани, той мигрира към екраните на компютърните монитори. Тъй като крайният цвят е резултат от сумиране, тогава той се нарича адитивен (добавителен цвят).
Въпреки това, когато се подготвят изображения на компютър, се използва и обратният метод на смесване - изваждане (субтрактивен цвят). Това премахва от бялото съответно негативите на горните цветове - циан (Cyan), магента (Magenta), жълто (Yellow) и за по-добър контраст негатива на бялото - черно (Black). Английското съкращение е CMYK. Този метод се използва предимно за подготовка на изображение за печат на хартия и практически не се използва в мрежата. Интересува ни дотолкова, доколкото изобщо съществува.
Когато създавате изображение на компютър, не е толкова важно да знаете как се получава този или онзи цвят, а как теуправлявам. С цялото разнообразие от графични файлови формати и, съответно, цветови режими, само три или четири се използват за подготовка на графики в мрежата. Но преди да разгледаме тези режими, е необходимо да дефинираме терминологията.
Палитра от цветове - веднага възникват асоциации с работилницата на художника, със стативи и дъски за смесване на цветове. В известен смисъл това е така, само четките, стативът, боите и самата работилница са заменени от компютър. В компютърната графика палитра (таблица) е списък от цветове, използвани в даден режим при работа с изображение. Броят им в палитрата зависи от дълбочината.
Дълбочината на цвета се определя от броя битове, използвани за пиксел (единичен елемент, може да се каже, "атом" на изображението). По принцип дълбочината на цвета и съответно броят на цветовете в палитрата може да бъде произволно голям. Но не забравяйте, че "всичко е добро в умерени количества!". Човешкото око, въпреки че е уникален инструмент за работа с цветове, има ограничена разделителна способност (способност за разграничаване) на цветовете. Освен това е необходимо да се вземе предвид скоростта на обработка на голямо количество изображения (не говоря за големи размери на файлове - повече за това по-късно) от компютър и възможностите на монитора с голяма дълбочина на цвета. От тук стигаме до максимума – 24 бита на пиксел (по 8 бита за всеки цвят в RGB) или 224 = 16,8 милиона цвята в палитрата. Въпреки това, не винаги е препоръчително да използвате "пълна" палитра (истински цвят), когато подготвяте изображение за уеб.
Напоследък дори не самото ретро придоби голяма популярност, а ретро стилът и, като една от посоките, използването на черно-бели изображения. Не е необходимо да съхраняват информация за всички цветове, съхранява се информация само за нюансите на един цвят. Точнотози принцип използва режима на сивата скала, който използва до 256 нюанса на сивото.
Както вече беше отбелязано, не винаги е препоръчително да използвате голям брой цветове в едно изображение. В режима на индексния цвят цветовете се образуват чрез нетрадиционно смесване на три „чисти“ цвята - на всеки пиксел от изображението се присвоява индекс (оттук и името) на цвят в палитрата. Освен това техният брой може да бъде различен, но не повече от 256. Естествено, колкото по-малко са цветовете в палитрата, толкова по-малък е размерът на файла с изображение.
Въпреки това, за пълноцветни изображения с плавни градиенти е необходим RGB режим, който ви дава контрол върху всички цветове, като посочите един от 256 нюанса на всеки от трите цвята. Това е най-често използваният режим на работа за изображения.
С цялото разнообразие от изображения в компютърната графика могат да бъдат разделени на два големи класа: растерни и векторни. Всеки от тях има своите предимства и недостатъци.
Принципът на изграждане на растерни изображения се основава на ограничеността на разделителната способност на окото, когато когато две точки се приближат една към друга, окото престава да ги различава. Помислете си за чертежите, създадени в ранните дни на компютрите с помощта на ASCII знаци, които можеха да се видят само от разстояние. Растерното изображение може да се разглежда като масив от пиксели, всеки с различен цвят. Съответно, растерът е представяне на изображение (компютърът предава всяка информация по този начин), на езика на математиката, чрез метода на диференциация (разделяне на непрекъснатостта на елементарни сегменти). Именно от принципа на представяне на растерно изображение произтичат неговите недостатъци. И така, за изображение от 300 * 200 пиксела с три байта на пиксел за RGB, размерът на файла ще бъде 300 * 200 * 3 = 180 KB.Съгласете се, не всеки иска да чака такова изображение да се зареди, особено ако има повече от едно. Освен това всяка елементарна единица, независимо дали е атом в разбирането на древните гърци или пиксел в нашето разбиране, по принцип е неделима. Оттук и невъзможността за мащабиране на растерното изображение. След като се опитате да увеличите такава картина 10 пъти по този начин, единственото, което може да се види, е купчина цветни квадратчета в стила на ранния авангард, чийто смисъл може да се разбере само от пет стъпки (помнете примера с ASCII знаци) и след това, ако екранът на монитора позволява.
Точно както интегралът в математиката е обратен на диференциацията, така може да се каже, че „векторът“ е противоположност на растер. Всяка крива, включително затворена, може да бъде описана с някакъв набор от математически формули и представена като програмен код. Всяко изображение може да бъде представено като набор от фигури (затворени линии), боядисани в един или друг цвят. Ето как създаваме изображения с моливи и четки, на този принцип са изградени векторните формати. Тези принципи определят основните предимства на "вектора". Липсата на необходимост от описание на всеки пиксел ви позволява значително да намалите размера на файловете дори при доста големи размери на изображения. Освен това от математиката е известно, че когато една функция се умножи по постоянно число (константа), формата на описаната от нея крива не се променя. От тук получаваме векторно изображение като идеален обект за мащабиране. Изображение, увеличено десет пъти, няма да изглежда по-лошо от оригинала.
Една от разновидностите на векторната графика е триизмерната (3D) графика. В тези файлове просто се въвежда още една координата, но това не води до изображение, а цяла сцена с много нюанси и,съответно голямо количество изчисления.
Но с цялото разнообразие от графични формати, малък брой от тях се използват за представяне на изображения в мрежата. Основният ограничител тук е размерът на файла. Следователно изборът на формат при подготовката на изображение за уеб се определя от оптималното съотношение на два взаимно изключващи се параметъра: размер на изображението и размер на файла. От теорията на вероятностите обаче е известно, че повечето схеми за представяне на информация имат известна степен на излишък. Например, когато съставяме бележки за лекции, ние използваме определена система от съкращения за думи и фрази, без да губим смисъла на съдържанието. Този принцип е в основата на повечето системи за компресиране на информация, включително графичните файлови формати, използвани в мрежата. Въпреки това, със същия принцип, алгоритмите за неговото прилагане са разработени от различни хора и следователно имат много значителни разлики помежду си. Освен това не забравяйте, че всеки формат има други характеристики, така че при избора му трябва преди всичко да вземете предвид изпълнението на чертежа.
GIF (Graphics Interchange Format), разработен от CompuServe Incorporated, най-новата версия е GIF-89a. Първоначално, както подсказва името, този формат е разработен за прехвърляне на графична информация в поток от данни и следователно, за разлика от другите, това е последователна организация, а не произволна, което позволява използването на минимум ресурси на процесора при разопаковането му. GIF използва алгоритъма за компресия LZW или, както се нарича още компресия без загуби, за компресиране на файлове и е най-ефективен за големи области с плътен цвят и ясни граници. И тъй като изображението се сканира хоризонтално, компресията ще бъде по-ефективна.за големи хоризонтали на такива региони. GIF обаче не може да съхранява неиндексирани изображения, което означава, че може да показва максимум 256 цвята. Това ограничение на формата не позволява плавен преход от един цвят към друг, което е особено забележимо при използване на градиенти и измивания. Можете, разбира се, да използвате техниката "дифузия", но ефектът "зърно", получен в този случай, изглежда по-скоро като стилизация и следователно не винаги е оправдан в общия контекст на сайта. В допълнение, когато се използва дифузия, хетерогенността на изображението се увеличава, което води до намаляване на ефективността на компресията. Недостатъкът на ограничената палитра на GIF е неговата гъвкавост. Чрез промяна на размера на таблицата и, следователно, броя на цветовете в нея, уеб дизайнерът има в ръцете си чудесен инструмент за регулиране на съотношението качество на изображението / размер на файла. И така, намалявайки броя на цветовете в изображение от 100 * 100 пиксела от 256 (8 бита на пиксел) на 128 (7 бита на пиксел), получаваме 100 * 100 * 8 - 100 * 100 * 7 = 10 000 бита спестявания. Друга функция, въведена в последната версия на формата, е създаването на прозрачни области в изображенията, което отваря интересни възможности в уеб дизайна. „Поточното“ естество на GIF, сравнително малките му файлови размери и способността му да компресира чрез използването на прозрачни области в рамки го направиха отличен инструмент за създаване на анимации в мрежата. Използването на GIF е препоръчително преди всичко за така наречените плоски цветни изображения с ясно маркирани преходни граници между цветовете, както и изображения с малък размер като бутони, миниатюри и др.
JPEG (Съвместна фотографска експертна група). Разработено от група фотографски експерти (както подсказва името) под егидата на ISO (Internationalорганизация на стандартите). Като цяло този формат е доста уникален с това, че използва алгоритъм за компресиране, който е различен от използваните във всички други графични формати - компресия със загуби. Този алгоритъм преди това е бил използван в телевизията в схемата за телевизионно излъчване на САЩ (NTSC). Тя се основава на същите ограничения на човешкото зрение, неспособността на окото да не забележи някои изкривявания в реконструираното изображение. Днес този алгоритъм е един от най-ефективните (съотношението на компресия достига 1:100), но не се справя много добре с изображения с малък брой цветове и остри ръбове. Като цяло JPEG може да се нарече обратното на GIF. Той ви позволява да показвате 24-битова палитра, т.е. всичките 16,8 милиона цвята, което прави възможно показването на градиенти с фотографска точност, но не може да има прозрачни зони. Този формат обаче е изпълнен с една функция, която не може да бъде пренебрегната. При повторно запазване на изображение като JPEG, той отново изпълнява алгоритъма за компресиране, разбира се, с влошаване на качеството. Следователно трябва да запазите изображението в него само след окончателната обработка.
Когато говорят за графики в мрежата, обикновено не говорят за шрифтове като графични обекти. Това се дължи на факта, че доскоро HTML страниците предполагаха много ограничена способност да контролират параметрите на шрифта. Но вече в спецификацията CSS level2 се въвежда концепцията за вграждане на шрифтове, което отваря възможността за използване не само на стандартни. Съществуващите програми ви позволяват да създавате дори символни шрифтове, като получавате монохромни мащабируеми изображения вместо букви. Но тази идея не беше заобиколена от „войната на браузърите“. Различното внедряване на "зареждащи се" шрифтове в NC и IE, за съжаление, не позволява пълното използване на тези функции.
Разбира се, разсъжденията, дадени тук, не могат да покрият целия океан, наречен "уеб графика". Но започвайки да строите къща, трябва да знаете нещо за тухлите. И мисля, че първата ми тухла няма да е излишна при изграждането на вашия сайт.