Optimizacija slika web-stranice

Optimizacija slika nudi najveći povrat ulaganja za performanse WordPressa: uz identične strukture stranica i teme, jednostavno pravilno podešavanje veličine, dimenzija, formata i načina isporuke slika često može odmah poboljšati iskustvo učitavanja.

Međutim, optimizacija slika je također najvjerojatnija da dovede do situacije u kojoj “što više petljaš, to je gore”. Razlog nije u tome što je tehnika previše teška, nego što su informacije previše fragmentirane:
Pročitao si nekoliko članaka i saznao za “kompresiju”, “WebP/AVIF” i “lijeno učitavanje”, a onda u opisu dodatka piše “100 besplatnih kredita mjesečno”, “besplatno 20MB” i “1 kredit po slici”, pa što više čitaš, to si zbunjeniji — je li besplatni plan zapravo dovoljan? Kako se naplaćuje? Jesi li možda pogrešno shvatio “istu stvar”? I ono najvažnije:Je li to zapravo stupilo na snagu nakon što si završio?

Ovaj članak radi samo tri stvari:

1. Evo jednog konkretnog prijedloga za tebe.Plan puta(Što učiniti prvo, što učiniti zatim)
2. Jasno objasnite opcije koje želite odabrati (koja je točno razlika između besplatne i plaćene verzije i za koga je svaka namijenjena).
3. Navedite najčešće zamke unaprijed (kako biste izbjegli muku traženja rješenja nakon što završite)

1. Osnova: Što WordPress uključuje prema zadanim postavkama, a što ne uključuje

Ako najprije ne razumijete što je već implementirano u jezgri WordPressa, vjerojatno će se pojaviti dvije situacije:

• Umjesto da iskoristimo lako dostupne besplatne mogućnosti, potrošili smo vrijeme i novac na izmišljanje točka.
• Mislio sam da će WordPress “automatski pretvoriti sve stare slike u WebP/AVIF”, ali ispostavilo se da to ne radi.

WordPress jezgra već uključuje ove ključne mogućnosti:

• Prilagodljive slike (srcset/sizes)Od WordPressa 4.4 nadalje, jezgra će izlaziti slike. srcset 与 sizesi iskoristiti slike više veličina generirane tijekom učitavanja, omogućujući pregledniku odabir prikladnijih resursa za učitavanje na temelju uvjeta zaslona.
• Ugrađeno lijeno učitavanjeWordPress 5.5 i novije verzije omogućuju nativno lijeno učitavanje slika prema zadanim postavkama, koristeći HTML standarde. loading Implementacija nekretnine.
• Podržava učitavanje WebP datotekaOd WordPressa 5.8 nadalje omogućeno je učitavanje i korištenje WebP datoteka jednako kao i JPEG/PNG (pod uvjetom da hosting okruženje podržava WebP).
• Podržava AVIF prijenoseWordPress 6.5 i noviji omogućuje učitavanje i korištenje AVIF datoteka na isti način kao i JPEG/PNG (ovisno o podršci hosting okruženja).

Međutim, napomena:
“Podrška za učitavanje/korištenje” ≠ “Automatska konverzija/automatska isporuka”.
Drugim riječima: čak i ako već koristite WP 6.5, JPG/PNG datoteke u vašoj medijskoj biblioteci neće se automatski pretvoriti u WebP/AVIF; niti ćete automatski dobiti punu mogućnost “izlaznog prikaza AVIF/WebP-a ovisno o podršci preglednika, uz povratak na izvornu sliku za preglednike bez podrške” – ova funkcionalnost obično zahtijeva dodatke ili dodatne usluge kako bi se rješenje dovršilo.

2. Putokaz: Optimizacija slika u 5 koraka

Što učiniti, zašto, što čini zadovoljavajuću izvedbu i koje su tipične zamke.

2.1 Prvo točno odredite dimenzije (najlakše je zanemariti, a donosi najveći povrat)

Mnoge stranice su spore ne zato što kompresija nije primijenjena, nego radijePreuzeta je slika znatno veća od područja zaslona：
Na primjer, ako stranica zapravo prikazuje samo 900 piksela širine, a vi prisiljavate posjetitelje da preuzmu punu sliku od 3000 piksela, preglednik će je jednostavno preuzeti u cijelosti prije nego što je smanji za prikaz. To troši propusnost, povećava vrijeme dekodiranja i usporava učitavanje prve stranice.

WordPress 4.4 i novijiMekanizam responzivnih slika（srcset/sizes) upravo da bi se riješio ovaj problem.

Što se smatra prolaznom ocjenom:

• Kada se stranica otvara na mobilnom uređaju, dimenzije preuzete slike trebaju biti znatno manje nego na stolnom računalu.
• Veličina resursa iste slike razlikuje se na različitim uređajima (umjesto da se uvijek preuzima izvorna slika).

Najčešće zamke:

• Određene teme/graditelji mogu zaobići ovo tretiranjem slika kao CSS pozadinskih slika ili primjenom prilagođenih metoda izdavanja. srcsetšto rezultira stalnim preuzimanjem velikih slika
• Korištenjem vanjskih usluga hostanja slika ili blokova slika trećih strana možete zaobići sustav više veličina koji generira medijska biblioteka.

---

2.2 Kompresija (Smanjiti broj KB, ali ne ugroziti kvalitetu)

Suština kompresije nije “što je manje, to je bolje”, nego “razlika jedva primjetna golim okom, a ipak sa značajnim smanjenjem volumena”.

Pravila su sljedeća:

• Fotografije/stvarni snimci (portreti, proizvodi, pejzaži)Prioritetizirajte kompresiju s gubicima (maksimizira dobitke)
• Snimka zaslona/slika s opsežnim tekstomKompresija bi trebala biti konzervativnija kako bi se spriječilo da tekst izgleda zamućeno.
• Logotip/IkonaPrioritetizirajte SVG ili odaberite neizgubnu kompresiju (izgubna kompresija lako uzrokuje zamućenje rubova)

Što se smatra prolaznom ocjenom:

• Veličina slika na većini stranica značajno se smanjila.
• Nema primjetnog šuma, zamućenih rubova, pojave bojenih pruga ili zamućenja teksta.

---

2.3 WebP / AVIF (Pravilo formata: Manja veličina datoteke za jednaku oštrinu)

WordPress sada podržava prijenos datoteka. WebP (5.8) i AVIF (6.5)。
Međutim, da bi se “format sljedeće generacije” zaista stavio u praktičnu upotrebu, obično je potrebno riješiti dva pitanja:

1. Kako masovno pretvoriti povijesne medijske arhive(Inače ste optimizirali samo “nove slike koje će biti učitane u budućnosti”)
2. Trebalo bi li stvoriti kopiju ili zamijeniti originalnu sliku?(Ovo označava kritičnu prekretnicu; kasnije ćemo se usredotočiti na Plus WebP-ovo “zamjenjivanje i brisanje originalnih slika”.)

Preporučeni stil pisanja:

• WebP: Općenito je zadani preferirani izbor (nudi stabilniju kompatibilnost)
• AVIF: daljnji korak u kompresiji, pogodan za velike slike/bannere na prvoj stranici/fotografije albuma (iako više...Ovisan o podršci okoliša）

---

2.4 Ljeno učitavanje treba pravilno primijeniti (izbjegavati sveobuhvatan pristup)

WordPress 5.5 i novijiLjenasto učitavanje prema zadanomeSlika.
Smanjuje potrošnju propusnosti tijekom početnog iscrtavanja:

• Ljenasto učitavanje je pogodno za “resurse izvan ekrana”.”
• Najvažnija slika na prvoj stranici (često glavna slika na prvoj stranici) često nije prikladna za odgođeno učitavanje.

---

2.5 Sloj isporuke: CDN / Slika CDN

Kompresija, veličina i format zadovoljavaju potrebu za “manjim, prikladnijim datotekama”.
No ako se slike uvijek dohvaćaju s izvornog poslužitelja na velikoj udaljenosti, mrežna latencija i dalje će primjetno utjecati na iskustvo. Tada je potrebno rješenje na razini isporuke (CDN/slike CDN).

Dva tipična pristupa:

• Cloudflare Poljska：Cloudflare dokumentacijaČlanak predstavlja Polyjevih metoda kompresije (bezgubna/gubna/WebP) i spominje korištenje format=auto Dopuštena je upotreba WebP/AVIF formata.
• Jetpack Site Accelerator：Dokumentacija za JetpackOptimizirat će slike i distribuirati ih zajedno sa statičkim resursima putem svoje mreže.

Optimizacija slika odgovorna je za smanjenje veličine i osiguravanje prikladnosti.CDN odgovoran za bližu i stabilniju isporuku

3. Odabir: Samo se dvije glavne rute trebaju slijediti.

Najčešća zamka u optimizaciji slika nije “neinstaliranje dodataka”, već instaliranje previše dodataka koji dovode do suvišne obrade:
A komprimira, B također komprimira; A pretvara u WebP/AVIF, B također pretvara; A mijenja URL-ove, B ih prepisuje — na kraju ni sam ne možeš objasniti što se događa na stranici.

Pravila:

Samo jedan put naprijed: ili potpuno besplatno lokalno pohranjivanje, ili kompresija u oblaku s tri opcije na izbor.

• Ruta A (potpuno besplatna lokalna):Plus WebP ili AVIF + EWWW Image Optimizer(ili odaberite samo jedan od njih)
• Ruta B (Odaberite jednu od tri opcije kompresije u oblaku):ShortPixel / Imagify / TinyPNG

---

3.1 Ruta A: Potpuno besplatna lokalna (Plus WebP ili AVIF ili EWWW)

Odredne značajke ove rute su:

• Ne oslanjate se na usluge kompresije trećih strana koje rade na temelju mjesečne kvote ili po datoteci (iako neke značajke mogu nuditi dodatne usluge).
• Cijena je: skupna obrada može više opteretiti poslužiteljski CPU/IO pa trebate više paziti na strategiju i rizik“

3.1.1 Plus WebP ili AVIFOsnovni koncept je “generacija/zamjena”, što nije tradicionalni “alat za kompresiju”.”

• Pri generiranju slika pune rezolucije:ID izvornog datoteka slike bit će nadjačan WebP/AVIF datotekom, izvorna datoteka bit će izbrisana, a URL unutar sadržaja također će biti zamijenjen.。
• Dodatak pruža WP-CLI naredbe i savjetuje: pri radu s brojnim datotekama WP-CLI se pokazuje pouzdanijim.

To znači: ne “tiho generira WebP za vas”, nego može biti jednokratna pojava.Prijenos imovine(posebno kada omogućite opciju “Zamijeni i izbriši izvornu sliku”).

Razlika između dva načina

Način 1: Zadrži izvorni prikaz + generiraj kopiju u WebP/AVIF formatu (stabilnije)

• Prednost: Lakše je vratiti u slučaju problema s kompatibilnošću
• Trošak: Potrošnja prostora na disku će se povećati (izvorna slika + novi format + minijature više veličina)

Način rada 2: Zamijeni i izbriši izvornu sliku (agresivnije)

• Prednosti: diskovi se ne šire tako brzo; unutarnje reference se automatski pretvaraju u novi format.
• Rizici: Kada se istovremeno mijenjaju resursi i reference, otklanjanje problema s kompatibilnošću postaje znatno skuplje (posebno kada se vanjski sustavi ili logika teme oslanjaju na izvorne nazive datoteka, putanje ili formate).

Uobičajene zamke kod WebP-a ili AVIF-a

1. Nakon potpunog zamjene baze podataka, određene slike stranica se prikazuju neispravno.
   Uzrok obično nije u tome da je “slika oštećena”, nego u tome da neki dio lanca – poput zamjene URL-a, keširanja ili strategija za minijature – nije ispravno usklađen.
2. Što je veći broj minijatura, to je opseg promjena širi.
   Postavljanje slike na WordPress generira više veličina; teme ili dodatci mogu dodati dodatne dimenzije. Potpuna zamjena podrazumijeva da biste mogli mijenjati značajnu zbirku datoteka.
3. Samo izvođenje migracije formata ne jamči najmanji mogući volumen.
   WebP/AVIF datoteke su općenito manje, ali strategija veličine i strategija kompresije i dalje su ključne. Nemojte Plus WebP smatrati rješenjem s jednim klikom za brže učitavanje.

---

3.1.2 EWWW Image OptimizerBesplatno lokalno rješenje za kompresiju

Pozicioniranje stranice dodatka EWWW je vrlo jasno:

• Može koristiti niz alata na vašem poslužitelju za optimizaciju (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp itd.).
• Ako trebate veći stupanj kompresije ili manju potrošnju CPU, obradu koja troši CPU možete prebaciti i na njegov poslužitelj (neobavezno).

Koju ulogu bi EWWW trebao igrati na Ruti A?

Ako koristite Plus WebP za strategiju migracije/zamjene formata, onda je EWWW bolje prilagođen za to:

• Optimizacija kompresije i volumena(posebno smanjenje veličine sirovih resursa kao što su JPG/PNG datoteke)
• Serijska optimizacija povijesnih medijskih biblioteka(Cilj je “smanjenje opsega”, a ne “zamjena URL-a”)

EWWW-ove klasične zamke

1. Opterećenje poslužitelja se povećava tijekom grupne optimizacije
   Budući da lokalna kompresija troši CPU/IO. Rješenje nije “nemoj koristiti”, nego “u serijama, izvan vršnog opterećenja i po potrebi odabrati offload/cloud rješenje”.
2. “Generiranje WebP-a ne znači nužno da frontend poslužuje WebP.
   Mnogi dodaci pate od ove zablude: generiranje je jedno, a strategija isporuke (prepisivanje, oznake slika, pogoci iz keša itd.) sasvim je drugo.
3. dupliciranje iste funkcionalnosti kao i drugi dodaci
   Ako odaberete rutu A, izbjegavajte gomilati usluge kompresije oblaka poput ShortPixel/Imagify/TinyPNG; ako odaberete rutu B, onemogućite logiku zamjene Plus WebP. Osnovno načelo:Drži se jednog plana djelovanja.

---

3.2 Ruta B: Odaberite jednu od tri usluge kompresije u oblaku (ShortPixel / Imagify / TinyPNG)

Ova je ruta pogodna za one koji žele sačuvati resurse poslužitelja, preferiraju jednostavniji pristup obradi u serijama i ugodni su s modelom naplate prema potrošnji.
Međutim, najčešća točka nerazumijevanja u vezi s kompresijom u oblaku je:Besplatna kvota nije jednostavno stvar “besplatnih listova”.Broj veličina sličica, generiranje WebP/AVIF formata i ponovno komprimiranje značajno će utjecati na potrošnju resursa.

U nastavku ćemo objasniti: kako funkcioniraju besplatni i plaćeni nivoi, kako se odbijaju kvote, najčešće zamke koje treba izbjegavati i koje vrste stranica su najprikladnije.

---

3.2.1 ShortPixel100 besplatnih kredita mjesečno, ali će se krediti trošiti na minijature i povećanja u WebP/AVIF formatu.

U čemu je stvar s besplatnim/plaćenim?

Opis dodatka ShortPixel izričito navodi:

• 100 besplatnih kredita mjesečno
• Također postoje “dodatni neograničeni mjesečni krediti” (stranica dodatka pruža odgovarajuće informacije o cijenama).
• Također nudi jednokratne pakete kredita koji ne istječu (uz navedene početne informacije o cijenama)

Napomena:

• Besplatno: mjesečna dodjela kredita za lagane stranice ili u svrhu testiranja.
• Jednokratni paket: Pogodan za stranice s opsežnim medijskim bibliotekama koje žele rasprodati zalihe u jednoj transakciji (kupuje se jednom za neograničenu upotrebu, obično bez isteka).
• Mjesečno/neograničeno: Pogodno za stranice kojima su potrebna kontinuirana ažuriranja slika i dugoročna, stabilna optimizacija.

Službena baza znanja ShortPixela također obrađuje usporedbu jednokratnih paketa i neograničenih mjesečnih planova.Jasno objašnjenjeMjesečni plan Unlimited naplaćuje se mjesečno (ili godišnje), nudeći neograničene kredite i fiksnu kvotu od CDN; jednokratni krediti ne istječu, što vam omogućuje veću kontrolu nad potrošnjom kad god je to potrebno.

Najvažnija točka: Kako se izračunavaju ShortPixel krediti?

Službena dokumentacija ShortPixela KB je to vrlo jasno rekao:

• Postavljanje slike na WordPress generira više minijatura;
• Svaka optimizacija minijature računa se kao jedan kredit.；
• Ako odaberete generiranje WebP ili AVIF formata,Svaka WebP/AVIF verzija izvornog slike i njezina minijatura potrošit će dodatni kredit.；
• Možete isključiti određene minijature iz optimizacije kako biste smanjili potrošnju kredita.

Primjer zasluga：

Pretpostavimo da otpremite jednu sliku, a tema/plugin generira osam minijatura:

• Optimizacija originalne slike + samo minijature: 1 (originalna slika) + 8 (minijature) = 9 kredita
• Ako je potrebna i generacija WebP/AVIF formata: dodajte jednu verziju nove generacije za svaki od navedenih 9 formata → zatim dodajte još 9 kredita.
  Drugim riječima, ono što biste mogli smatrati “jednom slikom” zapravo bi moglo potrošiti gotovo “dvocifreni broj kredita”.

Stoga:“Besplatnih 100 kredita” ne znači “100 besplatnih slika”.

Najčešće zamke ShortPixela

1. Besplatnih 100 kredita brzo se potroše
   Osnovni uzrok: brojne minijature + dodatni krediti potrebni za generiranje WebP/AVIF formata.
   Preporuka：

• Prvo procijenite broj minijatura na stranici.
• Uklonite nepotrebne veličine minijatura (optimizirajte samo one veličine koje će se stvarno koristiti)
• Prvo odredite strategiju kompresije prije pokretanja u serijama kako biste izbjegli ponovljene pokušaje pokušaja i pogreške koji troše resurse.

2. Istovremeno preklapajte druge dodatke za pretvorbu formata
   Ako omogućite zamjenu Plus WebP-a i istovremeno naložite ShortPixelu da generira/ubacuje oznake nove generacije, logika postaje slojevita, što otežava otklanjanje poteškoća. Ruta B jednostavno prepušta ShortPixelu da to rješava neovisno.
3. Pretpostavljajući da jednostavna instalacija jamči da “frontend poslužuje WebP/AVIF”.”
   Stranica dodatka ShortPixelMože pretvarati WebP/AVIF formate i integrirati slike sljedeće generacije u front-end stranice (na primjer, putem implementacije oznake).
   Međutim, nakon dovršetka, rezultati se i dalje moraju provjeriti.

---

3.2.2 ImagifyBesplatno 201 TP234T mjesečno; kvota se odbija prema izvornoj veličini slike + broju minijatura, ponovno komprimiranje se dodatno naplaćuje

Besplatna dostava i postavljanje

Službena stranica s cijenama za ImagifyNapisano je sasvim jasno:Besplatni račun mjesečno 20MB kvota。
Na stranici dodatka također izričito stoji da može komprimirati, promijeniti veličinu i pretvoriti WebP/AVIF datoteke.

Kako se kvote odbijaju?

Službena dokumentacija za Imagify “Kako se izračunava iskorištenost kvote?” jasno razlaže mehanizam odbitka:

• Broj minijatura utjecat će na potrošnju.Na primjer, ako imate 10 veličina minijatura, optimizacija jedne slike postaje optimizacija 11 slika (izvorne slike i 10 minijatura), koje sve doprinose potrošnji kvote.
• Oduzmite kvotu na temelju izvorne veličine datoteke.Na primjer, ako pošaljete sliku od 100 KB na Imagify, 100 KB bit će odbijeno od vaše kvote.
• Promjena razine kompresije i ponovna optimizacija ponovno će potrošiti kvotu.。
• Isti API ključ može se koristiti na više stranica, ali kvote će se dijeliti među tim stranicama.

Ovo je Imagifyjev “osnovni pristup razumijevanju”:
To je više poput paketa podataka: što god pošaljete, to vam se odbija; što je više minijatura, to se više odbija; ponovljeni veliki prijenosi rezultirat će ponovljenim odbitcima.

Jednostavni primjeri Imagify kvote za lakše razumijevanje

Pretpostavimo da prenesete originalnu sliku od 800 KB, a stranica generira 8 minijatura.

• Prilikom optimizacije s Imagifyjem uključuju se i izvorna slika i osam minijatura (ako odaberete “Optimiziraj sve”). To znači da će ova jedna operacija potrošiti kvotu gotovo jednaku ukupnoj izvornoj veličini svih tih datoteka zajedno.
  Zato se na nekim stranicama čini da se “201 TP / 234 T” vrlo brzo potroši: nije stvar u tome da Imagify nije dovoljan, nego u tome što su slike koje prenosiš svaki put prevelike, ima previše sličica i možda više puta ponovno isprobavaš razine kompresije.

Uobičajene zamke kod Imagifyja

1. Besplatno 20MB nije dovoljno za potpuno čišćenje povijesti cijele stranice“
   20MB je općenito bolje prilagođen testiranju i manjim ažuriranjima; ako je vaša medijska biblioteka već velika, njezino cjelovito čišćenje vjerojatno će zahtijevati nadogradnju.
2. Ponovljeno podešavanje razine kompresije rezultira ponovljenom potrošnjom kvote.
   Imagify izričito navodiPonovna optimizacija će ponovno potrošiti kvotu.
   Preporučljivo je jasno razraditi strategiju na ovoj stranici:

• Prvo upotrijebite mali broj slika kako biste odredili razinu kompresije i vizualnu kvalitetu.
• Završite strategiju prije pokretanja u serijama.
  Izbjegavajte ponovljeno testiranje metodom pokušaja i pogreške na cijeloj bazi podataka.

3. Dijeljeni API ključevi na više lokacija dovode do tajanstvenog smanjenja kvota.“
   Ako koristite isti API ključ na više stranica, kvote će se dijeliti.
   Stoga je u timskim/višestrukim lokacijskim scenarijima preporučljivo jasno definirati koje lokacije dijele resurse, a koje posluju neovisno, čime se sprječava nekontroliranost proračuna.

---

3.2.3 TinyPNG(Slike za kompresiju): Besplatno 500 kredita mjesečno; pretvorba u WebP/AVIF naplaćuje se dodatnim 1 kreditom po veličini.“

Besplatni limit i način njegova obračuna

Stranica WordPress dodatka TinyPNG napisana je s velikom jasnoćom:

• 500 besplatnih kredita svakog mjeseca
• U “standardnoj WordPress instalaciji” može se komprimirati otprilike Približno 100 slika mjesečno
• Međutim, ako je omogućeno pretvaranje u AVIF ili WebP:Svaka veličina slike podliježe dodatnom trošku.Stoga se vjerojatno može samo komprimirati i pretvoriti. Približno 50 slika mjesečno(Ovisno o tome koliko veličina minijatura imate).

U međuvremenu je Tinify (programer TinyPNG/TinyJPG) također objavio na svom Stranica s cijenama API-jaNapomena: Registrirajte se i primajte 500 besplatnih kompresija mjesečno. Iznad tog ograničenja naplaćuju se prema broju uspješnih kompresija, bez obveze pretplate.

Ukratko o TinyPNG-u u jednoj rečenici:
Računa se po kreditima; što više veličina minijatura imate i što više WebP/AVIF formata omogućite, to će vam se krediti brže potrošiti.

Jednostavan primjer TinyPNG kredita

Pretpostavimo da vaša stranica generira osam veličina minijatura za svaku sliku:

• Kompresija samo: Izvorna slika + 8 minijatura → Potrebno je 9 kredita
• Ako je omogućen konverzijski postupak iz WebP/AVIF formata: primjenjuje se dodatno umanjenje kredita po veličini → to može gotovo udvostručiti trošak.
  Ovo točno odgovara opisu stranice dodatka: nakon omogućavanja konverzije, besplatna kvota se mijenja s otprilike “100 slika mjesečno” na “50 slika mjesečno”.

Uobičajene zamke kod TinyPNG-a

1. Pod pretpostavkom da 500 kredita = 500 slika
   Ne. Troši kredite na temelju “veličine/varijante slike”. Stranica dodatka izričito navodi: “Konverzija odbija dodatni 1 kredit po veličini slike”.
2. Tema/e-commerce dodatak generira pretjerane dimenzije, što dovodi do značajnog smanjenja besplatnih kvota.
   Što su dimenzije veće, to se krediti lakše pojačavaju i troše.
3. Nakon što sam omogućio konverziju, otkrio sam da kreditni limit odjednom nije bio dovoljan.
   Ovo nije bug; ovo je njegov mehanizam naplate.
   Strateške preporuke:

• Ako se besplatni paket primarno koristi za kompresiju i smanjenje veličine, u početku se možete usredotočiti isključivo na kompresiju. Kad potvrdite da je struktura stranice stabilna i da je sljedeća generacija doista potrebna, možete započeti konverziju.

4. Preporuke temeljene na kontekstu: Kako odabrati za različite vrste stranica

Iako svi koriste WordPress, stranice sadržaja, platforme za e-trgovinu, portfelji i stranice za članstvo svaka predstavljaju različite točke pritiska vezane uz slike.

4.1 Web-stranice/blogovi usmjereni na sadržaj (s brojnim slikama po članku i umjerenom učestalošću ažuriranja)

Prioritetne preporuke:

1. Dimenzijska strategija (korak 1)
2. Kompresija (Korak 2)
3. WebP (korak 3)

Pogodnija ruta:

• Za opciju bez muke: odaberite jednu od tri alternative (ShortPixel / Imagify / TinyPNG)
• Besplatna opcija: Ruta A (Plus WebP + EWWW), ali se preporučuje započeti procjenom rizika u “konzervativnom načinu rada (bez brisanja izvornika slika)”.

Uobičajene zamke:

• Naslovna slika članka je vrlo velika, a strategija lijenog učitavanja je neprikladna.usporit će prvi zaslon

4.2 E-trgovina/Stranice proizvoda (Mnoštvo minijatura, više varijanti slika, stabilnost je od presudne važnosti)

Najčešći problemi u e-trgovini ne proizlaze iz “loših rezultata kompresije”, već iz “pogrešnih dimenzija nakon optimizacije, nedostajućih minijatura i neuspjeha front-end komponenti pri dohvaćanju slika”.

Prioritetne preporuke:

1. Postupajte oprezno: usvojite konzervativan pristup strategijama kompresije; izbjegavajte odmah izvršiti potpunu zamjenu baze podataka.
2. Procijenite dimenzije minijatura: teme za e-trgovinu obično generiraju više veličina, što pojačava potrošnju kvote (posebno je to primjetno kod ShortPixel/TinyPNG).
3. Provedite malu validaciju prije širenja (izuzetno ključno)

Pogodnija ruta:

• Ruta B je često jednostavnija: ShortPixel, Imagify i TinyPNG svi podržavaju obradu u serijama. Ključno je razumjeti njihove mehanizme kvota i unaprijed procijeniti troškove.
• Ruta A je također izvediva, ali je potrebno biti oprezniji u vezi s ponašanjem Plus WebP-a pri “nadjačavanju ID-ova/brisanjima originalnih slika/zamjenama URL-ova”: to predstavlja migraciju resursa i ne preporučuje se provoditi cjelovitu zamjenu od samog početka.

4.3 Portfelj/fotografska web stranica (osjetljiva na kvalitetu pojedinačnih slika, velike veličine datoteka, visoke vizualne standarde)

Prioritetne preporuke:

1. Dimenzijska strategija (kontrola površine prikaza)
2. Strategija kompresije (bolje je pogriješiti na stranu malo veće veličine nego izgubiti detalje)
3. WebP/AVIF (donose značajne prednosti u scenarijima s velikim slikama, iako je vizualna kvaliteta potrebno potvrditi)

Pogodnija ruta:

• Imagify: Raspodjela kvota na temelju “veličine izvornog slike” čini takve stranice pogodnijima za “kontrolu proračuna” (budući da otprilike znate koliko će svaka velika slika potrošiti), ali izbjegavajte njihovo višestruko komprimiranje.
• ShortPixelAko je broj veličina minijatura ograničen, potrošnja kredita ostaje pod kontrolom; međutim, pri generiranju brojnih veličina uz resurse sljedeće generacije potrošnja kredita znatno raste, što zahtijeva unaprijedno planiranje.

5. Usporedba besplatne kvote i naplate: Objašnjenje je li besplatna kvota dovoljna

Koji je isplativiji i koliko će trajati besplatno razdoblje?

5.1 Tri modela odbitka naknada

• ShortPixel(zasluge)Krediti se izračunavaju na temelju broja originalnih slika i minijatura; generiranje WebP/AVIF verzija rezultirat će dodatnim odbitkom kredita za svaki odgovarajući format.
• Imagify(MB kvota)Odbitci od kvote temelje se na izvornoj veličini datoteke; više minijatura rezultira većim odbitcima; ponovna kompresija dovest će do dodatnih odbitaka.
• TinyPNG(zasluge): 500 kredita mjesečno; omogućavanje pretvorbe u WebP/AVIF rezultirat će dodatnim kreditima ovisno o veličini slike.

5.2 Metode brze procjene

Možete ga procijeniti na sljedeći način:

1. Nasumično pronađi jednu originalnu sliku koju često prenosiš i pogledaj otprilike koliko je velika (npr. 300 KB / 1MB / 3MB)
2. Procijenite približan broj veličina minijatura koje vaša stranica generira (npr. 5 / 10 / 20)
3. Odredite hoće li se generirati WebP/AVIF (Da/Ne)

Zatim upotrijebite sljedeću “mentalnu aritmetiku” kako biste razumjeli potrošnju:

• ShortPixelSvaka slika ≈ (1 + broj minijatura) kredita; ako se generiraju WebP/AVIF, ≈ otprilike dvostruko više (jer i verzije nove generacije također zahtijevaju kredite).
• ImagifySvaka slika otprilike troši kvotu jednaku (veličini izvorne slike + ukupnoj veličini svih minijatura); ponovno komprimiranje na drugoj razini kompresije rezultirat će dodatnim odbitkom kvote.
• TinyPNGBesplatno: 500 kredita; ako vaša stranica generira brojne veličine slika za svaku sliku i omogućen je konverzija, besplatni limit će se značajno smanjiti (stranica dodatka pruža intuitivnu procjenu od “otprilike 100 slika mjesečno” naspram “otprilike 50 slika mjesečno”).

6. Objava rizika

Rizik 1: Izbjegavajte da više dodataka redundantno obavlja istu funkciju.

Ovo je najčešći izvor katastrofa.“

• Ruta A:Plus WebP ili AVIF + EWWW(Raspodijelite odgovornosti između njih dvoje; nemojte istovremeno obavljati slične konverzije i dostave, niti instalirati samo jednu od njih.)
• Ruta B: ShortPixel / Imagify / TinyPNG Odaberite jednu od tri(Odaberite jednu odgovornu za kompresiju i novu generaciju)

Rizik 2: Funkcionalnost “nadjačavanje ID-a / brisanje izvorne slike / zamjena URL-a” u Plus WebP-u predstavlja migraciju resursa.

Još jednom, mora se naglasiti:Plus WebP Opis izričito navodi da će tijekom potpune generacije ID izvornog slike biti prepravljen, izvorna datoteka izbrisana, a URL sadržaja zamijenjen.
Ovo znači da to nije “manja prilagodba koja se može povući u bilo kojem trenutku”, već modifikacija na razini imovine.

Preporučena strategija trebala bi biti:

• Početno testiranje malog opsega (desetine do stotine stavki)
• Potvrdite da ispravno funkcioniraju prikaz na prednjoj strani, minijature i ažuriranja predmemorije.
• Razmotrite obradu cijele baze podataka

Rizik 3: Stvarna potrošnja besplatne kvote za kompresiju u oblaku ovisi o broju minijatura i odabranih opcija sljedeće generacije.

• ShortPixelMinijature i sljedeća generacija značajno će utjecati na kredite.
• TinyPNGOmogućavanje WebP/AVIF-a rezultirat će dodatnim oduzimanjem kredita za svaku veličinu slike.
• ImagifyOduzmite prema izvornoj veličini slike; što je više minijatura, veće je umanjenje. Jaka kompresija rezultirat će ponovljenim umanjenjima.

Rizik 4: “Generirani WebP/AVIF” ne znači isto što i “Frontend isporučuje WebP/AVIF”

Mnogi korisnici prijavljuju da im se stranica nije ubrzala nakon konverzije, a osnovni uzrok je što frontend i dalje isporučuje JPG/PNG datoteke (zbog neslaganja u bilo kojoj fazi procesa: keširanju, prepisivanju, oznakama ili pregovaranju preglednika).

7. Kako mogu provjeriti je li stupilo na snagu nakon dovršetka zadatka?

Četiri vrlo jednostavne točke provjere:

1. Kada istu stranicu osvježite drugi put, je li proces učitavanja stabilniji i brži?(Percepcija učinkovitosti keširanja i optimizacije)
2. Postoji li primjetna razlika u dimenzijama slike pri učitavanju na mobilnim i desktop uređajima?(Prilagodljiv) izvor/veličine Bilo da je učinkovito
3. Nenajavljeno provjerite nekoliko slika: postoje li WebP ili AVIF datoteke/resursi?Koristi li stranica to zapravo? sljedeće generacije）
4. Nabrzo provjerite nekoliko slika: zumirajte da vidite jesu li vidljivo zamućene ili je li tekst mutan.(Je li kvaliteta kompresije pretjerana?)

Ako su ispunjeni svi četiri kriterija, to znači da je ruta koju ste odabrali sada operativna. Nastavite na sljedeći korak. Sloj isporuke“Sveukupna stabilnost će biti poboljšana.

8. Preporuke za djelovanje

1. Prvo odaberite svoju rutu:

• Želio bih da ostane besplatno što je više moguće.Plus WebP ili AVIF + EWWW (ili instalirajte samo jedan od njih)
• Kako biste uštedjeli poslužiteljske resurse i uživali u većem miru uma uz naplatu prema potrošnjiOdaberite jednu od sljedećih opcija: ShortPixel / Imagify / TinyPNG

2. Provedite test malog opsega (nekoliko desetaka stavki)
3. Potvrdite da je sve u redu prije nego što nastavite s serijom.
4. Potrebna su daljnja poboljšanja za poboljšanje stabilnosti isporuke:Čitanje CDN Ubrzanje

Često postavljana pitanja

1. Koliko dodataka trebam instalirati? Mogu li instalirati sve?

Pokušaj se držati jedne rute.

• Ruta A: Plus WebP ili AVIF + EWWW Image Optimizer (ili instalirajte samo jedan od njih)
• Ruta B: Odaberite jednu od ShortPixel / Imagify / TinyPNG
  Imati više dodataka koji istovremeno unutar iste stranice izvode “kompresiju/konverziju u WebP/AVIF/modifikaciju URL-a/prepisivanje isporuke” najvjerojatnije će postati sve kaotičnije i najteže za otklanjanje poteškoća.

2. Zar WordPress već ne podržava WebP/AVIF? Trebam li i dalje dodatak?

Potrebno je razlikovati:
“Podrška za učitavanje/korištenje” ≠ “Automatska konverzija/automatska isporuka”.
WordPress 6.5 neće automatski masovno pretvarati starije JPG/PNG datoteke u WebP/AVIF, niti će automatski obavljati cjelokupan tijek rada “izdavanja AVIF/WebP-a na temelju mogućnosti preglednika s rezervnim rješenjima”. Za ažuriranje povijesnih medijskih biblioteka obično su potrebni dodaci ili usluge kako bi se proces dovršio.

3. U optimizaciji slika, koji korak donosi najveći povrat ulaganja?

Obično je Prvo ispravno odredite dimenzije (srcset/sizes)。
Mnoge stranice se sporo učitavaju ne zato što im nedostaje kompresija, nego zato što se stranice prikazuju samo u širini od 900 piksela, a korisnike prisiljavaju da preuzmu punu sliku od 3000 piksela. Kompresija štedi kilobajte, ali neusklađene dimenzije mogu uzalud potrošiti nekoliko puta više podataka.

4. Kako mogu potvrditi da se trenutno učitava “manja” slika, a ne da se neprestano preuzima original?

Promatraj dva fenomena:

• Kada se stranica otvori na mobilnom uređaju, dimenzije preuzete slike primjetno su manje nego na stolnom računalu.
• Veličina resursa iste slike varira kada je učitana na različitim uređajima.
  Ako se originalne slike uvijek preuzimaju, čest je uzrok to što tema ili graditelj tretira sliku kao CSS pozadinsku sliku ili prilagođeni izlaz, čime se zaobilaze mogućnosti medijske biblioteke za više veličina i funkcionalnost srcset.

5. Znači li “generirani WebP/AVIF” nužno da frontend ispisuje WebP/AVIF?

Nije isto kao.
Generacija je samo dovršetak “file layer”-a; hoće li frontend doista isporučiti WebP/AVIF ovisi o čimbenicima kao što su prepisivanje, strategija oznaka slika, pogodci iz keša i hoće li pregovaranje preglednika stupiti na snagu. Kad završite, morate “na uzorku provjeriti tipove resursa nekoliko slika”.

6. Koji je točno rizik s WebP-om ili AVIF-om? Mogu li pokrenuti konverziju jednim klikom na cijeloj biblioteci?

Njegova rizična točka nije “kompresija”, nego radijeModifikacija razine migracije imovine：

• Tijekom generiranja u punoj veličini ID izvornog datoteka slike može biti prepravljen, izvorna datoteka izbrisana, a URL-ovi unutar sadržaja zamijenjeni.
  StogaNije preporučljivo odmah zamijeniti cijelu bazu podataka.Prvo provedite testiranje na malom uzorku (desetine do stotine zapisa) i osigurajte dostupnost sigurnosnih kopija prije nego što razmotrite obradu cijele baze podataka.

7. Kako odabrati između dva načina rada za Plus WebP: Zadrži izvornu sliku ili Zamijeni i izbriši izvornu sliku?

Jednostavno rečeno:

• Način 1: Zadrži izvorni prikaz + generiraj kopiju u WebP/AVIF formatu (stabilnije)Praktično za vraćanje na prethodno stanje, ali će se povećati prostor na disku (izvorna slika + novi format + minijature više veličina).
• Način rada 2: Zamijeni i izbriši izvornu sliku (agresivnije)Proširenje diska nije lako postići, ali kada istovremeno mijenjate resurse i reference, troškovi otklanjanja problema s kompatibilnošću postaju znatno veći.
  Što je web-stranica složenija (e-trgovina/više dodataka/različite veličine), to je preporučljivije započeti s stabilnijim pristupom.

8. Je li besplatna lokalna kompresija EWWW Image Optimizera dovoljna? Može li preopteretiti poslužitelj?

EWWW je više poput lokalnog alata za kompresiju: troši CPU/IO.
Uobičajeno je da se opterećenje povećava tijekom optimizacije u serijama. To ne znači da je pristup neadekvatan, nego da strategija mora biti odgovarajuća: implementirajte u serijama, tijekom sati s niskim opterećenjem i po potrebi odaberite iskrcavanje ili rješenja u oblaku.
Ako tražite rješenje bez muke ili se suočavate s ograničenjima poslužiteljskih resursa, Ruta B je učinkovitija za poslužitelj.

9. 100 besplatnih kredita mjesečno na ShortPixelu – zašto se čini da nestanu nakon samo nekoliko slika?

Jer Krediti nisu “broj slika”.”bit će prikazano kao minijatura, a sljedeće generacije će biti uvećano:

• Originalna slika + svaki minijaturni prikaz računa se kao kredit
• Ako se generiraju WebP/AVIF, svaka odgovarajuća verzija će rezultirati dodatnom potrošnjom kredita.
  Možda biste pomislili da bi “1 slika” mogla potrošiti gotovo “dvocifreni broj kredita”. ShortPixel

10. Zašto se besplatnih 20MB mjesečno u Imagifyju također brzo potroši?

Imagify je više nalik “paket podataka”:

• Prema vašoj poruciIzvorna veličina datotekeoduzeti kvotu
• Što je više minijatura, to je veća potrošnja.
• Promjena razine kompresije radi ponovne optimizacije ponovno će potrošiti kvotu.
• Jedan API ključ dijeli se među više lokacija, a kvote se u skladu s tim dijele.
  Zato je “20MB se brzo potroši” često uzrokovano time što su slike prevelike, ima previše sličica ili se stalno pokušava i griješi.

11. TinyPNG nudi 500 besplatnih kredita mjesečno, pa zašto dodatak navodi da je to samo oko 100 slika mjesečno? I zašto se taj broj smanjuje na 50 slika mjesečno nakon omogućavanja WebP/AVIF-a?

Budući da se TinyPNG-ovi krediti također pojačavaju pomoću “size/variant”:

• Standardna WordPress instalacija obično komprimira oko 100 slika mjesečno.
• Omogućite AVIF ili WebP konverziju:Svaka veličina slike podliježe dodatnom trošku.Stoga je vjerojatno moguće komprimirati i pretvoriti samo otprilike 50 slika mjesečno (ovisno o broju veličina minijatura).
  Stoga 500 kredita ≠ 500 slika.

12. Koliko minijatura ima na mojoj stranici? Zašto to ima tako značajan utjecaj?

Učitavanje slike u WordPress generira više veličina; teme/plugini (posebno oni za e-trgovinu) mogu dodati dodatne dimenzije.
Krediti/kvote za kompresiju u oblaku obično se izračunavaju kao “izvorna slika + kombinacija minijatura”, pa što je veći broj minijatura, to će besplatna kvota brže potrošiti.

13. Ubrzava li lijeno učitavanje uvijek stvari? Zašto neki tvrde da zapravo usporava?

Ljeni učitavanje je pogodno za resurse izvan ekrana.
Ako se najvažnija velika slika na prvoj stranici također odgađa, to može usporiti početno iskustvo učitavanja. Iako je zadano lijeno učitavanje u WordPressu 5.5 općenito prihvatljivo, izbjegavajte univerzalni pristup.

14. Kada mi je potreban CDN / slika CDN ako idem rutom A ili B?

Kompresija, veličina i format zadovoljavaju potrebu za “manjim, prikladnijim datotekama”;
CDN osigurava bržu i pouzdaniju isporuku。
Kada udaljeno dohvaćanje slika s izvornog poslužitelja uzrokuje primjetnu latenciju, dodatno uvođenje CDN/Slika CDN (npr. Cloudflare Polish / Jetpack Site Accelerator) bit će općenito stabilnije za čitanje WordPress CDN ubrzanje。

15. Koji je najjednostavniji način da provjerim je li to zaista uspjelo nakon što sam to napravio?

Metoda provjere koja štedi najviše vremena:

• Kada istu stranicu osvježite drugi put, je li proces učitavanja stabilniji i brži?
• Postoji li primjetna razlika u dimenzijama slike između mobilne i desktop verzije pri učitavanju (funkcioniraju li srcset/sizes ispravno)?
• Nenajavljeno provjerite nekoliko slika: postoje li WebP ili AVIF datoteke/resursi?
• Nabrzo provjerite nekoliko slika: zumirajte da vidite jesu li vidljivo zamućene ili je li tekst mutan.