Међутим, испорука слика путем ВебП-а није лака. Зависи од веб сервера вашег сервера, изабраног цдн-а, теме, додатака за кеширање итд.
Овај водич ће вам помоћи да испоручите ВебП слике у ВордПресс на три начина.
Шта је ВебП?
Нови формат слике за веб
од Гоогле-а
ВебП је формат слике (као што су пнг и јпг) који је развио Гоогле. ВебП (.вебп) слике су обично много мање, што убрзава веб локације и користи мање пропусног опсега.
У зависности од слике, можете смањити величину са 25% на 70%.
ЈПЕГ, ПНГ, ГИФ итд. имају своје предности и мане. Табела испод ће вам дати идеју:
| ЈПГ | ГИФ | ПНГ | СВГ | |
| Вецтор | ❌ | ❌ | ❌ | ✅ |
| Растер | ✅ | ✅ | ✅ | ❌ |
| Транспарентност | ❌ | ✅ | ✅ | ✅ |
| Анимација | ❌ | ✅ | ✅ | ✅ |
| Изгубљена | ✅ | ❌ | ❌ | ❌ |
ВебП има скоро све горе наведене карактеристике! Зашто онда не можемо да користимо ВебП свуда?
Зашто не користите ВебП свуда?
Као што видите, само 80% уређаја подржава само ВебП. Не само застарели претраживачи, Сафари/иОС Сафари још увек не подржава ВебП.
Зашто је тако тешко служити ВебП?
Као што сте приметили, слике испоручујемо према претраживачу. Ако претраживач не подржава ВебП, морамо им доставити оригиналну слику (јпг/пнг/гиф).
Постоје два главна начина за послуживање ВебП-а:
Коришћење ознаке слике
Можемо користитисликатаг да каже претраживачу да имамо ВебП формат. Ако претраживач то подржава, обична/резервна слика ће бити учитана.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Другим одговором
У другом одговору, као и обично, имате једну датотеку. Баш тако:
<img src="img.jpg" />Једна УРЛ адреса слике подржава испоруку јпг и вебп датотека. Ово је оно што сервер ради.
Иако је у питању екстензија датотеке .јпг, ако претраживач подржава ВебП, онда ће одговор бити ВебП. Такође се зове "разнолик одговор".
Ознака слике наспрам разноликог одговора
Сваки има своје предности и мане. Ево упоредне табеле:
| ознака слике | Разноврсна реакција | |
|---|---|---|
| Ради са позадинским сликама | ❌ | ✅ |
| ЦДН фриендли | ✅ | ✅ (само неколико) |
| Сервер треба да буде конфигурисан | ❌ | ✅ (нгинк) |
| Ради са лењим учитавањем | ✅ | ✅ |
Како послужити слике у ВебП-у у ВордПресс-у?
Метод #1 - Користите само ЦДН са фли ВебП конверзијом
Ово је вероватно најједноставније решење. Неки ЦДН провајдери тренутно подржавају конверзију слике у ВебП у ходу заједно са оптимизацијом слике.
Ево неколико:
- БунниЦДН
- Цлоудфларе са пољским (Про план)
- Цлоудинари
- СхортПикел прилагодљиве слике (користи СтацкПатх ЦДН)
- ВП Цомпресс
Такође можете да уштедите простор на диску користећи овај метод јер не морате да складиштите и обичне и конвертоване ВебП слике.
БунниЦДН
БунниЦДН долази са Бунни Оптимизер-ом, који може компримовати слике и конвертовати их у ВебП у ходу.
Метод #2 - Коришћење Диверсе Респонсе + ЦДН
Као што је горе описано, „разноврсни одговор“ ће имати једну УРЛ адресу слике која може да послужи и ВебП и не-веб сликама у зависности од захтеваног претраживача.
Такође морамо да изаберемо прави ЦДН који подржава заглавља ВебП захтева као кључ кеша. У супротном, када се ВебП слика кешује на серверу, биће испоручена претраживачима који не подржавају ВебП.
Прилагођавање разноврсног одговора у ВордПресс-у
Најлакши начин да подесите богат одговор за ВебП у ВордПресс-у је да користите додатак ВебП Екпресс. Само инсталирајте додатак и кликните на „Сачувај подешавања и форсирај нова .хтаццесс правила“.
ВебП Екпресс ће конфигурисати ВебП конвертор и преписати правила тако да када прими захтев, конвертује слике у ВебП у ходу, а ако претраживач не подржава ВебП, биће испоручена подразумевана слика.
Ако сте у Нгинк-у
ВебП Екпресс додаје неопходна правила преписивања „.хтаццесс“, али ради само на Апацхе, ЛитеСпеед или ОпенЛитеСпеед серверу. Ако користите Нгинк, потребно је да изменитенгинк.цонфиги додајте следећи код:
# Правила ВебП Екпресс# --------------------локација ~* ^/?вп-цонтент/.*.(пнг|јпе?г)$ {адд_хеадер Вари Прихвати;истиче 365д;иф ($хттп_аццепт !~* "вебп"){бреак;}три_филес/вп-цонтент/вебп-екпресс/вебп-имагес/доц-роот/$ури.вебп$ури.вебп/вп-цонтент /плугинс/вебп-екпресс/вод/вебп-он-деманд.пхп?ксоурце=к$рекуест_филенаме&вп-цонтент=вп-цонтент;}# Усмеравање захтева за непостојећи вебпс на локацију претварача ~* ^/?вп-цонтент/ .*.(пнг|јпе?г).вебп$ {три_филес$ури/вп-цонтент/плугинс/вебп-екпресс/вод/вебп-реализер.пхп?вп-цонтент=вп-цонтент;}# -- ----------------- (ВебП Екпресс правила се завршавају овде)Горњи код додаје потребна заглавља одговора (управљање кешом такође варира) и покушава да испоручи ВебП ако постоји, у супротном га преусмерава на конвертор (засновано на подршци претраживача)
ЦДН провајдери који подржавају Диверсе Респонсе
Ако ваш ЦДН провајдер не подржава ВебП као кључ за кеширање, ВебП датотеке ће бити испоручене претраживачима који не подржавају ВебП. Слично томе, постоји шанса да ће слике које нису вебп бити испоручене подржаним претраживачима.
БунниЦДН , КеиЦДН , Гоогле ЦДН и многи други добављачи ЦДН-а подржавају ВебП као кеш кључ. Уверите се да сте их омогућили у подешавањима.
ВБунниЦДН :
ВКеиЦДН :
Да ли користите бесплатни план компаније Цлоудфларе?
Нажалост, бесплатни план Цлоудфларе-а не подржава ВебП као кеш кључ. Или користите ЦДН као што је БуннЦДН или надоградите на њихов професионални план.
Подесите разноврстан одговор + ЦДН са популарним провајдерима хостинга
Уверите се да је ВебП Екпресс инсталиран.
- Кинста или ВП Енгине – контактирајте њихов тим за подршку да бисте додали горњу Нгинк конфигурацију и укључили ВебП кључ за кеширање у њихов ЦДН (КеиЦДН).
- Цлоудваис - само инсталирајте ВебП Екпресс и сачувајте подешавања користећи .хтацесс. Пошто Цлоудваис користи хибридни Апацхе + Нгинк приступ, функционише без употребе.
- СитеГоунд – Контактирајте подршку да бисте додали Нгинк конфигурацију. Користите подржани ЦДН као горе.
- ЛитеСпеед / ОпенЛитеСпеед / Апацхе сервер - само инсталирајте ВебП Екпресс и сачувајте подешавања помоћу '.хтацесс'. Такође користите подржани ЦДН као горе.
- Прилагођени ВПС са Нгинк-ом (ЛЕМП стацк) – подешавање
нгинк.цонфи користите подржани ЦДН као горе.
Метод #3 - Коришћење ознаке слике
Ако обе горе наведене методе не раде за вас, можете користити ознаку слике. Не захтева конфигурацију сервера (уређивање нгинк.цонф) и подржава све ЦДН провајдере.
Коришћење ове методе ће променити ХТМЛ за испоруку ВебП-а. Неће радити са позадинским сликама, некомпатибилан је са неким темама, додацима за кеширање, додацима за лење учитавање итд.
Ако користите овај метод, све имг ознаке ће бити конвертоване овако:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ако претраживач подржава ВебП, испоручује се одговарајућа датотека; у супротном, испоручује се обична слика.
Прилагођавање ознаке слике за ВебП у ВордПресс-у
Најлакши начин да подесите ознаку слике је преко ВебП Екпресс-а.
Подесите режим рада на „ЦДН фриендли“ и омогућите „Алтер ХТМЛ“.
Закључак
Волео бих да дође дан када сви претраживачи подржавају ВебП!
Ако можете да потрошите неколико долара месечно, онда је најлакши и најефикаснији начин да користите ЦДН као што је БунниЦДН, који ће конвертовати слике у ВебП у ходу. У супротном, држите се методе #2 коју сам поменуо горе.
