WebP Express

ЧПП

Како да проверим да ли додатак ради?

Провера да ли додатак ради у режиму „Varied image responses“
1. Уверите се да ради бар један од начина претварања. Поред њега треба да буде зелена квачица.
2. Ако још нисте сачували, притисните „Save settings“. Тиме ће се правила преусмеравања ставити у .htaccess датотеке у одговарајућим директоријумима (обично у uploads, themes и wp-content/webp-express/webp-images, у зависности од подешавања „Scope“)
3. Претпостављам да сте означили бар једно од поља у одељку .htaccess правила – у супротном можете пребацити на режим „CDN friendly“. Прво
4. Притисните дугмад „Live test“ да бисте видели да укључена правила заиста раде. Ако не раде, могуће је да серверу треба мало времена да препозна измењена правила.

Тестови уживо су прилично темељни и препоручујем их у односу на ручни тест. Ипак, не шкоди да урадите и ручну проверу.

Ручна провера

Имајте у виду да када WebP Express прослеђује различите одговоре за слике, URL-ови слика и даље показују на jpg/png. Међутим, ако се URL посети прегледачем који подржава webp, одговор ће бити webp слика. Дакле, постоји неслагање између наставка датотеке (назив датотеке се завршава на „jpg“ или „png“) и врсте датотеке. Срећом, прегледач се не ослања на наставак да би одредио врсту датотеке, већ гледа само заглавље одговора Content-Type.

Да бисте проверили да ли додатак ради (без притискања дугмета за тест), урадите следеће:

• Отворите страницу у прегледачу који подржава webp, нпр. Google Chrome
• Десним тастером притисните страницу и изаберите „Inspect“
• Притисните језичак „Network“
• Поново учитајте страницу
• Пронађите jpeg или png слику на списку. У колони „type“ треба да пише „webp“

Можете погледати и заглавља. Када је WebP Express преусмерио на постојећу webp слику, биће присутно заглавље „X-WebP-Express“ са вредношћу „Redirected directly to existing webp“. Ако га нема (а означили сте „Enable redirection to converter“), требало би да видите заглавље „WebP-Convert-Log“ (WebP-Express користи WebP Convert за претварања).

Ниједан начин претварања не ради одмах

Не брините – имате могућности!

• Ако управљате другим Вордпрес сајтом (на којем локални начини претварања РАДЕ), можете тамо подесити WebP Express, а затим се повезати са њим подешавањем начина претварања „Remote WebP Express“.
• Можете подесити и начин претварања ewww. Да бисте га користили, морате купити API кључ. Не наплаћују кредите за webp претварања, тако да све што икада морате да платите је почетна накнада од једног долара 🙂 (осим ако не промене цене – на то немам утицаја). API кључ можете купити овде: https://ewww.io/plans/
• Написао сам шаблон писма које можете послати свом пружаоцу хостинга
• Можете покушати да оспособите неки од локалних претварача. Погледајте ову страницу на webp-convert викију. Постоји и ова скрипта за тестирање/решавање проблема која је згодна у таквим ситуацијама.
• На крају, ако имате приступ другом серверу и сналазите се са постављањем пројеката помоћу composer-а, можете поставити webp-convert-cloud-service. Отвореног је кода.

Наравно, постоји и могућност да користите сасвим други додатак. Могу да препоручим Optimole. Ако желите да га испробате и да ме притом подржите, пратите ову везу. То је партнерска веза и донеће ми награду ако се одлучите да се пријавите.

Не ради – иако пробна претварања раде, и даље се прослеђују jpeg слике

Заправо, можда грешите, па се прво уверите да нисте направили врло честу грешку мислећи да нешто са URL-ом example.com/image.jpg мора бити jpeg слика. Додатак прослеђује webp слике на истом URL-у као и оригиналне (непретворене) слике, па немојте дозволити да вас изглед превари! Збуњени сте? Погледајте следећу ставку ЧПП.

Под претпоставком да сте прегледали заглавље врсте садржаја и да оно не приказује „image/webp“, уверите се да:
1) сте тестирали прегледачем који подржава webp (као што је Chrome)
2) URL слике који гледате не показује на други сервер (као што је gravatar.com)

