Оптимизација слика за веб
Слике су на веб-страници готово увек најтежи ресурси. Правилна оптимизација слика је једно од оних ретких побољшања која истовремено побољшавају време учитавања, корисничко искуство, SEO позиције и трошкове пропусног опсега, често без несразмерно великог труда.
Шта је оптимизација слика?
Оптимизација слика је пракса испоруке слика у најмањој могућој величини датотеке без приметног нарушавања визуелног доживљаја, на начин који одговара контексту. То значи: прави формат, праве димензије и учитавање у правом тренутку.
Тај последњи део је важнији него што људи очекују. Оптимизација није само компресија. То је комбинација избора формата, правилног одређивања величине, стратегије испоруке и начина учитавања, а све то делује заједно.
Зашто је то важно
Слике обично чине 40–60 % укупне величине пренетих података странице. То директно утиче на више фактора који се одражавају на стварне кориснике и мерљиве резултате.
Core Web Vitals. Google-ова метрика Largest Contentful Paint (LCP) директно је повезана са тим колико брзо се учитава ваш највећи видљиви садржај. LCP елемент је врло често слика: главна насловна слика, фотографија производа или банер. Спор LCP негативно утиче на ваше позиције у претрази, а оптимизоване слике су један од најпоузданијих начина да се он побољша.
Корисници мобилних уређаја и споре везе. Значајан део веб-саобраћаја долази од корисника који користе мобилни интернет, при слабој покривености мрежом или на ограниченим везама. Слање неоптимизоване слике од 2 MB некоме у таквој ситуацији значи да ће чекати неколико непотребних секунди или ће у потпуности напустити страницу. Цена лошег корисничког искуства много је већа на мобилним уређајима него на десктопу.
Трошкови пропусног опсега и хостинга. У већем обиму, кумулативна разлика између оптимизованих и неоптимизованих слика брзо се нагомилава, и то не само за кориснике, већ и на вашим рачунима за CDN и излазни саобраћај из складишта.
Уобичајене технике оптимизације
Компресија
Компресија смањује количину података потребну за чување или пренос слике. Постоје два приступа која вреди разумети, јер прави избор зависи од тога шта компримујете.
Компресија са губицима трајно одбацује део података слике како би се постигла знатно мања величина датотеке. Људски визуелни систем је осетљивији на неке детаље него на друге, а алгоритми компресије са губицима то користе да смање величину датотеке на начине који су често неприметни. JPEG је најчешћи пример. Добро функционише за фотографије, где сложеност слике прикрива губитак квалитета.
Компресија без губитака смањује величину датотеке без одбацивања било каквих података. Оригиналне вредности пиксела у потпуности се чувају приликом декодирања датотеке. PNG користи компресију без губитака. То је прави избор за снимке корисничког интерфејса, иконе и све што има равне боје, оштре ивице или преклопљени текст, где би артефакти компресије са губицима били јасно видљиви.
Коришћење одговарајућих димензија слика
Један од најчешћих и најлакше превиђених проблема јесте слање слике димензија 3000×2000 px да би попунила контејнер ширине 400 px. Прегледач преузима целу датотеку, а затим је смањује током приказа. Тако преносите 5–10 пута више података него што је потребно.
Решење је једноставно: промените величину слика на димензије у којима ће се заиста приказивати пре него што их испоручите. На динамичким сајтовима то обично значи генерисање више варијанти (умањени приказ, средња величина, пуна величина) током процеса израде или путем сервиса за обраду слика, уместо ослањања на CSS да обави скалирање.
Избор правог формата
Избор формата значајно утиче и на величину датотеке и на визуелни квалитет. Различити формати користе различите стратегије компресије, свака са својим предностима и компромисима. Детаљан преглед сваког формата наћи ћете у нашем водичу кроз формате датотека слика.
| Формат | Компресија | Најпогодније за | Провидност |
|---|---|---|---|
| JPEG | Са губицима | Фотографије, сложене слике | Не |
| PNG | Без губитака | Иконе, елементи корисничког интерфејса, преклопљени текст | Да (алфа-канал) |
| GIF | Без губитака | Једноставне анимације (углавном превазиђене) | Да (1-бит) |
| WEBP | Са губицима или без губитака | Савремена замена за JPEG и PNG | Да |
| AVIF | Са губицима или без губитака | Најбољи степен компресије, фотографије, HDR | Да |
| SVG | / | Логотипи, иконе, илустрације (вектор) | Да |
У пракси, WebP је данас добар подразумевани избор за већину растерских слика, јер нуди бољу компресију од JPEG-а и PNG-а при упоредивом квалитету и широкој подршци у прегледачима. AVIF иде корак даље у компресији и сада га подржавају сви велики прегледачи, мада је кодирање спорије. За иконе и једноставну графику, SVG је готово увек право решење: савршено се скалира на било којој резолуцији, а величине датотека су веома мале.
Лењо учитавање
Подразумевано, прегледачи почињу да преузимају слике чим наиђу на њих у HTML-у, укључујући и слике које се налазе далеко испод видљивог дела екрана. Лењо учитавање одлаже преузимање слика ван видљивог дела странице док корисник не скролује ближе њима.
Практична корист је значајна на страницама са много слика: избегавате трошак преузимања садржаја који корисник можда никада неће видети, почетно учитавање странице је брже, а пропусни опсег се штеди. Изворно лењо учитавање у модерним прегледачима не захтева ништа више од једног атрибута:
<img src="photo.jpg" loading="lazy" alt="..." />Једна важна напомена: никада немојте користити лењо учитавање за слике које ће се највероватније налазити у почетно видљивом делу екрана, као што су главна насловна слика, лого или други садржај који је одмах видљив. Њихово одложено учитавање ће погоршати LCP, уместо да га побољша.
Завршне напомене
Оптимизација слика је једна од најефикаснијих ствари које можете урадити за перформансе веба. Већина сајтова има очигледан простор за побољшање: превелике слике, погрешне формате, одсуство лењог учитавања. Алати за решавање свега тога данас су зрели и добро подржани.