Оптимизација слика на веб-сајту

Оптимизација слика један је од највише исплативих аспеката перформанси WordPress-а: са истом структуром странице и истом темом, једноставно прилагођавање величине датотеке слике, димензија, формата и начина испоруке често може довести до тренутног побољшања брзине учитавања.

Међутим, оптимизација слика је такође област у којој је најлакше направити неред; разлог није у томе што је технологија превише сложена, већ у томе што су информације превише фрагментисане:
Прочитали сте неколико чланака и сазнали о “компресији”, “WebP/AVIF” и “лењем учитавању”, али када погледате опис додатка, пише “100 бесплатних кредита месечно”, “20MB бесплатно” и “1 кредит по слици” — и што више читате, то сте више збуњени. Да ли је бесплатна квота заиста довољна? Како се наплате одбијају? Да ли сте погрешно разумели “исту ствар”? И најважније:Да ли је заиста радило када си завршио?

Овај чланак ради само три ствари:

1. Ево практичног саветаПлан развоја(Шта прво, шта потом)
2. Молимо вас да детаљно објасните опције које разматрате (шта тачно разликује бесплатну и плаћену верзију и за кога је свака најприкладнија)
3. Ево најчешћих замки на које треба да обратите пажњу (да не бисте морали да трошите време тражећи решења након што завршите)

1. Основе: Шта WordPress има, а шта нема

Ако прво не разумете шта је језгро WordPress-а већ урадило, вероватно ће се појавити две ситуације:

• Уместо да искористимо “бесплатне могућности” које су нам на располагању, завршили смо трошећи време и новац на измишљање точка.
• Мислио сам да ће WordPress “аутоматски конвертовати све старе слике у WebP/AVIF”, али испоставило се да не.

Језгро WordPress-а већ укључује ове кључне функције:

• Респонзивне слике (srcset/sizes): Од WordPress-а 4.4 па надаље, језгро ће излазити слике srcset 与 sizes... и користи више величина слика генерисаних током отпремања како би прегледач могао да изабере и учита најприкладнији ресурс у зависности од услова екрана.
• Урођено лењо учитавање: Од WordPress-а 5.5 па надаље, изворно лењо учитавање је подразумевано омогућено за слике, користећи HTML стандарде loading Имплементација својства.
• Подржава отпремање WebP слика: Од WordPress-а 5.8 па надаље, можете да отпремате и користите WebP датотеке на исти начин као JPEG и PNG (уколико ваше хостинг окружење подржава WebP).
• Подржава AVIF отпремањеОд WordPress-а 6.5 па надаље, AVIF фајлови могу да се отпремају и користе на исти начин као JPEG и PNG фајлови (у зависности од подршке хостинг окружења).

Имајте, међутим, у виду:
“Подршка за отпремање/коришћење” ≠ “аутоматска конверзија/аутоматска испорука”.
Другим речима: чак и ако сте већ на WP 6.5, JPG/PNG фајлови у вашој медијској библиотеци неће се аутоматски конвертовати у WebP/AVIF; нити ћете аутоматски добити пуну функционалност “издавања AVIF/WebP у зависности од могућности прегледача и повратног коришћења оригиналне слике за прегледаче који то не подржавају” — за тај део обично је потребан додатак или услуга да попуни ту празнину.

2. Мапа пута: Водич у 5 корака за оптимизацију слика

Шта радити, зашто, шта представља пролаз и који су уобичајени замки.

2.1 Прво исправно одредите “димензије” (најлакше је за превидети, али доноси највеће користи)

Многи веб-сајтови су спори не зато што нису оптимизовани, већ зато штоПреузета је слика која је много већа од површине екрана.：
На пример, ако је страница заправо широка само 900 пиксела, али натерате посетиоце да преузму оригиналну слику ширине 3000 пиксела, прегледач ће једноставно преузети ту слику и затим је смањити за приказ. Ово троши пропусни опсег, повећава време декодирања и успорава учитавање првог екрана.

За WordPress 4.4 и новијеМеханизам прилагодљивих слика（srcset/sizes) је дизајниран управо да реши овај проблем.

Шта се сматра пролазом:

• Када се страница отвори на мобилном уређају, преузете слике треба да буду приметно мање него на десктопу.
• Величина датотеке исте слике варира у зависности од уређаја (уместо да се увек преузима оригинална слика)

Најчешће замке:

• Неке теме или градитељи третирају слике као CSS позадинске слике или их приказују на прилагођен начин, што може заобићи srcset, што резултује тиме да се велика слика наставља учитавати
• Ако користите спољне услуге хостинга слика или блокове слика трећих страна, можда ћете моћи да заобиђете систем више величина који генерише библиотека медија.

---

2.2 Компресија (смањење величине датотеке без угрожавања квалитета)

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

Правила су следећа:

• Фотографије/Снимци из стварног живота (портрети, производи, пејзажи): Дајте предност компресији са губитком података (максимална корист)
• Скриншотови/слике које садрже много текста: Користите конзервативније подешавање компресије како бисте избегли замућење текста
• Лого/Икона: Дајте предност SVG-у или пажљиво користите бесконтактну компресију (контактна компресија може лако да изазове замућене ивице)