Под претпоставком да је све горе наведено у реду, погледајте заглавља одговора да видите да ли постоји заглавље X-WebP-Convert-Status. Ако га нема, изгледа да је проблем у томе што захтев за слику није предат WebP Express-у. Разлози за то могу бити:

• Користите NGINX (или комбинацију Apache/Nginx). NGINX захтева посебну пажњу, погледајте ту ставку ЧПП
• Користите WAMP. Погледајте ту ставку ЧПП

Написаћу још о овој ставци ЧПП… Пратите нас.

Како webp слика може да се прослеђује на URL-у који се завршава на „jpg“?

Прилично лако. Прегледачи гледају заглавље врсте садржаја уместо URL-а да би одредили шта добијају. Дакле, иако може бити збуњујуће што је ресурс на example.com/image.jpg webp слика, будите сигурни да прегледачи нису збуњени. Да бисте утврдили да ли додатак ради, зато морате испитати заглавље одговора врсте садржаја уместо URL-а. Погледајте ставку ЧПП „Како да проверим да ли додатак ради?“.

Иначе, размишљам о могућности да додатак преусмерава на webp уместо да га одмах прослеђује. То би уклонило привидно неслагање између наставка датотеке и заглавља врсте садржаја. Међутим, цена тога био би додатни захтев за сваку слику, што значи додатно време и лошије перформансе. Мислим да не би било паметно користити ту могућност, па је вероватно нећу применити. Али можда имате добре разлоге да је користите? Ако имате, јавите ми!

WP CLI, али како да га користим за скупно претварање?

Па, прво, ако не познајете WP CLI, ево брзог почетка

WebP Express тренутно подржава наредбе за претварање и пражњење webp слика преко CLI-ја. Можете користити могућност –help да бисте сазнали више о могућностима:
wp webp-express –help. Приказује доступне наредбе
wp webp-express convert –help. Приказује доступне могућности за наредбу „convert“.

Неколико примера:
wp webp-express convert: прави webp слике за све непретворене слике
wp webp-express convert –reconvert: претвара и слике које су већ претворене
wp webp-express convert themes: само слике у фасцикли тема
wp webp-express convert uploads/2021: само слике у фасцикли „2021“ унутар фасцикле отпремања
wp webp-express convert –only-png: само PNG слике
wp webp-express convert –quality=50: користи квалитет 50 (уместо онога што је унето на екрану подешавања)
wp webp-express convert –quality=50 –near-lossless=50 –alpha-quality=50 –encoding=lossy: више могућности претварања. encoding може бити „lossy“, „lossless“ или „auto“
wp webp-express convert –converter=cwebp: изричито користи претварач cwebp. Друге могућности: „vips“, „imagemagick“, „ffmpeg“. П. С.: „ewww“ и „wpc“ (удаљени webp express) овде не раде.

wp webp-express flushwebp: уклања све webp слике
wp webp-express flushwebp –only-png: уклања све webp слике које су претворене из PNG слика

Синопсиси:

wp webp-express convert [<location>] [--reconvert] [--only-png] [--only-jpeg] [--quality=<number>] [--near-lossless=<number>] [--alpha-quality=<number>] [--encoding=<auto|lossy|lossless>] [--converter=<converter>]
wp webp-express flushwebp [--only-png]

Размишљам о додавању наредби за преглед стања, преглед статистике претварања, прављење .htaccess датотека и измену подешавања. Јавите ми ако вам треба нешто од овога или можда нешто друго.

Празне слике у Safari-ју?

WebP Express има три начина испоручивања webp слика прегледачима који подржавају webp, уз слање оригинала прегледачима који не подржавају webp. Иако се начин 1 може комбиновати са било којим од осталих начина, обично бисте изабрали само начин 1 или неки од осталих ако начин 1 не можете да користите.

Може ли нешто од овога поћи наопако?
Да. Све!

Начин 1: различити одговори за слике
Начин „Varied image responses“ додаје правила у .htaccess која преусмеравају jpeg и png слике на одговарајуће webp слике (ако постоје). Правила имају услов који обезбеђује да се окидају само за прегледаче који подржавају webp слике (то се утврђује испитивањем заглавља „accept“).

Начин сам назвао „различити одговори за слике“ јер се одговор на дати URL слике разликује (webp се прослеђује на истом URL-у као jpeg/png).

У случајевима када начин 1 не успе, разлог су системи који кеширају слике само према URL-у. Да би се то спречило, .htaccess правила додају заглавље одговора Vary:Accept. Међутим, већина CDN-ова не поштује то заглавље осим ако нису подешени да то раде. Срећом, прокси сервери га лепо поштују (мада често тако што одбаце кеширану слику ако се заглавље accept не поклапа)

Начин 1 може поћи наопако ако:

1. Користите CDN који није подешен да рукује различитим одговорима за слике. Ако се то догодило, пресудно је да очистите CDN кеш! За податке о подешавању CDN-а погледајте одељак о CDN-у у овим ЧПП
2. Ваш сервер не подржава додавање заглавља одговора у .htaccess. На Apache-у модул „mod_headers“ мора бити укључен. У супротном, пресудно заглавље одговора Vary:Accept неће бити постављено у одговору.
3. Ваш сервер не подржава SetEnv. Срећом, тај модул је веома чест. Објавио сам могуће решење да правила раде без SetEnv овде.
4. Користите Nginx и нисте направили правила која додају заглавље Vary:Accept.

Не верујем да нешто може поћи наопако на друге начине. Да бисте били сигурни, погледајте ову пробну страницу. Када посетите пробну страницу у Safari-ју, требало би да видите две слике са натписом „JPG“ преко њих. Када посетите пробну страницу у прегледачу који подржава webp, требало би да видите две слике са натписом „WEBP“ преко њих. Ако не видите нешто од овога, пријавите! (то се још никоме није догодило)

Од WebP Express-а 0.15.0 можете користити дугме „Live test“ да проверите да ли прегледачи који не подржавају webp добијају оригиналне датотеке и да ли се враћа заглавље Vary:Accept. Имајте ипак у виду да можда неће открити проблеме са CDN кешом ако CDN не кешира нову слику одмах – и на свим својим чворовима.

Начин 2: измена HTML-а да користи ознаке picture
IMG ознаке се замењују PICTURE ознакама које имају два извора. Један показује на webp и има „content-type“ подешен на „image/webp“. Други показује на оригинал. Прегледач ће изабрати webp извор ако подржава webp, а други извор ако не подржава.

Начин 2 може поћи наопако у старим прегледачима који не подржавају синтаксу ознаке picture. Међутим, једноставно укључите могућност „Dynamically load picturefill.js on older browsers“ и она ће решити тај проблем.

Начин 3: измена HTML-а да показује директно на webp слике у прегледачима који подржавају webp
У овом решењу URL-ови у HTML-у се мењају за прегледаче који подржавају webp. И овде се то утврђује испитивањем заглавља „accept“. Дакле, код овог начина се заправо цео HTML странице разликује.

Начин 3 може поћи наопако ако користите додатак за кеш страница који не прави засебан webp кеш за прегледаче који подржавају webp. Додатак Cache Enabler ово решава. Не верујем да постоје други додаци за кеш страница који то раде. У овим ЧПП постоји одељак који описује како да подесите Cache Enabler да ради заједно са WebP Express-ом.

Имајте у виду да је Firefox 66+ нажалост престао да укључује „image/webp“ у заглавље „accept“ које шаље при захтеву за страницу. Firefox 66+ срећом и даље укључује „image/webp“ у своје заглавље accept за слике. Међутим, то му неће донети webp слике при коришћењу начина 3.

Користим NGINX или OpenResty

WebP Express добро ради на NGINX-у, али сучеље још није прилагођено NGINX-у. И наравно, NGINX не обрађује .htaccess датотеке које WebP Express прави. WebP Express се може користити без преусмеравања, јер може да измени HTML тако да користи ознаке picture које воде до webp алтернативе. Погледајте „Једноставан начин“ испод. Или можете засукати рукаве и подесити преусмеравање у NGINX-у уз помоћ одељка „Напредни начин“ испод.

Једноставан начин (без правила преусмеравања)
Лако решење је да једноставно користите додатак у режиму „CDN friendly“, урадите скупно претварање (претвара постојеће слике), укључите могућност „Convert on upload“ (претвара нове слике у библиотеци медија) и укључите Alter HTML (испоручује webp прегледачима који подржавају webp, а оригинални jpeg/png прегледачима који не подржавају webp).

ЗА: веома лако за подешавање.
ПРОТИВ: слике у спољном CSS-у и слике које се динамички додају помоћу javascript-а неће се прослеђивати као webp.
ПРОТИВ: нове слике теме неће бити претворене док не покренете ново скупно претварање

Напредни начин (прављење NGINX правила преусмеравања)
Прављење NGINX правила захтева ручно убацивање правила преусмеравања у датотеку подешавања NGINX-а (nginx.conf или датотеку подешавања за сајт, у /etc/nginx/sites-available). Ако немате приступ за то, мораћете да се задовољите „једноставним начином“ описаним изнад.

Постоје два различита приступа за постизање преусмеравања. Онај који препоручујем заснива се на директиви try_files. Ако вам то не ради, можете пробати алтернативна правила заснована на директиви rewrite. Правила су описана у наредних неколико одељака.

За мрежу сајтова на NGINX-у прочитајте овде

Препоручена правила (помоћу „try_files“)

Припремни корак:
Правила траже постојеће webp датотеке додавањем „.webp“ на URL. Да би ово радило, морате подесити WebP Express да тако чува претворене датотеке, подешавањем General > File extension на Append „.webp“

Припремни корак 2:
Од издања 0.25.10 датотека подешавања је преименована тако да назив датотеке садржи „хеш“ од насумичних знакова (безбедносна мера).
Хеш ћете морати да пронађете прегледом назива датотеке подешавања.
Потражите у фасцикли /wp-content/webp-express/config датотеку која се зове отприлике „config.c513fe386c6b8793f9bf9ad1071d2266.json“.
Низ насумичних знакова између „config.“ и „.json“ је оно што овде називамо „хеш“.
Тај низ знакова мораћете да користите уместо „[your-hash-here]“ у доле предложеним правилима.

Правила:
Убаците следеће у контекст server своје датотеке подешавања (обично у /etc/nginx/sites-available). „Контекст server“ односи се на део подешавања који почиње са „server {“ и завршава се одговарајућим „}“.

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content&hash=[your-hash-here]
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content&hash=[your-hash-here]
      ;
}
# ------------------- (WebP Express rules ends here)

ПАЖЊА:
– Пазите – при умножавању/убацивању можете добити HTML-кодиране знакове. Проверите да амперсанд пре „wp-content“ није кодиран (у последњем реду у блоку try_files)

• Пазите – правила траже постојеће webp датотеке додавањем „.webp“ на URL. Да би ово радило, морате подесити WebP Express да тако чува претворене датотеке.

• Пазите – ако нисте укључили претварање png слика, треба да замените „(png|jpe?g)“ са „jpe?g“.

• Пазите – ако сте преместили wp-content на нестандардно место, морате то у складу с тим променити. Имајте у виду да онда морате променити и параметар „wp-content“ за скрипту. Он очекује релативну путању до wp-content (од корена документа) и потребан је да би скрипта пронашла датотеку подешавања.

• Пазите, постоји трик за сталне везе који се заснива на „rewrite“ (уместо уобичајеног решења заснованог на try_files). Ако користите тај трик за преусмеравање датотека које недостају на index.php, морате да га измените како је наведено овде

• Додао сам наредбу expires за кеширање. Можда ћете желети да је измените или искључите.

• Правила садрже сва преусмеравања (као да сте у подешавањима укључили све три могућности преусмеравања). Ако не желите преусмеравање на претварач, уклоните последњи ред у блоку try_files. Ако не желите да се webp датотеке праве на захтев, уклоните последњи блок location.

• Ако сте подесили WebP Express да чува слике у засебној фасцикли, није вам потребан ред „$uri.webp“ у првом блоку „try_files“. Али не шкоди да га имате. И пазите – обрнуто не важи. Ако је подешено да се слике чувају у истој фасцикли („mingled“), и даље вам је потребан ред који тражи webp у засебној фасцикли. Разлог је то што се „mingled“ односи само на слике у фасцикли отпремања – остале слике, као што су слике теме, увек се чувају у засебној фасцикли.

Ако ово не успете да оспособите, можда морате да додате следеће у своју датотеку подешавања mime.types:
image/webp webp;

Ако и даље не успевате да проради, можете уместо тога пробати алтернативна правила испод.

Заслуге: ова правила се заснивају на решењу Eugene Lazutkins-а.

Алтернативна правила (помоћу „rewrite“)

Ако вам препоручена правила не раде, можете пробати ова алтернативна правила.

Разлог због којег препоручујем приступ са try_files изнад у односу на ова алтернативна правила је то што је мало једноставнији и требало би да ради незнатно боље. Ова алтернативна правила ни на који начин нису лошија. Изаберите шта год ради!

Припремни корак:
Правила траже постојеће webp датотеке додавањем „.webp“ на URL. Да би ово радило, морате подесити WebP Express да тако чува претворене датотеке, подешавањем General > File extension на Append „.webp“. Уверите се и да је у WebP Express-у „Destination“ подешено на „Mingled“.

Правила:
Убаците следеће у контекст server своје датотеке подешавања (обично у /etc/nginx/sites-available). „Контекст server“ односи се на део подешавања који почиње са „server {“ и завршава се одговарајућим „}“.

# WebP Express rules
# --------------------
location ~* ^/wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;
}
location ~* ^/wp-content/.*\.webp$ {
    expires 365d;
    if ($whattodo = AB) {
        add_header Vary Accept;
    }
}
if ($http_accept ~* "webp"){
    set $whattodo A;
}
if (-f $request_filename.webp) {
    set $whattodo  "${whattodo}B";
}
if ($whattodo = AB) {
    rewrite ^(.*) $1.webp last;
}
if ($whattodo = A) {
    rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content&hash=[your-hash-here] break;
}
# ------------------- (WebP Express rules ends here)

„

ПАЖЊА:

• Пазите – при умножавању/убацивању можете добити HTML-кодиране знакове. Проверите да амперсанд пре „wp-content“ није кодиран (у последњем реду у блоку try_files)

• Пазите – правила траже постојеће webp датотеке додавањем „.webp“ на URL. Да би ово радило, морате подесити WebP Express да тако чува претворене датотеке.

• Пазите – ако нисте укључили претварање png слика, треба да замените „(png|jpe?g)“ са „jpe?g“.

• Пазите – ако сте преместили wp-content на нестандардно место, морате то у складу с тим променити. Имајте у виду да онда морате променити и параметар „wp-content“ за скрипту. Он очекује релативну путању до wp-content (од корена документа) и потребан је да би скрипта пронашла датотеку подешавања.

• Пазите, постоји трик за сталне везе који се заснива на „rewrite“ (уместо уобичајеног решења заснованог на try_files). Ако користите тај трик за преусмеравање датотека које недостају на index.php, морате да га измените како је наведено овде

• Додао сам наредбу expires за кеширање. Можда ћете желети да је измените или искључите.

• Нисам подесио никакав expire за захтев webp-on-demand.php. То није потребно, јер скрипта то подешава према ономе што сте подесили у подешавањима WebP Express-а. Такође, покушај да се то уради захтевао би нови блок location који одговара webp-on-demand.php, али то би преписало блок location који рукује php датотекама и тако покварило функционалност.

• Више нема разлога да се додаје „&$args“ у ред који почиње са „/wp-content“. То је постојало да би се омогућило отклањање грешака за појединачну слику додавањем „?debug“ на URL. Међутим, ту функционалност сам уклонио из webp-on-demand.php.

Могуће је ставити ово унутар директиве location. Међутим, директиве if унутар директива location сматрају се злом. Али изгледа да у нашем случају то ради. Ако желите то да урадите, користите следећа правила:

# WebP Express rules
# --------------------
location ~* ^/wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;

    if ($http_accept ~* "webp"){
        set $whattodo A;
    }
    if (-f $request_filename.webp) {
        set $whattodo  "${whattodo}B";
    }
    if ($whattodo = AB) {
        rewrite ^(.*) $1.webp last;
    }
    if ($whattodo = A) {
        rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content&hash=[your-hash-here] last;
    }
}

location ~* ^/wp-content/.*\.webp$ {
    expires 365d;
    if ($whattodo = AB) {
        add_header Vary Accept;
    }
}
# ------------------- (WebP Express rules ends here)

П. С.: ако желите да преусмеравате слике само на скрипту (а не на постојеће), правила постају много једноставнија:

