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

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

Сепак, оптимизацијата на слики е исто така областа каде што најлесно може да се направи хаос; причината не е во тоа што технологијата е премногу тешка, туку во тоа што информациите се премногу фрагментирани:
Прочитавте неколку статии и научивте за “компресија”, “WebP/AVIF” и “lazy loading”, но потоа ја гледате описот на додатокот и пишува “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.
• Jetpack Site Accelerator：Документација за џетпакОва значи дека ќе ги оптимизира сликите и ќе ги дистрибуира преку својата мрежа заедно со статичките ресурси.

Оптимизацијата на слики обезбедува сликите да се намалат по големина и соодветно да се прескалираат,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)

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

• Вие не се потпирате на услуги за компресија од трети страни кои наплаќаат според месечна квота или по датотека (иако некои функции може да бидат достапни како опционални услуги)
• Компромисот е што групната обработка може да наметне поголем товар врз серверот во однос на CPU/IO, што бара од вас да обрнете поголемо внимание на “стратегија и ризик”.”

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

• При генерирање на целиот сет на слики:ID-то на оригиналната слика ќе биде заменето со ID-то на 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 Image Optimizer: Водечки провајдер на бесплатна локална компресија

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

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

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

Ако користите Plus WebP за “стратегија за миграција/замена на формат”, тогаш EWWW е подобро прилагоден да се справи со:

• Оптимизација на компресија и волумен(особено оптимизацијата на сурови ресурси како што се JPG и PNG датотеки)
• Партијска оптимизација на историската медиумска библиотека(Целејќи “намалување на обемот” наместо “замена на URL”)

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

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

---

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

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

Подолу ќе објасниме: разликата помеѓу бесплатните и платените опции, како се одзема кредитот, најчестите замки што треба да ги избегнете и кои типови веб-страници најдобро одговараат на овие услуги.

---

3.2.1 ShortPixel: 100 бесплатни кредити месечно, но кредитите ќе се трошат за минијатури и зголемувања на WebP/AVIF

Што е со бесплатните и платените опции?

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

• 100 бесплатни кредити месечно
• Исто така, постојат и “дополнителни неограничени месечни кредити” (детали за цените се дадени на страницата на додатокот)
• Ние исто така нудиме “еднократни кредитни пакети кои никогаш не истекуваат” (заедно со информации за почетните цени)

Забелешка:

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

Официјалната база на знаење на ShortPixel исто така дава насоки за “еднократна лиценца наспроти неограничена месечна”.Јасно објаснување: Месечниот план Unlimited се фактурира месечно (или годишно), нудејќи неограничени кредити и фиксна квота од 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 Имаџифај: Бесплатно 20MB/месец; квотата се одзема врз основа на “големината на оригиналната слика + бројот на минијатури”; повторното компресирање ќе резултира со дуплирани одземања

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

Официјална страница за цени на ImagifyСе наведува сосема јасно:Бесплатните сметки имаат месечна квота од 20MB。
На страницата на неговиот додаток исто така се наведува дека може да компресира, менува големина и конвертира во 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 ТиниПНГ(Мали компресирани слики): 500 бесплатни кредити месечно; конверзијата во WebP/AVIF подлежи на дополнителен надомест од 1 кредит по големина“

Бесплатни надоместоци и како се пресметуваат

Страницата на WordPress-приклучокот TinyPNG е многу јасно напишана:

• 500 бесплатни кредити секој месец
• Во “стандардна инсталација на WordPress”, веројатно можете да компресирате Приближно 100 слики месечно
• Сепак, ако е овозможено конвертирање во AVIF или WebP:Секоја големина на слика ќе чини еден дополнителен кредит., па претпоставувам дека единствената опција е да го компресирам и конвертирам Приближно 50 слики месечно(Во зависност од тоа колку големини на минијатури имате.)

Во меѓувреме, Tinify (развивачот на TinyPNG и TinyJPG) исто така Страница за цени на APIВе молиме имајте предвид: Пријавете се за 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 при “замена на ИД-ови, бришење на оригиналните слики и замена на URL-адресите”: бидејќи ова претставува миграција на средства, не е препорачливо веднаш да се изврши целосна замена.

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

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

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

Посоодветен пат:

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

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

Кој нуди подобра вредност за парите и колку долго ќе трае бесплатниот пробен период?

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

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

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

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

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

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

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

6. Информирање за ризикот

Ризик 1: Избегнувајте повеќе додатоци да ја извршуваат истата задача

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

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

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

Да се повтори:Плус WebP Описот јасно наведува дека за време на целосна генерација, оригиналниот ID на сликата ќе биде презапишан, оригиналната датотека ќе биде избришана, а URL-адресата на содржината ќе биде заменета.
Ова значи дека не е “мала прилагодување што може да се поништи во секое време”, туку промена на ниво на средство.

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

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

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

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

Ризик 4: “Генериран е WebP/AVIF” не значи “front-ендот служи WebP/AVIF”

Многу луѓе сметаат дека нивната веб-страница не станала побрза по конверзијата; основниот проблем е што front-end-от сè уште испорачува JPG/PNG-датотеки (поради несогласување во некоја од следниве опции: кеширање, препишување, ознаки или преговарање со прелистувачот).

7. Како да проверам дали делува откако ќе завршам?

4 многу едноставни контролни точки:

1. Кога истата страница се освежува по вторпат, дали процесот на вчитување е постабилен и побрз?(Колку се забележуваат ефектите од кеширањето и оптимизацијата?)
2. Дали постои забележителна разлика во големината на сликите што се вчитуваат на мобилни уреди и на десктоп компјутери?(Одзивен извор/големини (дали функционира)
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 навистина се испорачуваат до клиентскиот дел зависи од фактори како препишување, политиката на ````, хитови во кешот и дали преговарањето со прелистувачот е ефективно. Откако ќе завршите, задолжително направете “спорадична проверка на типовите на ресурси на неколку слики”.

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

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

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

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

Едноставно кажано:

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

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

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

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

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

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

10. Зошто бесплатната квота од 201 TP234T/месец на 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 / Слика CDN ако ја земам Рута А или Б?

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

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

Најбрзиот начин за проверка:

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