Шта се сматра пролазом:

• Величина датотека већине слика на страницама значајно је смањена.
• Нема приметног шума, замагљених ивица, тракастог ефекта боја или замагљеног текста.

---

2.3 WebP / AVIF (Политика формата: мања величина датотеке за исти ниво јасноће)

WordPress сада подржава отпремање датотека. WebP (5.8) и AVIF (6.5)。
Међутим, да би се “формат следеће генерације” ставио у практичну употребу, обично је потребно решити два питања:

1. Како масовним конвертовањем претворити историјску медијску библиотеку(У супротном, оптимизоваћете само нове слике које буду учитане у будућности)
2. Да ли да направим копију или заменим оригиналну слику?(Ово је кључна тачка; касније ћемо се усредсредити на функцију Plus WebP-а за замену и брисање оригиналне слике.)

Препоручени приступ:

• WebP: Обично је подразумевани избор (нуди поузданију компатибилност)
• AVIF: напреднији формат компресије, погодан за велике слике, велике слике на првом екрану и галеријске слике (али вишеослањајући се на подршку животне средине）

---

2.4 Користите лењо учитавање исправно (не примењујте универзални приступ)

Од WordPress-а 5.5 надаљеСтандардно лењичко учитавањеСлика.
То смањује потрошњу пропусног опсега током почетног рендеровања:

• Лењо учитавање је погодно за ресурсе ван екрана.“
• Велика слика на врху странице (која је често најважнија слика на првом екрану) обично није погодна за одложено учитавање.

---

2.5 Слој испоруке: CDN / Слика CDN

Компресија, величина и формат датотека служе томе да датотеке буду мање и прикладније.
Међутим, ако се слике непрестано преузимају са удаљеног оригиналног сервера, мрежна латенција и даље значајно утиче на корисничко искуство. У таквим случајевима потребно је решење “слоја испоруке” (CDN/image CDN).

Два типична приступа:

• Cloudflare Пољска：Документација Cloudflare-аОвај одељак представља методе компресије доступне на пољском (безгубитна, губитна и WebP), и помиње употребу format=auto Формати WebP и AVIF су дозвољени.
• Акцелератор сајта Џетпак：Документација за џетпакТо значи да ће оптимизовати слике и дистрибуирати их преко своје мреже заједно са статичким ресурсима.

Оптимизација слика обезбеђује да се слике смање и прилагоде одговарајућим димензијама,CDN: Достава ближе и поузданије

3. Избор руте: Следите само две главне руте

Најчешћа грешка у оптимизацији слика није “неинсталирање додатка”, већ инсталирање превише додатака, што доводи до дуплирања обраде:
A компримује, B такође компримује; A конвертује у WebP/AVIF, B ради исто; A мења URL-ове, B врши преписивање URL-ова — на крају чак ни ти не можеш да схватиш шта се заправо дешава са сајтом.

Правила:

Држите се једног приступа: или потпуно бесплатно локално решење, или једне од три облачне опције.

• Рута А (целосно бесплатна локална):Плус WebP или AVIF + EWWW Image Optimizer(или изаберите само један)
• Опција Б (Изаберите једну од три методе компресије у облаку):ShortPixel / Imagify / TinyPNG

---

3.1 Опција А: Потпуно бесплатан локални хостинг (плус WebP или AVIF или EWWW)

Кључне карактеристике ове руте су:

• Не ослањате се на услуге компресије трећих страна које наплаћују по месечној квоти или по датотеци (иако неке функције могу бити доступне као опционе услуге)
• Компромис је у томе што пакетна обрада може да оптерети сервер више (1 TP по 205 T/IO), захтевајући да посветите већу пажњу “стратегији и ризику”.”

3.1.1 Плус WebP или AVIF: Основна концепција је “генерација/замена”; то није “алат за компресију” у традиционалном смислу”

• При генерисању целог сета слика:ИД оригиналне датотеке са сликом биће преписан датотеком WebP/AVIF, оригинална датотека ће бити избрисана, а сви URL-ови у садржају ће такође бити замењени.。
• Плугин обезбеђује WP-CLI команде и саветује да је WP-CLI поузданији при раду са великим бројем фајлова.

Ово значи: то не само да “тихо генерише WebP фајл за вас”, већ може битиПренос имовине(посебно када омогућите опцију “Замени и обриши оригинал”)

Разлика између два режима

Опција 1: Сачувајте оригиналну слику + генеришите WebP/AVIF копије (поузданије)

• Предност: Лакше је вратити у претходно стање ако дође до проблема са компатибилношћу.
• Недостатак: Употреба диска ће се повећати (оригинална слика + нови формат + више величина минијатура)

Метод 2: Заменити и обрисати оригиналну слику (радикалније)

• Предности: Диск се неће толико брзо попунити; унутрашњи линкови се аутоматски претварају у нови формат.
• Ризик: Ако измените и имовинске датотеке и њихове референце, отклањање проблема компатибилности биће скупље (посебно ако се одређени спољни системи или логика теме ослањају на оригиналне називе датотека, путање или формате).

Уобичајене замке са WebP или AVIF

1. Након потпуне замене библиотеке, слике на одређеним страницама се приказују неправилно.
   Узрок обично није у томе што је “слика покварена”, већ у томе што је негде у ланцу дошло до квара — као што су промена URL-а, кеширање или политика минијатура.
2. Што је више минијатура, то је обим промена већи.
   Постављање слике на WordPress генерише више величина; теме и додаци могу додати још више. Потпуна замена значи да ћете можда модификовати веома велики скуп фајлова.
3. Само конвертовање формата не мора нужно да резултује најмањом величином датотеке.
   Датотеке WebP и AVIF су генерално мање, али “стратегије димензионисања” и “стратегије компресије” и даље су кључне. Не третирајте Plus WebP као “решење са једним кликом” за брже време учитавања.

---

3.1.2 Еуув оптимизатор слика: водећи провајдер бесплатне локалне компресије

Страница додатка EWWW има врло јасну сврху:

• Може да оптимизује слике на вашем серверу користећи низ алата (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp итд.)
• Ако вам је потребна већа компресија или желите да уштедите на CPU, можете такође пребацити обраду која троши CPU на ваш сервер (опционо).

Какву улогу треба да игра EWWW у Рути А?

Ако користите Plus WebP за стратегију миграције/замене формата, онда је EWWW боље прилагођен за обраду:

• Оптимизација компресије и обима(посебно оптимизација сирових ресурса као што су JPG и PNG датотеке)
• Партијска оптимизација историјске медијске библиотеке(Циљ је “смањење обима”, а не “замена УРЛ-а”)

Типична замка EWWW

1. Оптерећење сервера се повећава током групне оптимизације
   То је зато што локално компримовање троши CPU/IO. Решење није да се престане са његовом употребом, већ да се обрађује у серијама током ванпикованих сати и, где је потребно, да се одабере пренос на спољни уређај или облачна решења.
2. “WebP је генерисан” не мора нужно да значи да фронтенд заправо испоручује WebP.
   Многи додаци погрешно мисле да је генерисање једна ствар, док су стратегије испоруке (као што су преписивање, `picture` ознаке и истек кеша) сасвим друга ствар.
3. Дуплира функционалност другог додатка
   Ако се одлучите за Приступ А, покушајте да избегнете коришћење додатних облачних услуга за компресију као што су ShortPixel, Imagify или TinyPNG; ако се одлучите за Приступ Б, немојте омогућити логику замене у Plus WebP. Основни принцип је:Придржавај се једног плана деловања.

---

3.2 Опција Б: Изаберите једну од три услуге за компресију у облаку (ShortPixel / Imagify / TinyPNG)

Овај план је идеалан за оне који желе да штеде ресурсе сервера, преферирају безбрижан приступ групној обради и удобно се осећају са наплатом заснованом на коришћењу или на принципу “плати потрошњу”.
Међутим, најчешћа тачка неспоразума у вези са компресијом у облаку је:Бесплатна квота није само питање “бесплатних листова”.Број величина минијатура, да ли се генеришу WebP/AVIF формати и да ли се слике поново компримују, све ће значајно утицати на потрошњу ресурса.

У наставку ћемо објаснити разлику између бесплатних и плаћених опција, како се кредит одбија, најчешће замке које треба избегавати и које врсте веб-сајтова су најприкладније за ову услугу.

---

3.2.1 ШортПиксел: 100 бесплатних кредита месечно, али ће се кредити трошити на минијатуре и увећања у WebP/AVIF формату

У чему је ствар са бесплатним и плаћеним опцијама?

Опис додатка ShortPixel јасно наводи:

• 100 бесплатних кредита месечно
• Постоје и “додатни неограничени месечни кредити” (појединости о ценама налазе се на страници додатка)
• Такође нудимо “једнократне пакете кредита који никада не истичу” (заједно са информацијама о почетним ценама)

Напомена:

• Бесплатно: Сваког месеца се обезбеђује одређен број кредита за коришћење на лаким веб-сајтовима или за тестирање.
• Једнократни пакет: Погодан за сајтове са великом медијском библиотеком који желе да у потпуности испразне свој инвентар једним потезом (купује се једном и важи док се не потроши; обично нема рок трајања)
• Месечно/неограничено: погодно за сајтове који захтевају редовна ажурирања слика и дугорочну, стабилну оптимизацију

Званична база знања ShortPixel такође пружа смернице о “једнократном пакету у односу на неограничени месечни”.Јасно објашњење: Месечни план Unlimited Monthly се наплаћује месечно (или годишње), нудећи неограничене кредите и фиксну квоту од CDN; једнократни кредити не истичу, што вам пружа већу контролу над коришћењем кад год је то потребно.

Најважније: Како се израчунавају ShortPixel кредити?

Званична документација ShortPixel KB је то рекао веома отворено:

• Када отпремите слику у WordPress, он генерише неколико минијатура;
• Оптимизација сваке минијатуре рачуна се као један кредит.；
• Ако изаберете да генеришете WebP или AVIF,Свака WebP/AVIF верзија оригиналне слике и њен минијатурни приказ биће рачунати као додатни кредит.；
• Можете искључити одређене минијатуре из оптимизације како бисте смањили потрошњу кредита.

Кредити пример：

Поставимо да отпремате једну слику, а тема или додатак генеришу осам минијатура:

• Оптимизујте само оригиналну слику и минијатуре: 1 (оригинална слика) + 8 (минијатуре) = 9 кредита
• Ако такође желите да генеришете WebP/AVIF: додајте верзију нове генерације за сваку од горе наведених 9 → плус 9 кредита
  Другим речима, оно што бисте могли сматрати “једном сликом” заправо би могло коштати скоро “двоцифрене кредите”.

Стога:“100 бесплатних кредита” не значи “100 бесплатних слика”.

Најчешће замке у вези са ShortPixel

1. 100 бесплатних кредита ће ускоро истећи
   Разлог: велики број минијатура + додатно време обраде потребно за генерисање WebP/AVIF датотека.
   Препорука：

• Прво процените број минијатура на сајту.
• Уклоните непотребне величине минијатура (оптимизујте само величине које ће заиста бити коришћене)
• Прво одлучите о стратегији компресије, а затим покрените процес у серијама како не бисте губили време на покушаје и грешке.

2. Користити у комбинацији са другим додатцима за конверзију формата
   Ако омогућите замену Plus WebP и такође затражите од ShortPixel-а да генерише и убаци тагове нове генерације, логика ће се преклапати, што отежава отклањање проблема. Са опцијом Б, ShortPixel сам обавља овај задатак.
3. Претпоставио сам да ће, када буде инсталиран, фронтенд аутоматски генерисати WebP/AVIF датотеке.“
   Страница додатка ShortPixelВреди напоменути да може да конвертује WebP и AVIF датотеке и да угради слике нове генерације у фронтенд странице (на пример, путем тагова).
   Међутим, и даље морате да проверите резултате када завршите.

---

3.2.2 Имаџифај: Бесплатно 201 ТП, 235 ТП/месец; квота се одбија на основу “оригиналне величине слике + броја минијатура”; поновно отпремање ће довести до дуплираних одбијања

Бесплатна дозвола и локација

Званична страница са ценама за ImagifyНаведено је сасвим јасно:Бесплатни налози имају месечну квоту од 201–235 ТБ。
На страници додатка такође се наводи да може да компримује, мења величину и конвертује у WebP/AVIF.

Како се одбија квоте?

Званична документација Imagify “Како се израчунава коришћење квоте?” врло јасно објашњава механизам наплате:

• Број минијатура утиче на потрошњу ресурса.На пример, ако имате 10 величина минијатура, оптимизација једне слике резултираће оптимизацијом 11 слика (оригинална слика плус 10 минијатура), које ће све бити урачунате у вашу квоту.
• Одузмите квоту на основу оригиналне величине датотеке.На пример, ако отпремите слику од 100 KB на Imagify, 100 KB ће бити одузето из ваше квоте.
• Промена нивоа компресије и поновно оптимизовање ће поново потрошити квоту.。
• Један API кључ може да се користи на више сајтова, али квота се дели између њих.

Ово је “основна приступ” компаније Imagify:
То је више као пакет података: што више отпремате, то више се одбија; што више минијатура отпремате, то више се одбија; и ако исти садржај поново и поново отпремате, сваки пут ће се наплатити накнада.

Једноставан пример квота Imagify-а

Поставите да сте отпложили оригиналну слику од 800 KB, а сајт генерише 8 минијатура.

• Када оптимизујете помоћу Imagify-а, укључују се и “оригинална слика и 8 минијатура” (ако изаберете “Оптимизуј све”), што значи да ће ова операција потрошити квоту која је скоро једнака укупној величини свих тих датотека.
  Зато неке веб-странице примећују да им квота “20MB” брзо истекне: није да Imagify није довољан за задатак, већ су слике које отпремате превелике, генеришете превише минијатура и можда поново и поново експериментишете са различитим нивоима компресије.

Најчешће замке са Imagify

1. Бесплатни 20MB нису довољни за обављање “потпуног брисања историје сајта”
   20MB је генерално боље прилагођен тестирању и малим ажурирањима; ако је ваша медијска библиотека већ велика, њено потпуно чишћење ће вероватно захтевати надоградњу.
2. Поновљено подешавање нивоа компресије доводи до тога да се квота поново и поново исцрпљује.
   Imagify: Јасно објашњењеПоновно оптимизовање ће поново искористити квоту.
   Препоручујемо да на овој страници јасно изложите “стратегију”:

• Започните користећи мали број слика да бисте одредили ниво компресије и визуелну квалитету.
• Када се стратегија коначно финализује, покрените је у серијама.
  Избегавајте покушаје и грешке на целој бази података.

3. Дељење једног API кључа на више сајтова изазива “мистериозно смањење” квота.”
   Ако користите исти API кључ на више сајтова, квоте ће бити заједничке.
   Стога је у тимским или вишелокацијским сценаријима најбоље разјаснити које локације деле ресурсе, а које послују независно, како би се избегло прекорачење буџета.

---

3.2.3 ТиниПНГ(Tiny Compress Images): 500 бесплатних кредита месечно; конверзија у WebP/AVIF подразумева додатну накнаду од 1 кредита по величини“

Бесплатне накнаде и како се рачунају

Страница TinyPNG WordPress додатка је веома јасно написана:

• 500 бесплатних кредита сваког месеца
• У “стандардној инсталацији WordPress-а”, вероватно можете да компримујете Приближно 100 слика месечно
• Међутим, ако је омогућена конверзија у AVIF или WebP:Свака величина слике коштаће један додатни кредит., па претпостављам да је једина опција да га компримујем и конвертујем Приближно 50 слика месечно(У зависности од тога колико величина минијатура имате.)

У међувремену, Тинифај (развијач TinyPNG и TinyJPG) је такође Страница за цене АПИ-јаИмајте у виду: пријавите се да бисте добили 500 бесплатних компресија месечно; када се тај лимит пређе, биће вам наплаћено на основу броја успешних компресија, без обавезне претплате.

Да резимирамо како TinyPNG функционише у једној реченици:
Рачуна се у кредитима; што више величина минијатура имате и што више омогућавате WebP/AVIF, то ће вам се кредити брже трошити.

Једноставан пример TinyPNG кредита

Поставимо да ваш сајт генерише осам величина минијатура за сваку слику:

• Само компресија: оригинална слика + 8 минијатура → потребна су 9 кредита
• Ако је омогућена конверзија у WebP/AVIF: за сваку величину ће бити одузет додатни кредит → ово може готово удвостручити укупне трошкове
  Ово одговара опису на страници додатка: када је конверзија омогућена, бесплатна квота се мења са отприлике “100 по месецу” на “50 по месецу”.

Најчешће замке са TinyPNG

1. Мислио сам да 500 кредита значи 500 слика.
   Не. Наплаћује се на основу “величине/варијанте слике”. Страница додатка јасно наводи да ће конверзија коштати додатни 1 кредит по величини слике.
2. Тема/плагин за е-трговину генерише превише величина слика, а бесплатна квота је значајно смањена.
   Што више димензија постоји, то је лакше да се кредити исцрпе.
3. Након активирања конверзије, открио сам да ми је кредитни лимит изненада истекао.
   Ово није баг; ово је начин на који функционише систем наплате.
   Стратешке препоруке:

• Ако је бесплатна фаза првенствено намењена компресији и смањењу тежине, можете почети једноставно применом компресије. Када потврдите да је структура сајта стабилна и да вам заиста треба следећа генерација, можете започети конверзију.

4. Препоруке по сценарију: Како одабрати за различите типове веб-сајтова

Иако сви раде на WordPress-у, “проблемске тачке” у вези са сликама разликују се између сајтова са садржајем, сајтова за е-трговину, портфолија и сајтова за чланство.

4.1 Сајтови/блогови са садржајем (који садрже бројне слике и чланке, са умереном учесталошћу ажурирања)

Приоритетне препоруке:

1. Стратегија димензионисања (корак 1)
2. Компресија (корак 2)
3. WebP (корак 3)

Погоднија рута:

• Ако желите опцију без муке: изаберите једну од три у Опцији Б (ShortPixel / Imagify / TinyPNG)
• Ако желите бесплатну опцију: Рута А (Plus WebP + EWWW), али препоручујемо да прво започнете са “Конзервативним режимом (не бришите оригиналне слике)” како бисте прво проценили ризике.

Уобичајене замке:

• Слика у заглављу странице чланка је веома велика, а стратегија лењог учитавања је лоше имплементирана.То ће успорити учитавање прве странице.

4.2 Веб-сајтови за е-трговину/производе (са бројним минијатурама и варијацијама слика; стабилност је од пресудне важности)

Најчешћи проблеми у е-трговини нису у томе што је “квалитет компресије лош”, већ у томе што су одређене димензије након оптимизације нетачне, минијатуре недостају или фронтенд компоненте не могу да преузму слике.

Приоритетне препоруке:

1. Започните опрезно: усвојте конзервативну стратегију компресије; немојте одмах прибегавати потпуној замени базе података.
2. Процена величина минијатура: Теме за е-трговину обично генеришу више величина, што може значајно повећати потрошњу података (ово је посебно приметно код ShortPixel и TinyPNG).
3. Прво спроведите малопробни тест, а затим га проширите на ширу публику (ово је апсолутно кључно)

Погоднија рута:

• Опција Б је обично безпроблеман избор: ShortPixel, Imagify и TinyPNG подржавају групну обраду; кључно је разумети систем квота и унапред проценити трошкове.
• Опција А је такође прихватљива, али требало би да будете опрезнији у вези са понашањем Plus WebP-а приликом “преписивања ИД-ова, брисања оригиналних слика и замене УРЛ-ова”: пошто то представља миграцију средстава, није препоручљиво све заменити одједном.

4.3 Портфолији/веб-сајтови за фотографију (где је квалитет слике критичан, датотеке су велике, а визуелна привлачност је од пресудне важности)

Приоритетне препоруке:

1. Стратегија димензионисања (Контрола површине приказа)
2. Стратегија компресије (боље је имати мало већи фајл него изгубити детаље)
3. WebP/AVIF (користи су очигледне за велике слике, али визуелна квалитет треба проверити)

Погоднија рута:

• Имаџифај: Пошто се квота одбија на основу “оригиналне величине слике”, ова врста сајта олакшава контролу трошкова (јер отприлике знате колико ће коштати свака велика слика), али требало би да избегавате поновно отпремање истих слика.
• ШортПикселАко нема превише величина минијатура, потрошња кредита је прилично једноставна; међутим, ако генеришете велики број величина и верзија следеће генерације, потрошња кредита ће значајно порасти, па ћете морати да планирате унапред.

5. Квота у односу на наплату: Детаљан преглед да ли је бесплатна квота довољна

Који нуди бољу вредност за новац и колико ће трајати бесплатни пробни период?

5.1 Три модела наплате

• ШортПиксел(о заслугама)Кредити се израчунавају на основу броја оригиналних слика и минијатура; генерисање WebP/AVIF фајлова подразумева додатно наплаћивање кредита за сваку одговарајућу верзију.
• Имаџифај(квота 1ТП235Т)Квота се одбија на основу “оригиналне величине датотеке”; што је више минијатура, то се више квоте троши; поновна компресија ће довести до додатног одбијања квоте.
• ТиниПНГ(о заслугама): 500 кредита месечно; омогућавање конверзије у WebP/AVIF формат подразумева додатну накнаду по величини слике.

5.2 Методе брзе процене

Можете га проценити на следећи начин:

1. Изаберите било коју “оригиналну слику коју често отпремате” и проверите њену приближну величину (нпр. 300KB / 1MB / 3MB)
2. То зависи од тога колико величина минијатура ваш сајт обично генерише (нпр. 5, 10 или 20)
3. Одлучите да ли желите да генеришете WebP/AVIF (Да/Не)

Затим користите “менталну аритметику” у наставку да бисте разумели потрошњу:

• ШортПикселЗа сваку слику ≈ (1 + број минијатура) кредита; ако се генеришу WebP/AVIF, ≈ дупло толико (јер и верзије нове генерације захтевају кредите)
• ИмаџифајКвота за сваку слику је приближно (величина оригиналне слике + укупна величина свих минијатура); промена нивоа компресије и поновна компресија слике довешће до додатног одбијања од квоте.
• ТиниПНГ: 500 бесплатних кредита; ако ваш сајт генерише велики број величина по слици и омогућена је конверзија слика, број бесплатних слика ће значајно опасти (страница додатка пружа грубу процену од “око 100 месечно” и “око 50 месечно”)

6. Обавештење о ризику

Ризик 1: Избегавајте да више додатака обавља исти задатак

Ово је најчешћи “извор катастрофе”

• Рута А:Плус WebP или AVIF + EWWW(Поделите задатке између ова два; не извршавајте конверзију и доставу истовремено, или инсталирајте само једно од њих)
• Опција Б: ShortPixel / Imagify / TinyPNG Изаберите једно од три(Изаберите једног за обраду компресије и следеће генерације)

Ризик 2: Поред тога, функције WebP-а “Преписати ИД / Избрисати оригиналну слику / Заменити УРЛ” представљају миграцију средстава.

Да поновим:Плус WebP Опис јасно наводи да ће током целе генерације оригинални ИД слике бити преписан, оригинална датотека ће бити избрисана, а УРЛ садржаја ће бити замењен.
То значи да то није “мања прилагодба коју се може у било ком тренутку поништити”, већ промена на нивоу имовине.

Препоручена стратегија би требало да буде:

• Започните са тестом малог обима (од неколико десетина до неколико стотина)
• Потврдите да предњи приказ, минијатуре и ажурирања кеша исправно функционишу.
• Размотрите обраду целе базе података

Ризик 3: Стварна потрошња “бесплатне квоте” за компресију облака зависи од броја минијатура и избора опција нове генерације.

• ШортПикселМинијатуре и функције нове генерације имаће значајан утицај на титлове.
• ТиниПНГОмогућавање WebP/AVIF-а ће довести до додатног одбитка кредита за сваку величину слике.
• Имаџифај: Накнаде се заснивају на оригиналној величини слике; што је више минијатура, то су накнаде веће; поновљено преузимање подлеже додатним накнадама

Ризик 4: “Генерисан је WebP/AVIF” не значи “да фронтенд испоручује WebP/AVIF”

Многи људи сматрају да њихов сајт није постао бржи након конверзије; основни узрок је што фронтенд и даље испоручује JPG/PNG фајлове (због неусклађености у неком од следећих: кеширању, преписивању, ознакама или преговарању прегледача).

7. Како да проверим да ли је деловање почело када завршим?

4 веома једноставне контролне тачке:

1. Када другу пут освежите исту страницу, да ли је процес учитавања стабилнији и бржи?(Колико су приметни ефекти кеширања и оптимизације?)
2. Да ли је приметна разлика у величини слика које се учитавају на мобилним уређајима и на десктоп рачунарима?(Респонзиван srcset/sizes (да ли функционише)
3. Случајно проверите неколико слика: да ли постоје WebP или AVIF датотеке/ресурси?(Да ли сајт заправо користи следеће генерације）
4. Погледајте неколико слика: зумирајте да видите да ли су приметно замућене или да ли текст изгледа нејасно.(Да ли је компресија прејака?)

Ако се све четири примењују, то значи да је рута коју сте изабрали већ у функцији. Затим пређите на CDN “Слој испоруке”...у целини ће бити стабилније.

8. Препоруке за акцију

1. Прво, изаберите руту:

• Желео бих да га одржим што слободнијим.: Плус WebP или AVIF + EWWW (или инсталирајте само један од њих)
• Желите ли да уштедите на серверским ресурсима? Плаћање по употреби је без већег гњаважа.: Изаберите један од ShortPixel, Imagify или TinyPNG

2. Почните са тестом малог обима (неколико десетина)
3. Проверите да ли је све у реду пре обраде у серијама.
4. Поузданост испоруке треба даље побољшати:Читање CDN убрзање

Често постављана питања

1. Колико додатака треба да инсталирам? Могу ли да инсталирам све?

Покушај да се држиш једне руте.

• Опција А: Plus WebP или AVIF + EWWW Image Optimizer (или инсталирати само један од њих)
• Опција Б: Изаберите једну од ShortPixel, Imagify или TinyPNG
  Покретање више додатака на истом сајту ради истовременог компримовања, конверзије у WebP или AVIF, измене URL-ова и преписавања испоруке је најсигурнији начин да се направи неред и најтеже је за отклањање проблема.

2. Зар WordPress већ не подржава WebP/AVIF? Да ли ми и даље треба додатак?

Важно је разликовати између:
“Подршка за отпремање/коришћење” ≠ “аутоматска конверзија/аутоматска испорука”.
WordPress 6.5 неће аутоматски масовним конвертовати постојеће JPG/PNG фајлове у WebP/AVIF, нити ће аутоматски управљати целим процесом “сервирања AVIF/WebP у зависности од могућности прегледача уз повратак на оригинални формат”. Да бисте осигурали да је ваша постојећа библиотека медија такође ажурирана, обично ћете морати да користите додатак или услугу да попуните празнине.

3. Када је у питању оптимизација слика, који корак заправо пружа највећи повраћај улагања?

Обично Прво исправно одредите димензије (srcset/sizes)。
Многи веб-сајтови су спори не зато што нису компримовани, већ зато што приказују страницу ширине свега 900 пиксела, а приморавају кориснике да преузму оригиналну слику од 3000 пиксела. Компресија може уштедети неколико килобајта, али “погрешне димензије” ће резултирати тиме да преузмете неколико пута више података без икаквог разлога.

4. Како могу бити сигуран да се учитава “мања верзија”, а не оригинална слика?

Размотрите два феномена:

• Када се прегледају на мобилном уређају, преузете слике су приметно мање него на десктопу.
• Величина датотеке исте слике варира у зависности од уређаја на којем је учитана.
  Ако се слике увек преузимају у оригиналној величини, то је често зато што тема или алат за изградњу третира слику као CSS позадинску слику или прилагођени излаз, чиме заобилази подршку медијске библиотеке за више димензија и атрибут `srcset`.

5. Да ли “генерисано WebP/AVIF” нужно значи да фронтенд исписује WebP/AVIF?

није једнако
Генерација је потпуна само на нивоу датотеке; да ли се WebP/AVIF заиста испоручује прегледачу зависи од фактора као што су преписивање, политика тага `picture`, погођања кеша и ефикасност преговарања прегледача. Када завршите, обавезно насумично проверите типове ресурса неколико слика.

6. Који су тачно ризици повезани са WebP или AVIF? Могу ли да покренем скенирање једним кликом на целој бази података?

Ризик не лежи у “компресији”, већ уПромене у нивоима миграције средстава：

• При генерисању целог сета, ИД-ови оригиналних слика могу бити преписани, оригиналне датотеке могу бити избрисане, а УРЛ-ови унутар садржаја могу бити замењени.
  ДаклеНе препоручујемо да одмах замените целу базу података.: Почните са тестом малог обима (неколико десетина до неколико стотина записа) и уверите се да имате функционалну резервну копију пре него што наставите са целим базама података.

7. Како да изаберете између два режима у Plus WebP: да задржите оригиналну слику или да замените и обришете оригиналну слику?

Једноставним речима:

• Опција 1: Сачувајте оригиналну слику + генеришите WebP/AVIF копије (поузданије): Лако се враћати, али заузима више простора на диску (оригинална слика + нови формат + више величина минијатура).
• Метод 2: Заменити и обрисати оригиналну слику (радикалније)Диск није склони ширењу, али ако мењате ресурсе и референце, отклањање проблема компатибилности постаје скупље.
  Што је сајт сложенији (е-трговина, више додатака, више величина), то више препоручујемо да се започне са стабилнијим приступом.

8. Да ли је бесплатна локална компресија коју нуди EWWW Image Optimizer довољна? Да ли ће преоптеретити сервер?

EWWW је више као “локални алат за компресију”: троши CPU/IO.
Често се дешава да се оптерећење повећа током оптимизације серија; то не значи да систем “заказује”, већ да је потребно применити правилан приступ: обрађивати у серијама, током ванпикованих сати и, по потреби, користити преузимање или облачна решења.
Ако тражите решење без муке или ако су вам ресурси сервера ограничени, опција Б је погоднија за сервер.

9. ShortPixel нуди 100 бесплатних кредита месечно, па зашто имам утисак да су већ потрошени након само неколико слика?

јер “Кредити” се не односи на "број слика", биће увећано минијатурама и наредном генерацијом:

• Оригинална слика + кредит за сваку минијатуру
• Ако се генеришу WebP/AVIF датотеке, свака одговарајућа верзија ће имати додатни трошак у кредитима.
  Дакле, оно што бисте могли помислити да је “једна слика” заправо може потрошити скоро “двоцифрене кредите”. ShortPixel

10. Зашто се бесплатних 201 TP235T месечно које нуди Imagify тако брзо потроше?

Imagify је више као “пакет података”:

• Према вашој поруциПрвобитна величина датотекеодузети од квоте
• Што је више минијатура, већа је потрошња ресурса.
• Промена нивоа компресије и поновно оптимизовање ће поново потрошити квоту
• Један API кључ може да се користи на више сајтова, са заједничким квотама.
  Дакле, порука “20MB ће ускоро истећи” често је узрокована превеликим сликама, превише минијатура или поновљеним покушајима и грешкама.

11. TinyPNG нуди 500 бесплатних кредита месечно, па зашто додатак каже да је на располагању само око 100 слика месечно и зашто тај број опада на 50 слика месечно након омогућавања WebP/AVIF?

То је зато што се TinyPNG кредити такође увећавају у одељку “Димензије/Варјанте”:

• Стандардна инсталација WordPress-а обично компримује око 100 слика месечно.
• Омогућите AVIF или WebP конверзију:Свака величина слике коштаће један додатни кредит., тако да вероватно могу да компримујем и конвертујем само око 50 слика месечно (у зависности од броја величина минијатура).
  Дакле, 500 кредита ≠ 500 слика.

12. Колико минијатура има на нашем сајту? Зашто оне имају тако значајан утицај?

Постављање слике на WordPress генерише више величина; теме и додаци (посебно они за е-трговину) могу генерисати још више.
При облачном компримовању, кредити или квоте се обично рачунају на основу укупне величине оригиналне слике и њених минијатура, па што је више минијатура, то се брже троши бесплатна квота.

13. Да ли лењо учитавање увек убрзава ствари? Зашто неки људи кажу да лењо учитавање заправо успорава ствари?

Лењо учитавање је погодно за ресурсе ван екрана.
Ако се најважнија велика слика на првом екрану такође учитава са закашњењем, то може успорити почетно искуство учитавања. Иако је подразумевано лењо учитавање у WordPress-у 5.5 и новијим верзијама у реду, не бисте га требали примењивати свуда.

14. Када ми је потребан CDN / Image CDN ако узмем руту A или B?

Компресија, величина и формат датотеке решавају питање смањења величине и погоднијег прилагођавања датотека;
CDN обезбеђује брже и поузданије испоруке。
Када постоји значајна латенција због преузимања слика са удаљеног оригиналног сервера, додавање CDN по слици (нпр. Cloudflare Polish / Jetpack Site Accelerator) обично доводи до стабилнијег искуства. Прочитајте више WordPress CDN убрзање。

15. Када завршим, који је најлакши начин да проверим да ли заиста ради?

Најбржи начин за проверу:

• Када другу пут освежите исту страницу, да ли је процес учитавања стабилнији и бржи?
• Да ли је приметна разлика у величини слике између мобилне и десктоп верзије (да ли srcset/sizes функционише како је предвиђено)?
• Случајно проверите неколико слика: да ли постоје WebP или AVIF датотеке/ресурси?
• Погледајте неколико слика: зумирајте да видите да ли су приметно замућене или да ли текст изгледа нејасно.