Как да изберете идеалния формат за изображенията за по добра оптимизация

Здравей, читателю! При зареждане на изображенията в сайта голяма част от хората инстинктивно разбират, че GIF не трябва да се използва за фотографии, а JPEG за графика. Мързеливите могат да изберат формат PNG за всички случаи и да се надяват на най доброто.

Защо правим разлика във форматите на изображенията? Всичко е във кодировката, използвана за създаване на картинката в определения формат. JPEG е подходящ за фотографии (P означава Photographic или преведено на Български, фотографски), тъй като този формат размива острите ръбове и съхранява плавните градиенти. Кодирането на изображението в JPEG с помощта на големи, отчетливи блокове с цветове води до загуба на качество и неефективно кодиране.

Формата GIF е подходящ за прости блокови графики и за различни видове лого, тъй като в тях се наблюдава отчетливо изменение на еднородни цветове. Дадения формат е практически безполезен за фотографии, където цветовете са отличават във всеки пиксел.

Ако вземем долното изображение като пример и което е във формат JPEG и тежи 49.5Kb:

jpeg изображенията на котка

Но във GIF формат изображението тежи цели 156.4Kb. Не е лошо, но това все пак е почти три пъти повече.

Във PNG формат снимката тежи цели 322.8Kb. Само поради неподходящия формат тежестта на изображението се е увеличила почти 7 пъти!

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

Поддръжка в браузърите

До тук разгледахме три класически формата за изображения, които всички познаваме и обичаме. По нататък става по сложно – всички браузъри се опитват да наложат разни формати за изображения от следващо поколение. В Safari това е JPEG 2000, в Google Chrome това WebP, Microsoft Edge поддържа JPEG XR.

cross browser picture

Поддръжка на формати от следващо поколение в браузърите

В различни сценарии, например, WebP значително превъзхожда JPEG, GIF и PNG. Ако вземем изображението за пример, то неговата тежест се намалява до 9KB – икономията в сравнение със JPEG достига до 56%! Дадения формат може да се използва в момента само в браузърите Opera, Google Chrome и Android Browser.

JPEG XR е с по-голяма производителност, отколкото JPEG. Тестовото изображение във формат JPEG XR ще тежи 10KB, което е със 53% по малко от оригинала. Този формат дори поддържа прозрачност, както PNG и WebP и най добре подхожда за фотографии. Формата ще се показва само във Internet Explorer 9+ и Edge.

По този начин, вие трябва да се убедите, че използвате най подходящия формат за изображението за даденото съдържание, но също така е необходимо да изберете подходящия формат за различните браузъри. Възможно е да се наложи да създадете 4 или 5 версии на всички изображения – едно закодирано със jpeg, png или gif, и още по едно за всички нови формати от следващо поколение. Но затова се изискват много време и усилия.

Бъдещи формати за изображения

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

А сега се сблъскваме с проблема със още не поддържаните формати, като BPG и FLIF които се намират още в зачатъчно състояние и още само набират скорост. Но е въпрос на време, кога някой от браузърите ще започнат да поддържат тези формати.

Какво значи това за нас? Възможно е да се наложи да конвертирате всичките ви изображения във новия формат или два формата, което изисква много време и сили.

Автоматично конвертиране на форматите в изображенията

За наше щастие, съществува страхотно решение – автоматична конвертиране на форматите на изображенията в Cloudinary. Може да качите едно изображение (дори и със най-неподходящ формат) а Cloudinary ще се погрижи за неговото правилно конвертиране за показване във различните браузъри. В Google Chrome този URL адрес ще бъде във формат WebP, в Microsoft Edge – JPEG XR и във Firefox ще бъде оригиналния JPEG.

Услугата е платена но има и безплатен план, който предлага безплатна обработка на общо 75 000 изображения, общо 2 GB място за снимките и 5 GB месечен трафик. Вече не е нужно да се безпокоите (аз си бях изгубил съня. 🙂 ) за поддръжката на различните формати в браузърите, нито сега, нито в бъдеще. Доста мощен инструмент насочен в бъдещето. Успех.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *