optimizacija slika

15+ načina za optimizaciju slika u WordPressu za brže učitavanje stranice

Želite li da se vaše slike na web stranici brže učitavaju?

GTmetrix i PageSpeed Insights pokazuju nekoliko načina optimizacija slika, ali ne sve. Ovaj vodič vam pomaže da optimizirate slike u WordPressu kako bi se učitale što je brže moguće. Uključuje sve od WebP-a do ShortPixela, prilagodljive slike, njihovo posluživanje putem CDN-a i pravilnu veličinu slika.

Mnogi programi za uređivanje slika (Photoshop i GIMP) omogućuju optimizaciju slika prije njihovog učitavanja. Na primjer, omogućuju vam da izrežete/promijenite veličinu slika na odgovarajuće dimenzije, da ih komprimirate i uklonite EXIF podatke. Iskoristite prednosti ovih optimizacija koje je izvršio vaš program za uređivanje slika.

Ako vaša web stranica koristi slike visoke razlučivosti (web-lokacija za fotografije), možda ih ne želite mijenjati i komprimirati (koraci 2 + 5) jer to može smanjiti kvalitetu, čak i ako je u maloj količini.

1. Pronađite neoptimizirane slike u GTmetrix-u + PSI

GTmetrix i PageSpeed Insights pokazuju istu optimizaciju slike.

  • Ispravna veličina slika – promijenite veličinu velikih slika na ispravne dimenzije.
  • Odgodi učitavanje slika izvan zaslona – usporeno učitavanje slika i pozadinskih slika.
  • Poslužite slike u formatima sljedeće generacije – pretvorite JPEG/PNG u WebP.
  • Učinkovito kodirajte slike – komprimirajte slike bez gubitka kvalitete pomoću dodatka.
  • Kombinirajte slike pomoću CSS spriteova – kombinirajte mnogo malih slika u jednu datoteku.

2. Koristite GTmetrix izvješća da biste vidjeli više o optimizaciji slike

Također volim koristiti GTmetrix izvješća jer vam pokazuju pogreške u dimenzijama slike, kao i pogreške ispravne veličine slike s točnim dimenzijama, dok novo izvješće to ne čini. Za te specifične optimizacije upotrijebite GTmetrix izvješće. Morat ćete stvoriti besplatni GTmetrix račun i otići na account > analysis options > default to legacy reports.

  • Odredite dimenzije slike: dodajte širinu/visinu u HTML ili CSS slike.
  • Minimizirajte preusmjeravanja – poslužite slike s ispravne verzije www i http(s).
  • Koristite mrežu za isporuku sadržaja – poslužite slike s CDN-a.
  • Iskoristite predmemoriju preglednika – pobrinite se da se slike spremaju u predmemoriju.
  • Učinite favicon malim i predmemoriranim – koristite favicon veličine 16x16px i predmemorirajte ga.

3. Ispravna veličina slika

Ispravna veličina slika znači da morate promijeniti veličinu velikih slika na manje dimenzije.

Sve dok slijedite ispravne dimenzije svoje stranice (slike bloga pune širine, logotip, bočna traka, podnožje, klizači itd.), ne biste trebali vidjeti pogreške. Ako ste već prenijeli velike slike, morat ćete im ručno promijeniti veličinu ili upotrijebiti dodatak. Međutim, većina dodataka za optimizaciju slika ima samo opciju promjene veličine na jedan skup dimenzija, tako da je ručno mijenjanje veličine često jedina opcija.

Kako popraviti slike odgovarajuće veličine

  • Pokrenite stranicu kroz GTmetrix.
  • Proširite posluživanje skaliranih slika na kartici PageSpeed.
  • Pronađite prevelike slike i njihove točne dimenzije (omogućuje GTmetrix).
  • Promijenite veličinu slika na dimenzije, a zatim zamijenite staru sliku novom.

Savjeti za snimanje zaslona
Proširenje Zoom za Chrome omogućuje snimanje zaslona s preciznim razinama zumiranja. Budući da su moje slike na blogu pune širine 680 px, koristim Zoom (kao i razine zumiranja mog računala) da postignem gotovo savršene snimke zaslona od 680 px. Zatim koristim GIMP za obrezivanje rubova. Ostaje mi visokokvalitetna snimka zaslona od 680px koja savršeno odgovara blogu. Za snimke zaslona koristim Awesome Screenshot.

Napravite Cheat Sheet o dimenzijama slike
Naučite različita područja svoje stranice i izradite cheat sheet. Na taj način znate točne dimenzije svake slike i možete izbjeći promjenu veličine velikih slika što može rezultirati gubitkom kvalitete.

Favicon: 16x16px
Slike widgeta: 414 (š)
Carousel slike: 115 (v)
Slike slidera: 1900 (š) x 400 (v)
Istaknute slike: 250 (š) x 250 (v)
Slike blog posta pune širine: 680 (š)
Twitter slika 1024 (š) x 512 (v)
Facebook slika: 1200 (š) x 628 (v)

