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

GIF

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

GIF поддържа и т.нар. interlacing (презредово изобразяване). Това понякога се ползва в web дизайна, затова ще го спомена. Методът interlacing позволява да се изобразяват части от цялото изображение едновременно, като качеството нараства до пълното качество на картината с по-пълното изтегляне на данните. Какъв е резултатът от това? За потребителят се създава оптическата илюзия, че картинката се е изтеглила по-бързо. Реално обаче, тези допълнителни инструкции във файла увеличават обема му.

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

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

• изрязване на ненужните части от изображението. Вероятно този метод се практикува най-рядко - обикновено няма ненужни части

• намаляване на броя на цветовете - максимумът е 256 цвята (8-битово изображение), но когато броят им е по-малък, и изображението е с по-малък обем. Нормално - по-малко цветове имат нужда от съхранение

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

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

Има и една особеност, на която повечето хора не обръщат внимание. GIF ползва алгоритъм за компресия LZW. Той записва последователностите от пикселите, но по хоризонталата. Ако дадено изображение съдържа 5 пиксела (по хоризонталата) с цвят А, тогава алгоритъмът ще запише 5*А. Но ако по средата има един пиксел с цвят Б, записът ще е 2*А, 1*Б, 2*А. Това може да се приеме в случаите, когато цветът Б е наистина различен от А, но в много случаи той е съвсем близък. Ето защо ръчното "изпилване" на подобни разлики води до много по-добра компресия. Само един пример от личната ми практика - изцяло оптимизирана неголяма илюстрация преди тази манипулация беше 9 KB. След ръчната намеса и повторната автоматична оптимизация, обема спадна на 5 KB. Тоест, спечелих почти 45 % от обема, а вида даже малко се подобри! Освен това, точно тази особеност на алгоритъма LZW води до по-големият обем на изображенията, при които повтарящите се пиксели са по вертикалата. LZW не може са ги анализира, и резултатът е налице.

Някои казват, че намаляването на броя на цветовете на "неточен" брой, т.е. различен от 2, 4, 8, 16, 32, 64 или 128 (т.е. до 1, 2, 3, 4, 5, 6 или 7 бита на пиксел), не води до намаляване на обема, защото за всеки пиксел продължава да се ползва по-голямата стойност. Например, при намаляване на броя цветове от 256 на 255 изображението остава 8-битово. Всичко това е вярно само за себе си. Но в много случаи това намаляване с 2-3 цвята "изпилва" различните пиксели от някаква по-голяма площ, например фон. Така алгоритъмът за компресия отново може да запише 5*А. Типични примери за такива случаи са изображения, конвертирани от голям брой цветове до 256-цветни картинки. Няма да изпадам в подробности - такива и подобни изображения има предостатъчно.

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

JPEG

JPEG е формат, предназначен за фотореалистични изображения. JPEG няма повечето възможности на GIF, но за сметка на това поддържа 32-битов цвят (4.2 млрд. цвята), т.е. пълноцветно изображение. В web практиката обаче, почти винаги се ползват 24-битови (16.7 млн. цвята) JPEG изображения, тъй като и те са напълно достатъчни. Още повече, че така се ползва стандартната RGB палитра - смес от червено, зелено и синьо (Red, Green and Blue), а при 32-битовият цвят се ползва CMYK палитрата (синьозелено, пурпурно, жълто и черно - Cyan, Magenta, Yellow and blacK). Компресията при JPEG е със загуба на качеството, но може да бъде изключително мощна. А когато се прилага внимателно, загубата на качество остава незабелязана. JPEG има "ограничение" от 64 000 * 64 000 пиксела за размер на изображението.

JPEG поддържа 101 степени на компресия (от 0 до 100 включително). Колкото по-висока е степента на компресия, толкова по-ниско е качеството. За съжаление, алгоритъмът за компресия на JPEG работи добре с детайлите, но големите едноцветни области от изображението с усилване на компресията все повече заприличват на квадрати.

Как може да се намали обемът на едно JPEG изображение?

• един от ефикасните методи е изрязването на изображението, за да е с по-малки размери

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

• JPEG изображението може да се конвертира до 8-битово сиво (grayscale 8 bit). Това е приложимо когато става дума за черно-бели снимки, и може да намали обема им драстично

• обемът на едно JPEG изображение може да се намали малко и чрез конвертирането му от стандартно в "прогресивно" (progressive). Повечето програми за графична обработка поддържат тази възможност. Това конвертиране би могло да доведе до някои проблеми със съвместимостта, но ще засегне само потребителите със стари браузери (IE и Netscape Navigator версии 3 и надолу, и съответните версии на други браузери от това време), но те са незначителен процент

• някои програми за оптимизация на графики (xat.com Image Optimizer и някои други) поддържат и допълнителна компресия - Magi Compression или Secondary Compression. В повечето случаи Magi Compression е по-мощна. Допълнителната компресия позволява немалко намаление на крайния обем на изображението.

Трябва да се има предвид, че крайните степени на компресия са неприложими в практиката. Компресия, по-силна от 80-та степен влошава качеството на изображението до степен, обезсмисляща съществуването му. Често това важи и за доста по-ниски степени на компресия (около 60). От друга страна, запазването на картината с нулева степен на компресия води най-вече до огромен обем. Отлично качество при приемлив обем се постига при компресия от 5-та степен. Но разбира се, за всяка отделна графика е различно, и затова няма универсален съвет. Но не е за препоръчване да се опитвате да намалите обема на JPEG графика чрез запазване първо с по-слаба, а след това с по-силна компресия. Това натрупване ще влоши качеството. Използвайте запазване директно в желаната степен на компресия.

