Уроци Форуми Блогове

Помогни ни да направим Uroci.net по - богат! Добави урок

Категории Други уроци Adobe Photoshop Adobe Illustrator Adobe Flash Adobe Fireworks DreamWeaver CSS и HTML Corel Draw Image Ready PHP SEO CMS Microsoft Windows Microsoft Word Microsoft Excel PowerPoint Microsoft Access Microsoft Publisher Linux Visual basic JavaScript Ajax 3ds Max Maya 3D C++ Sound Forge Gimp SWiSH

GIF (Graphics Interchange Format)

Най-стария формат от трите (1987 година), той може да предложи максимум от 256 цвята. Няма загуби след запазване (сейване), ако не се възползваме от възможностите на photoshop (точка 8 - Lossy). Не вярвайте, че можете да представите снимки или много цветови изображения благодарение на надареността му, но силата му е точно в обратното. С малкото си цветове и подходящо кодиране той е перфектен за едноцветни (малко цветни да сме по-точни) картинки, остро сливащи се цветове като лога, графики, иконки, навигации. Освен това може да предложи прозрачност (област на чието място излиза фона на уеб страницата) и е единствения формат с който могат да се представят анимации! Всъщност при gif не можем да говорим за оптимизация като при jpeg, която използва изключително сложни математически алгоритми. Тук по-малкия размер става с намаляване на цветовете. Същността на gif е списък с информация за пикселите в хоризонтална последователност и друг начин за песнете на място е като кода съкрати 100 пикселов бял ред със: 1 пиксел - бял, останалите 99 - същия цвят (точка 5).

Първата карта е в gif формат - 11.5кб, втората jpg - 11кб. Разликата очевидна.


Методи на оптимизация :

1. Намаляване на площта на изображението (ширина, дължина). Виж първа точка при JPEG. При gif е силно препоръчително да се преминете в RGB mode преди променянето на размера. Това става от Image -> Mode -> RGB color.


На първия надпис размера е намален след предварително преминаване в RGB mode.

2. Намаляване на цветовете. Това е основен метод, става от менюто на Save for Web като сами можете да изберете брой между 2 и 256 цвята.


Първата картинка е 128 цвята с размер 3.33кб, втората е 32 цвята с размер 2.79кб


Първия бутон е 256 цвята с размер ~1кб, втората е 4 цвята с размер ~230 байта.

3. Анти-алайсинга (Anti-aliasing) или по друг начин казано, изглаждането на ръбовете използва много цветове и е голям вредител на компресирането. Неизгладените изображения са в пъти по-подходящи за този формат.
Направих опит и се оказа, че със crisp anti-aliasing на надпис се постига 1 цвят по-малко от останалите 2 вида (smooth и strong), а също, че размера на файла стана 2 пъти по-голям от надпис без тази "екстра" при който бяха нужни точно 2 цвята - на фона на и на надписа.



Първия надпис е със crisp (570 байта), втория smooth (670 байта), третия strong (690 байта), четвъртия без (280 байта).

4. Площ с еднородни цветове (flat colors). Както споменахме по-горе gif е в пъти по-добър от jpeg в това отношение и трябва да се стремите към тях. Както виждате на примера по-долу за такива изображения gif е вашия избор.



Като сравним изображенията ясно си личи как gif превъзхожда по качество jpeg в това отношение.
Размера на gif-a e 920 байта, а на jpg - 3,09кб.

5. Вертикална промяна на цветовете. Макар и рядко да тръгнете да се занимавате точно с този метод, но аз ще ви го опиша :) Както споменах по-горе gif може да съкрати кода като изпише 1пиксел - цвят, 99останали - същия цвят. Така ако един ред ви е едноцветен, това е добре, но ако цветовете се сменят хоризонтално - не. Хоризонтално смянане се има в предвит 1 пиксел червен, втори черен, трети зелен, а вертикално - всеки ред различен цвят.


В първия пример цветовете се сменят хоризонтално (8кб), във втория вертикално (5.17кб).
Както сами разбирате и казахме по-горе за преливащи цветове е по-удачен jpg, този пример е за да се покаже най-нагледно.

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

7. No Dither! С dither работата е колкото повече, толкова повече. Механизмът прибавя някой друг пиксел, със среден цвят между 2 съседни за да симулира сливащи се цветове. Така ако имате снимка и цветовете не стигат ще станат грозни полета които с dither сеприливат, но ефекта не е особено красив и размера си го бива :) В такава ситуация използвайте jpeg.

8. Lossy. Photoshop ви позволява да премахвате някои пиксели с оригиналния им цвят и им поставя друг (съществуващ), приличащо на ефекта при jpeg, което ви е добре дошло с доста ефективно компресиране като резултат. Отново се намира в менюто Save for Web като самата функция е Lossy.



Първата картинка е без lossy (21.4кб), втората със 15 lossy (18.2).

9. Web snap. Ако си спомняте когато говорихме за палитри(точка 6) не изброихме всички възможности, а само поносимите :) Не бях представил например Web палитрата, която използва определени цветове, неподходящи за по-детайлни картинки, но с нея файловете стават значително по-малки. Сега с функцията Web snap можем да изберем процент от цветовете които да бъдат заменени с подобни от прословутата пестяща палитра.

Калдейта Ком ЕООД - © 2003-. Всички права запазени.

Контакти За реклама Условия за ползване