Obavezno upotrijebite prilagodljive slike za ispravnu veličinu slika za mobilne uređaje (11. korak).

4. Odgodi učitavanje slika izvan zaslona

Odgoda slika izvan zaslona znači da će se one učitati nakon što se učitaju one koje su odmah vidljive.

Lazy load je ugrađen u WordPress 5.5, tako da ga nema potrebe za omogućavanjem u drugom dodatku. Većina pogrešaka pri odgođenom učitavanju je zato što se pozadinske slike (u CSS-u) ne učitavaju s odgađanjem. U tom slučaju možete pretražiti WordPressov repozitorij ili isprobati dodatak Elementor Lazy Load Background Images.

Kako popraviti odgodu slika izvan zaslona

  • Odgodi učitavanje slika.
  • Odgodi učitavanje pozadinskih slika.
  • Saznajte kako će vaš dodatak za predmemoriju (npr. WP Rocket) usporeno učitavati slike.

5. Poslužite slike u formatima sljedeće generacije

Posluživanje slika u formatima sljedeće generacije znači da trebate pretvoriti slike u WebP.

Većina dodataka za optimizaciju slika to čini (npr. ShortPixel). U suprotnom upotrijebite WebP dodatak kao što je WebP Converter For Media. Ako koristite WP Rocket, WebP predmemoriranje bi gotovo uvijek trebalo biti onemogućeno osim ako vaš WebP dodatak ne poslužuje WebP slike (što obično radi). Također bi trebao biti onemogućen ako koristite Cloudflare ili koristite element <picture> ili metodu .htaccess.

Kako popraviti posluživanje slika u formatima sljedeće generacije

  • Omogućite WebP putem dodatka za optimizaciju slike.
  • Odaberite metodu WebP konverzije s elementom <picture> koji je najčešći.
  • Alternativno, možete koristiti određeni WebP dodatak iz WordPres repozitorija.

6. Učinkovito kodirajte slike

Učinkovito kodiranje slika znači da trebate komprimirati slike.

To se obično radi pomoću dodatka za optimizaciju slika ili vašeg programa za uređivanje slika (Photoshop, GIMP, itd.). Lighthouse testira vaše slike s kompresijom od 85% i uspoređuje ih s izvornom verzijom. Ako je ušteda 4KiB ili veća, Lighthouse će označiti sliku. Dakle, ako želite proći ovu preporuku, postavite razinu kompresije slike na oko 85%.

Kako popraviti učinkovito kodiranje slika

  • Odaberite dodatak za optimizaciju slike (preporučam ShortPixel).
  • Postavite razinu kompresije na 85% (ista razina koju koristi Lighthouse).
  • Skupno komprimiranje postojećih slika i mogućnost optimizacije slika nakon prijenosa.

7. Odredite dimenzije slike

Određivanje dimenzija slike znači dodavanje širine/visine u HTML ili CSS slike.

Ova je optimizacija preporučena u GTmetrix izvješćima, ali je još uvijek korisna. Slike koje nemaju atribut visine mogu rezultirati višim CLS-om u PageSpeed Insights. Vizualni uređivač i većina WEB buildera automatski dodaju atribute širine/visine, tako da se obično ne morate brinuti o tome. Ali za slike koje su kodirane u HTML/CSS-u morate to učiniti ručno.

Kako popraviti dimenzije slike

  • Pokrenite stranicu kroz GTmetrix izvješće.
  • Saznajte koje slike sadrže pogreške u dimenziji slike.
  • Obratite pažnju na dimenzije slike koje daje GTmetrix.
  • Uredite stranicu, pronađite sliku i pogledajte njezin HTML ili CSS.
  • Dodajte atribut širine i visine na sliku.
  • Omogućite “add missing image dimensions” ako koristite WP Rocket.

8. Poslužite slike iz CDN-a

Posluživanje slika s CDN-a znači da morate omogućiti ponovno pisanje CDN-a.

Prilikom postavljanja CDN-a, oni prema zadanim postavkama ne mijenjaju vaše URL-ove. Morat ćete omogućiti CDN ponovno pisanje što se može učiniti u Perfmattersu ili dodatku WP CDN Rewrite. Ovo služi slike s vašeg CDN-a umjesto samo s vašeg poslužitelja. Neki dodaci za optimizaciju slika kao što je Flying Images poslužit će slike s besplatnog CDN-a kao što je Statically. Cloudflare ne koristi CDN URL-ove. Time se mijenjaju URL-ovi vaših slika tako da uključuju CDN URL, osiguravajući da se poslužuju s CDN-a.

Kako poslužiti slike iz CDN-a

Postavite CDN (BunnyCDN je vrlo popularan izbor).
Omogućite CDN Rewrite (u Perfmattersu ili putem dodatka).
Ili odaberite dodatak za optimizaciju slike s ugrađenim CDN-om.
URL stare slike (bez CDN ponovnog pisanja): https://onlinemediamasters.com/wp-content/webpc-passthru.php?src=https://onlinemediamasters.com/wp-content/uploads/2021/01/Tom-Dupuis -Widget.png&nocache=1

