Най-използваните формати изображения в уеб

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

Какво е важно да знаете за изображенията на вашия сайт?

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

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

Кои са най-използваните формати в интернет?

JPEG/JPG  (Joint Photographic Experts Group) – растерен формат

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

Ако разполагате с голям като размер JPEG файл, лесно можете да го компресирате. Има много безплатни софтуери и платформи, които могат да ви бъдат от полза. Вие посочвате какъв процент да е компресията и преценявате кое съотношение размер/качеството на изображението ви устройва (скалируемост). Може да се каже, че 80-100% отговарят на високо качество, 60-80% средно, под 60% ниско, като при компресия под 51% качеството се влошава и разликата с оригинала е значителна.

JPEG файлът е най-подходящ за фотографии.

• малък размер
• богата цветова гама
• не поддържа прозрачност
• не поддържа анимация

Интересно: Един от вариантите на JPEG-формата, JPEG 2000, поддържа прозрачност, но форматът не се поддържа от много приложения и продължава да се използва рядко.

GIF (Graphics Interchange Format) – растерен формат

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

GIF форматът е най-подходящ за анимирани изображенията.

• малък размер
• поддържа анимация
• поддържа прозрачност
• само 256 цвята

PNG (Portable Network Graphics) – растерен формат

PNG форматът надгражда GIF формата. Има два типа PNG формат – PNG-8 и PNG-24. Първият поддържа само 256 цвята, затова ще ви разкажем повече за втория. PNG-24 поддържа богата гама от цветове и прозрачност с по-добри качества от тази на GIF формата. Подходящ е за рисувани изображения, навигационни бутони, лога. При по-висока резолюция на изображението и голямо разнообразие от цветове, размерът на файла става неоптимално голям и може да затрудни работата на вашия сайт.

PNG форматът е най-подходящ за рисувани изображения.

• поддържа прозрачност
• богата цветова гама
• голям размер на файла
• не поддържа анимация

SVG (Scalable Vector Graphics) – векторен формат

Една от тенденциите за 2016 е все по-широкото използване на SVG формата. За разлика от JPEG, GIF и PNG, SVG е векторен формат. Това го прави много подходящ за сайтове с респонсив дизайн, тъй като при всяка резолюция на екрана изображението изглежда добре.

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

SVG файлът е разработен от W3C (World Wide Web Consortium) и се поддържа от повечето браузъри.

Подходящ е за новите ретина дисплеи, които възпроизвеждат изображения с високо качество.

• малък размер
• качествено изображение при всяка резолюция
• интерактивен формат
• не може да опише снимки
• все още непознат формат

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

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

• ImageAlpha – за обработка на PNG с прозрачност (безплатен, само за Mac OS);
• JPEGmini – за обработка на JPEG (платен);
• Kraken– за обработка на JPEG (платен и безплатен вариант);
• PIXLR – за добавяне на ефекти и компресия (безплатен).

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