Изображения в интернет: видове и употреба

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

GIF: изображения за графики и анимации.

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

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

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

Недостатък на GIF формата е лошата компресия на изображения с плавно преливане на цветове. Такива изображения са обикновено снимките, за които по-подходящ е един от следващите два вида изображения: JPEG или PNG.

JPEG (Joint Photographic Experts Group): формат за снимки

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

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

С JPEG можете да постигнете ефекта на interlace GIF (илюзия за по-бързо зареждане на изображението): трябва само да запишете файла като progressive JPEG.

PNG (Portable Network Graphics): формат, добър както за графики, така и за снимки

PNG форматът се създава по една прозаична причина: създателите на широко разпространения GIF формат решават да изискват лицензионна такса от потребителите на GIF. В отговор малка група програмисти в кратки срокове разработват свободна алтернатива на GIF (неофициално PNG се тълкува като "PNG is Not GIF"), която съчетава някои от качествата на GIF и JPEG, а освен това има и някои допълнителни предимства:

• поддръжка на милиони цветове: също като JPEG, PNG може да работи с изображения с пълната гама 24-битови цветове.
• за разлика от JPEG, PNG компресира изображенията без загуба;
• PNG поддържа като GIF прозрачност на изображението, но не само за един цвят - всеки цвят може да има различна степен на прозрачност. Това се нарича alpha channel и дава голяма свобода в дизайна на изображенията.

Поддръжка за PNG: всички по-големи браузъри като Firefox, Chrome, Opera, Safari поддържат много добре PNG файлове. Internet Explorer обаче има доста проблеми с PNG - особено с прозрачните части от изображенията. По-новите версии на Internet Explorer (7 и 8)се справят по-добре, но все още някои проблеми не са решени.

SVG (Scalable Vector Graphics): запазване на качеството при промяна на размера

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

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

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

SVG форматът се поддържа от всички по-големи браузъри, с изключение на Internet Explorer. За да е видим един SVG файл в Internet Explorer, е необходимо инсталирането на допълнителен plug-in. За вас като уеб дизайнери това означава, че трябва да подсигурите алтернативно изображение за потребителите, които ползват Internet Explorer.

Избор на вид изображение

Ето накратко кога какъв вид изображение е препоръчително да използвате:

• За изображения с големи области от един цвят или с резки граници (графики, скици): GIF
• За снимки: JPEG
• За анимации: анимирани GIF
• За изображения, съчетаващи много цветове и резки преходи от един в друг цвят: PNG
• За изображения с прозрачни области: GIF или PNG