Компресија слика и конверзија у WebP

Шта је компресија слика и зашто је битна за брзину сајта

Компресија слика је поступак којим се смањује величина фајла, а да око и даље види слику онако како треба. Разликују се две врсте: без губитка квалитета (lossless), где се подаци само паметније пакују, и са губитком квалитета (lossy), где се одбацују детаљи које људско око најтеже примећује. За фотографије на сајту скоро увек је боља lossy компресија, јер се добија вишеструко мањи фајл уз разлику коју ретко ко примети.

Велика слика је најчешћи кривац за спор сајт. Херо слика од 4 MB може да одложи приказ садржаја за неколико секунди, посебно на мобилном интернету. Google то мери кроз Core Web Vitals, пре свега кроз LCP (Ларгест Цонтентфул Паинт), а тај податак утиче и на позицију у претрази и на то да ли ће посетилац уопште сачекати да види страницу.

Алати за компресију раде на два начина: смањују димензије слике (ширина и висина у пикселима) и смањују квалитет записа. Оба су потребна. Слика ширине 4000 px која се приказује на 800 px је чист губитак, ма колико добро била компресована.

Како компресовати слике за сајт без губитка квалитета

Поступак је једноставан и не захтева познавање алата:

1. Изаберите ширину која одговара месту где се слика приказује. За велике баннер слике до 1920 px, за слике у тексту 800 до 1200 px, за сличице 300 до 600 px.
2. Поставите квалитет око 80 процената. То је тачка где је уштеда велика, а разлика се не види.
3. Изаберите формат: WebP за широку подршку, AVIF када желите најмањи фајл.
4. Преузмите фајл и упоредите га са оригиналом на 100 процената зуму, посебно на деловима са текстом и оштрим ивицама.

Практичан трик: ако на слици има много текста, танких линија или логотипа, смањите квалитет пажљивије или користите lossless компресију. Фотографије са природним детаљима подносе агресивнију компресију без видљивих артефаката.

WebP или AVIF: који формат изабрати

WebP је данас сигуран избор. Подржавају га сви модерни претраживачи, мањи је од JPEG-а при истом визуелном квалитету и подржава провидност. AVIF иде корак даље и често даје још мањи фајл, али код неких старијих уређаја и прегледача може да се не прикаже или да се декодира спорије.

Практично правило: користите WebP као основни формат, а AVIF тамо где вам је приоритет најмања тежина странице и где имате fallback. Ако не желите да размишљате о компатибилности, WebP је довољан за велику већину сајтова.

Стручни савет: не конвертујте већ компресован WebP у AVIF па назад. Свака нова конверзија са губитком квалитета додаје артефакте. Увек полазите од оригинала или од најквалитетнијег сачуваног фајла.

Најчешће грешке при компресији слика

• Смањивање квалитета пре смањења димензија. Прво скалирајте слику на потребну ширину, па је компресујте. Обрнут редослед даје лошији резултат.
• Исти квалитет за све слике. Портрети и продукти траже више детаља од позадинских слика и илустрација.
• Заборављен srcset. Једна велика слика за све екране је промашај. Понудите више ширина па нека прегледач изабере.
• Компресија логотипа у lossy формату. За графику са острим ивицама бољи је SVG или PNG.
• Занемаривање кеша и CDN-а. Најбоља компресија не помаже ако се слика изнова скида при сваком отварању странице.

Стручни савет: проверите резултат у алату за мерење перформанси, не само оком. Понекад слика изгледа добро, али је и даље тешка јер је димензија остала превелика.

Ако имате стотине или хиљаде слика, ручна компресија постаје заморна. Тада помаже аутоматизација у оквиру буилд процеса или CMS-а, а EVI Solutions може да помогне када је проблем већи од појединачног алата.