Форматът JPEG е изключително разпространен, и това не е случайно. При добър баланс той позволява да се постигне високо качество на изображенията при много нисък обем. Никой друг формат не позволява компресия 20:1 при достатъчно качество. JPEG е отличен избор в много случаи, особено когато става дума за сложни изображения с много детайли и много цветове - фотографии и др.

PNG
(Portable Network Graphics)

Доскоро GIF и JPEG бяха единствените приемливи формати за графика в web сайтовете. С появата и приемането на PNG това би трябвало да се промени.

Основната (и може би единствена) пречка за ползването на PNG в web страниците е това, че не всички браузери го поддържат, а старите версии на браузерите въобще няма да могат да изобразят PNG изображение. Но браузерите на огромна част от потребителите няма да имат никакви проблеми с PNG.

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

Като формат PNG поддържа до 48-битов цвят (281 474, 976 млрд. цвята). Никой друг формат няма тази възможност (човек не може да види и 10 млн. цвята, така че това едва ли е истинско предимство). PNG използва много мощен алгоритъм за силна компресия без загуба на качеството. Но броят цветове в едно PNG изображение може да се ограничи - например до 256 - и тогава точно този алгоритъм позволява крайният резултат да са качествени графики с много малък обем.

По какво си приличат PNG и GIF, и по какво се различават? Тази таблица ще ви помогне да се ориентирате:

Едно уточнение - само 8 и 32-битовите PNG изображения поддържат прозрачност, а 24-битовите - не. Освен това, при 32-битовите PNG графики не може да се определи дали алфа каналът да е прозрачен или индексиран цвят.

Как да направим едно PNG изображение по-малко? Ето основните варианти:

• премахване на ненужните области от изображението - това ще намали обема, но не очаквайте чудеса

• намаляване на броя на използваните цветове

• конвертиране на изображението към сиво, ако не е необходимо то да е цветно

• превръщане на част от изображението (например фона) от цветна в прозрачна

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

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

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

Corel Photo Paint - моята любима графична програма - при запазване на GIF изображения дава възможност не само да определите дали изобразяването да е презредово (interlaced) или не, но и да определите кои части от картинката да бъдат прозрачни. Въобще, всичко необходимо. Същото важи и за съхраняването на JPEG картини - прогресивни или не, ниво на компресия и др. Има даже и други възможности. Можете да определяте изглаждането (smoothing) на картината, отново в степени от 0 до 100. Corel Photo Paint позволява и автоматична оптимизация за по-малък обем, а също и употребата не на стандартният под-формат (4:2:2), а на другият възможен (4:4:4). Той осигурява по-високо качество на крайната картина, но и увеличава малко обема й. Както казват в рекламите, това не е всичко. Има си и бутон "Preview", с който можете да видите не само как ще изглежда картинката след съответната компресия, но и колко точно ще е голяма. Наистина изключително удобство. А в по-новата версия 10 има и специален оптимизиращ модул за web. Въобще, това е чудесна програма, с която можете да постигнете и много малки като обем графики. Отличен избор не само за графики за web сайтове.

Adobe Photoshop - още една отлична програма. По отношение на съхранението и оптимизацията на изображенията има приблизително изравнени възможности с Corel Photo Paint. Колегата Христо Перчинков преди време написа урок "Картинки и web", в който можете да прочетете и указания за това как най-ефикасно (икономично, когато става дума за web дизайн) да запазите дадено изображение чрез Photoshop 5.

Paint Shop Pro - "бронзовият медалист". Седмата версия на тази програма я превърна в пряк конкурент на горните две програми. Тя има всичките им важни възможности и немалко екстри (в пакет към нея върви и програма за анимиране), а като цена далеч ги превъзхожда. Все повече хора се ориентират към PSP, и това не е случайно. От гледна точка оптимизацията на изображенията PSP също има всичко необходимо.

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

GIF Movie Gear - макар да не е особено популярна у нас, тази програмка трябва да бъде запомнена. Рядко друга програма може в такава степен да "смачка" едно GIF изображение. И въпреки, че е предназначена за създаване на анимации (и чудесно изпълнява тази своя задача), най-ценното в GIF Movie Gear е оптимизиращият модул. Той е особено силен при анимациите и често ги смалява с 10-15 и повече процента. Това наистина е една от най-добрите програми, които съм ползвал, и горещо я препоръчвам на всички.

xat.com Image Optimizer - може би най-добрата програма за оптимизация на статични графики. Поне когато става дума за JPEG е ненадмината - казвам го от личен опит (както впрочем и за всичките останали програми тук). Специални методи за компресия, незабавен преглед на вида на изображението и обема му при всяка промяна, едновременен преглед на оригинала и изходният файл, работа с отделни региони от изображението и т.н. и т.н. А JPEG не е единственият формат, с който работи Image Optimizer. Тя може да оптимизира и GIF, и PNG. Всеки сериозен (и не толкова сериозен) дизайнер би трябвало да разполага с тази програма.

Това разбира се, не са единствените добри програми. Приложенията за работа с графики със сигурност са хиляди. Аз изброих комерсиални програми, но има и много безплатни - Irfan View, VicMan's Photo Editor, GIMP и др. И те също са чудесно средство за обработка на графика. Впрочем, повечето от тези "комерсиални" програми са от типа shareware. Можете безплатно и напълно свободно да ги ползвате обикновено за 1 месец. Възползвайте се от тази възможност - най-малкото, за да ги опознаете!

Назад