URL nove slike (s CDN prepisivanjem): https://onlinemediamasters.b-cdn.net/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png

9. Izbjegavajte preusmjeravanja URL-ova slike

Minimiziranje preusmjeravanja može biti uzrokovano slikama posluženim s pogrešnih URL-ova.

Ako ste promijenili HTTPS ili WWW verziju, trebali biste skupno ažurirati sve slike (i veze) kako bi koristile ispravnu verziju. Inače ćete vidjeti pogreške na cijeloj web-lokaciji kako biste smanjili preusmjeravanja.

Upotrijebite dodatak Better Search Replace za skupno ažuriranje URL-ova slika.

10. Kombinirajte slike pomoću CSS spriteova

Koristio sam CSS sprite na svojoj staroj početnoj stranici. Možda mislite da vidite 21 ikonu, ali zapravo je to 1 pojedinačna slika. Ovo je CSS sprite i kombinira više slika (obično manje ukrasne slike poput logotipa ili ikona) u jednu sliku. Time se smanjuje broj slika i zahtjeva. Umjesto učitavanja 21 slike, učitava 1. To možete učiniti pomoću CSS generatora spritea.

Ljudi bi mogli reći “pa, veličinu stranice od 369 MB lako je učitati za 0,5 sekundi!” Ali iskreno, uklanjanje teških elemenata i olakšavanje vaše stranice jednako je dobro kao i svaka druga optimizacija.

11. Koristite prilagodljive slike za mobitel

Prilagodljive slike služe manjim slikama mobilnim uređajima.

Ako testirate svoju web-lokaciju u GTmetrix naslijeđenom izvješću s Androida (premium značajka), vjerojatno ćete vidjeti pogreške pri posluživanju skaliranih slika na mobilnom uređaju. To je zato što se slika ne mijenja za mobilne uređaje. Postoji mnogo dodataka za prilagodljive slike (pri čemu su ShortPixel Adaptive Images najpopularniji).

Kako stvoriti prilagodljive slike

Instalirajte dodatak za prilagodljive slike.
Ponovo testirajte na svojoj web-lokaciji za pogreške slike odgovarajuće veličine na mobilnom uređaju.

12. Onemogućite Hotlinking slike

Onemogućavanje hotlinkinga sprječava ljude da kopiraju/lijepe vaše slike na svoju web stranicu.

Ako to učine, slika će i dalje biti smještena na vašem poslužitelju i trošiti vašu propusnost. WP Rocket (onemogući ugrađivanje), Cloudflare i mnogi domaćini imaju opcije za onemogućavanje povezivanja slika.

13. Uklonite EXIF podatke

Uklanjanje EXIF podataka uklanja beskorisne informacije sa slika.

Ako ga uklonite, slike se mogu malo smanjiti. Vjerojatno vam ne trebaju otvor blende, brzina zatvarača, ISO, žarišna duljina, model fotoaparata, datum snimanja fotografije i drugi beskorisni podaci na vašim slikama. Većina dodataka za optimizaciju slika ima opciju uklanjanja EXIF podataka (ispod je za ShortPixel).

14. Poslužite slike slabije kvalitete korisnicima na sporim vezama

Dodatak Optimole i Cloudflare Mirage smanjuju kvalitetu slike za korisnike na sporim vezama. Ovo je kompromis, ali ako je većina vaših posjetitelja na mobilnim uređajima, razmislite o tome.

15. Predmemorija slika

Predmemorija slika se obično obavlja putem dodatka za predmemoriju.

WP Rocket (ono što koristim) i LiteSpeed Cache su zlatni standardi.

16. Cache Gravatari

Ako imate postove s puno komentara, razmislite o optimizaciji Gravatara.

Koristim WP User Avatar za lokalni hosting Gravatara (dodatak mi omogućuje učitavanje prilagođene ljubičaste Gravatar ikone). Zatim sam koristio WP Rocket da odgodim svoje komentare i Gravatarov JavaScript (wpDiscuz i gravatar). Budući da su moji komentari odgođeni i optimizirani, početno vrijeme učitavanja mog bloga stavlja gotovo nultu težinu. Pokušao sam Gravatar cache dodatke, ali nisu mi radili.

17. Promjena veličine GIF-ova

Baš kao što mijenjate veličinu slika na ispravne dimenzije, tako i GIF-ovima treba promijeniti veličinu (koristite GIF GIF).

1. korak: prenesite GIF i promijenite mu veličinu.

Korak 2: Komprimirajte ga.

Ugradite ga na svoju web stranicu i nasmijte se.

18. Izbjegavajte ugrađivanje slika
Uvijek učitavajte slike na svoju web stranicu, nikada ih ne kopirajte/zalijepite s drugih stranica. U suprotnom ćete imati dodatne zahtjeve jer se ne nalazi na vašem poslužitelju i povlači se s nekog drugog mjesta.

 

19. Alati za optimizaciju slike
Samo podsjetnik; izbjegavajte korištenje više dodataka za istu funkcionalnost!