# WebP Express rules
# --------------------
if ($http_accept ~* "webp"){
  rewrite ^/(.*).(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content&hash=[your-hash-here] break;
}
# ------------------- (WebP Express rules ends here)

Расправа на ову тему овде
И овде: https://github.com/rosell-dk/webp-express/issues/166

Ево правила ако треба да замените наставак датотеке са „.webp“ уместо да му додате „.webp“: https://www.keycdn.com/support/optimus/configuration-to-deliver-webp

Важно: WebP On Demand на NGINX-у сада захтева хеш параметар

Новија издања WebP Express-а (0.25.10 и новија) захтевају хеш параметар специфичан за инстанцу
при коришћењу WebP On Demand.

`

Користим Windows сервер

Добре вести! Сада би требало да ради, захваљујући момку који себе зове lwxbr. Бар на XAMPP 7.3.1, Windows 10. https://github.com/rosell-dk/webp-express/pull/213.

Користим Litespeed сервер

Не морате да радите ништа посебно да би радио на Litespeed серверу. Требало би да можете да користите WebP Express у било ком режиму рада. Ипак, за најбоље перформансе препоручујем да користите додатак LiteSpeed Cache за кеш страница.

LiteSpeed Cache се може подесити да одржава засебне кешеве страница за прегледаче који подржавају webp и оне који не подржавају. Помоћу ове функционалности могуће је користити „Alter HTML“ са могућношћу „Replace image URLs“ и режимом „Only do the replacements in webp enabled browsers“.

Подешавање је љубазно поделио и детаљно објаснио @ribeiroeder овде

Користим Jetpack

Ако поставите Jetpack и укључите „Speed up image load times“, Jetpack ће изменити HTML тако да слике показују на њихов CDN.

Нпр.:

постаје:

Jetpack аутоматски прослеђује webp датотеке прегледачима који их подржавају, истим механизмом као стандардно подешавање WebP Express-а: ако заглавље „Accept“ садржи „image/webp“, прослеђује се webp (задржава се изворни наставак датотеке, али се заглавље „content-type“ подешава на „image/webp“), у супротном се прослеђује jpg.

Пошто слике више не показују на ваш изворни сервер, .htaccess правила која прави WebP Express неће имати ефекта.

Дакле, ако користите Jetpack, WebP Express вам заправо није потребан?
Па, нема смисла имати укључено „Speed up image load times“ заједно са WebP Express-ом.

Али постоји разлог да се користи WebP Express уместо Jetpack-ове функције „Speed up image load times“:

Jetpack има исти недостатак као стандардно подешавање WebP Express-а: ако корисник преузме датотеку, наставак датотеке и врста слике се неће поклапати (датотека се нпр. зове „logo.jpg“, али је заправо webp слика). Не мислим да је то велики проблем, али за оне који мисле да јесте, WebP Express би и даље могао бити за вас, иако имате Jetpack. То је зато што се WebP Express може подесити само да прави webp слике, без унутрашњег преусмеравања на webp (биће могуће од издања 0.10.0). Тада можете, на пример, користити додатак Cache Enabler, који може да прави и кешира две варијанте сваке странице. Једну за прегледаче који прихватају webp и једну за оне који не прихватају. У HTML-у за прегледаче који подржавају webp слике показују директно на webp датотеке.

За Jetpack:
– То је бесплатан CDN који прослеђује webp одмах.
– Оптимизује и jpeg и png слике (али имајте у виду да их добија само око 1 од 5 корисника, пошто је webp сада широко подржан)

Против Jetpack-а:
– То је велики додатак за постављање ако вам треба само CDN
– Захтева да направите налог на WordPress.com

За WebP Express:
– Имате контролу над квалитетом и метаподацима
– То је мали додатак и пажљиво је урађен тако да додаје врло мало оптерећења
– Добро ради заједно са Cache Enabler-ом. Пошто се jpg не преусмерава на webp, нема потребе за посебним подешавањем CDN-а и нема проблема са обмањујућим наставком датотеке ако корисник преузме датотеку.

Против WebP Express-а:
– Ако користите CDN и преусмеравате jpg на webp, морате подесити CDN да прослеђује заглавље Accept. То није могуће на свим CDN-овима.

Зашто не видим могућност да подесим квалитет WebP-а на аутоматски?

Могућност ће се приказати само ако ваш систем може да открије квалитет jpeg слика. Да би ваш сервер то могао, поставите проширење Imagick (PECL >= 2.2.2) или укључите exec() позиве и поставите Imagick или Gmagick.

Ако вам ради начин претварања Imagick, Imagick бинарна датотека или Remote WebP Express, али немате глобалну могућност „auto“, аутоматска могућност биће вам доступна у могућностима појединачног претварача.

Напомена: ако се општа аутоматска могућност не приказује иако би горе наведени захтеви требало да буду испуњени, погледајте ову тему подршке.

Како да подесим свој CDN у режиму рада „Varied image responses“?

У режиму рада Varied image responses одговори за слике се разликују у зависности од тога да ли прегледач подржава webp или не (што прегледачи најављују у заглављу Accept). Неки CDN-ови ово подржавају одмах, други захтевају одређено подешавање, а трећи то уопште не подржавају.

Да би CDN сарађивао, потребно је да
1) прослеђује заглавље Accept и
2) поштује заглавље одговора Vary:Accept.

Можете га такође „оспособити“ на неким CDN-овима заобилажењем кеша за слике. Али радије предлажем да испробате режим CDN friendly (погледајте следећу ставку ЧПП)

Стање неких CDN-ова:

• KeyCDN: не подржава различите одговоре за слике. Додао сам захтев за функцију овде. Можете му дати +1 ако желите!
• Cloudflare: погледајте одељак „Користим Cloudflare“
• Cloudfront: ради, али мора бити подешен да прослеђује заглавље accept. Идите на Distribution settings, пронађите језичак Behavior, изаберите Behavior и притисните дугме Edit. Изаберите Whitelist у Forward Headers и затим додајте заглавље „Accept“ на списак дозвољених.

Додаћу још на списак. Добродошли сте да помогнете овде.

Како да проради са CDN-ом? (режим „CDN friendly“)

У режиму CDN friendly нема трикова са различитим одговорима за слике, па није потребна посебна пажња на CDN-у.

Међутим, постоје и друге замке.

Ствар је у томе да, осим ако вам цео сајт није на CDN-у, вероватно користите додатак који мења HTML како би статичке ресурсе усмерио на CDN. Ако сте у WebP Express-у укључили „Alter HTML“, то значи да сада имате две измене URL-ова слика!

Како ће се то одиграти?

Па, ако WebP Express измени HTML након што су URL-ови слика измењени да показују на CDN, имамо проблем. WebP Express не мења спољне слике, а URL-ови су сада спољни.

Међутим, ако WebP Express измени HTML пре другог додатка, све ће радити како треба.

Зато је важно да WebP Express стигне први.

Добра вест је да WebP Express заиста стиже први код свих додатака које сам тестирао.

Али шта можете да урадите ако не стигне?

Прво, у WebP Express-у имате могућност да бирате између:
1. Користи куке за филтрирање садржаја (the_content, the_excerpt итд.)
2. Цела страница (помоћу баферовања излаза)

Куке за филтрирање садржаја обрађују садржај пре баферовања излаза. Дакле, ако баферовање излаза за вас није довољно рано, изаберите куке за филтрирање садржаја.

Постоји ризик да и ваш CDN додатак користи куке за филтрирање садржаја. Ипак, ниједан такав нисам сусрео. Али ако постоји неки који то ради, велике су шансе да ће обрадити садржај пре WebP Express-а, јер сам приоритет ових кука подесио прилично високо (10000). Разлог за то је што желимо да заменимо слике које би могле бити убачене помоћу исте куке (на пример, тема може да користи филтер the_content за убацивање истакнуте слике). Ако наиђете на додатак за промену URL-ова за CDN који користи куке за филтрирање садржаја, тренутно немате среће. Јавите ми, да бих то исправио (нпр. тако што ћу учинити приоритет подесивим)

Ево списка неких додатака за CDN и када обрађују HTML:

Plugin
Method
Hook(s)
Priority

BunnyCDN
Output buffering
template_redirect
default (10)

CDN enabler
Output buffering
template_redirect
default (10)

Jetpack
content filtering
the_content, etc
the_content: 10

W3 Total Cache
Output buffering
no hooks. Buffering is started before hooks

WP Fastest Cache
Output buffering
no hooks. Buffering is started before hooks

WP Super Cache
Output buffering
init
default (10)

Код баферовања излаза, додатак који први започне баферовање излаза последњи добија излаз на обраду. Зато WebP Express почиње што је касније могуће, а то је на …