Međutim, isporuka slika putem WebP-a nije jednostavna. Ovisi o web poslužitelju vašeg poslužitelja, odabranom cdn-u, temi, dodacima za predmemoriju itd.
Ovaj vodič će vam pomoći da isporučite WebP slike u WordPress na tri načina.
Što je WebP?
Novi format slike za web
od Googlea
WebP je format slike (poput png i jpg) koji je razvio Google. WebP (.webp) slike obično su mnogo manje, što ubrzava web stranice i koristi manje propusnosti.
Ovisno o slici, možete smanjiti veličinu od 25% do 70%.
JPEG, PNG, GIF itd. imaju svoje prednosti i nedostatke. Donja tablica će vam dati ideju:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparentnost | ❌ | ✅ | ✅ | ✅ |
| Animacija | ❌ | ✅ | ✅ | ✅ |
| Izgubljena | ✅ | ❌ | ❌ | ❌ |
WebP ima gotovo sve gore navedene značajke! Zašto onda ne možemo koristiti WebP posvuda?
Zašto ne biste svugdje koristili WebP?
Kao što vidite, samo 80% uređaja podržava samo WebP. Ne samo naslijeđeni preglednici, Safari/iOS Safari još uvijek ne podržava WebP.
Zašto je tako teško poslužiti WebP?
Kao što ste primijetili, slike isporučujemo prema pregledniku. Ako preglednik ne podržava WebP, moramo im dostaviti originalnu sliku (jpg/png/gif).
Postoje dva glavna načina posluživanja WebP-a:
Korištenje oznake slike
Možemo koristitislikaoznaku da pregledniku kaže da imamo WebP format. Ako ga preglednik podržava, učitat će se obična/zamjenska slika.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Drugim odgovorom
U drugom odgovoru, kao i obično, imate jednu datoteku. Točno:
<img src="img.jpg" />Jedan URL slike podržava isporuku jpg i webp datoteka. To je ono što poslužitelj radi.
Iako je proširenje datoteke .jpg, ako preglednik podržava WebP, odgovor će biti WebP. Također se naziva "raznolik odgovor".
Oznaka slike naspram raznolikog odgovora
Svaki ima svoje prednosti i nedostatke. Evo usporedne tablice:
| oznaka slike | Raznolik odgovor | |
|---|---|---|
| Radi s pozadinskim slikama | ❌ | ✅ |
| CDN prijateljski | ✅ | ✅ (samo nekoliko) |
| Poslužitelj treba biti konfiguriran | ❌ | ✅ (nginx) |
| Radi s lijenim učitavanjem | ✅ | ✅ |
Kako poslužiti slike u WebP-u u WordPressu?
Metoda br. 1 - Koristite samo CDN s pretvorbom fly WebP
Ovo je vjerojatno najjednostavnije rješenje. Neki davatelji CDN-a trenutno podržavaju pretvorbu slike u WebP u hodu zajedno s optimizacijom slike.
Evo nekoliko:
- BunnyCDN
- Cloudflare s poljskim (Pro plan)
- Oblačno
- ShortPixel prilagodljive slike (koristi StackPath CDN)
- WP Compress
Također možete uštedjeti prostor na disku pomoću ove metode jer ne morate pohranjivati normalne i konvertirane WebP slike.
BunnyCDN
BunnyCDN dolazi s Bunny Optimizer, koji može komprimirati slike i pretvoriti ih u WebP u hodu.
Metoda #2 - Korištenje raznolikog odgovora + CDN
Kao što je gore opisano, "raznovrsni odgovor" imat će jedan URL slike koji može poslužiti i WebP i ne-webp slike, ovisno o traženom pregledniku.
Također moramo odabrati pravi CDN koji podržava zaglavlja WebP zahtjeva kao ključ predmemorije. Inače, nakon što se WebP slika spremi u predmemoriju na poslužitelju, bit će isporučena preglednicima koji ne podržavaju WebP.
Prilagođavanje raznolikog odgovora u WordPressu
Najlakši način za postavljanje bogatog odgovora za WebP u WordPressu je korištenje dodatka WebP Express. Samo instalirajte dodatak i kliknite "Spremi postavke i forsiraj nova pravila .htaccess".
WebP Express će konfigurirati WebP konverter i prebrisati pravila tako da će, kada primi zahtjev, pretvoriti slike u WebP u hodu, a ako preglednik ne podržava WebP, isporučuje se zadana slika.
Ako ste u Nginxu
WebP Express dodaje potrebna pravila prepisivanja '.htaccess', ali radi samo na Apache, LiteSpeed ili OpenLiteSpeed poslužitelju. Ako koristite Nginx morate ureditinginx.configi dodajte sljedeći kod:
# WebP Express pravila# --------------------lokacija ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Prihvati;istječe 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;}# Usmjeravanje zahtjeva za nepostojeći webps na lokaciju pretvarača ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (pravila WebP Expressa završavaju ovdje)Gornji kod dodaje potrebna zaglavlja odgovora (upravljanje predmemorijem također varira) i pokušava isporučiti WebP ako postoji, inače ga preusmjerava na pretvarač (na temelju podrške preglednika)
CDN pružatelji usluga koji podržavaju Diverse Response
Ako vaš CDN pružatelj usluga ne podržava WebP kao ključ za predmemoriju, WebP datoteke bit će isporučene preglednicima koji ne podržavaju WebP. Slično, postoji mogućnost da će slike koje nisu webp biti isporučene podržanim preglednicima.
BunnyCDN , KeyCDN , Google CDN i mnogi drugi davatelji CDN-a podržavaju WebP kao ključ predmemorije. Provjerite jeste li ih omogućili u postavkama.
VBunnyCDN :
VKeyCDN :
Koristite li besplatni plan Cloudflarea?
Nažalost, besplatni plan Cloudflarea ne podržava WebP kao ključ predmemorije. Ili koristite CDN kao što je BunnCDN ili nadogradite na njihov profesionalni plan.
Postavite raznolik odgovor + CDN s popularnim davateljima usluga hostinga
Provjerite je li instaliran WebP Express.
- Kinsta ili WP Engine - kontaktirajte njihov tim za podršku kako biste dodali gornju Nginx konfiguraciju i uključili ključ za predmemoriju WebP u njihov CDN (KeyCDN).
- Cloudways - samo instalirajte WebP Express i spremite postavke koristeći .htacess. Budući da Cloudways koristi hibridni pristup Apache + Nginx, funkcionira bez upotrebe.
- SiteGound - Obratite se podršci za dodavanje Nginx konfiguracije. Koristite podržani CDN kao gore.
- LiteSpeed / OpenLiteSpeed / Apache poslužitelj - samo instalirajte WebP Express i spremite postavke s '.htacess'. Također koristite podržani CDN kao gore.
- Prilagođeni VPS s Nginxom (LEMP Stack) - Postavljanje
nginx.confi koristite podržani CDN kao gore.
Metoda #3 - Korištenje oznake slike
Ako vam obje gore navedene metode ne rade, možete upotrijebiti oznaku slike. Ne zahtijeva konfiguraciju poslužitelja (uređivanje nginx.conf) i podržava sve CDN pružatelje usluga.
Korištenje ove metode promijenit će HTML za isporuku WebP-a. Neće raditi s pozadinskim slikama, nekompatibilan je s nekim temama, dodacima za predmemoriju, dodacima za lijeno učitavanje itd.
Ako koristite ovu metodu, sve img oznake bit će konvertirane na sljedeći način:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ako preglednik podržava WebP, isporučuje se odgovarajuća datoteka; u suprotnom, isporučuje se normalna slika.
Prilagođavanje oznake slike za WebP u WordPressu
Najlakši način za postavljanje oznake slike je putem WebP Expressa.
Postavite način rada na "CDN friendly" i omogućite "Alter HTML".
Zaključak
Volio bih da dođe dan kada svi preglednici podržavaju WebP!
Ako možete potrošiti nekoliko dolara mjesečno, tada je najlakši i najučinkovitiji način korištenje CDN-a kao što je BunnyCDN, koji će pretvoriti slike u WebP u hodu. Inače, držite se metode #2 koju sam spomenuo gore.
