Optimizarea imaginii site-ului

Optimizarea imaginilor este unul dintre cele mai “satisfăcătoare” aspecte ale performanței WordPress: pentru aceeași structură de pagină și temă, atât timp cât dimensiunea, dimensiunile, formatarea și livrarea imaginilor sunt corecte, experiența de încărcare se va îmbunătăți imediat.

Dar optimizarea imaginilor este, de asemenea, cel mai ușor mod de a face mizerie, nu pentru că este prea dificil din punct de vedere tehnic, ci pentru că informațiile sunt prea fragmentate:
Ai citit câteva articole, știi că “compresie”, “WebP / AVIF”, “încărcare leneșă”, și apoi te uiți la introducerea plugin-ului și a spus “gratuit în fiecare lună! 100 de credite pe lună”, “Gratuit 20MB”, “1 credit pe imagine”, dar cu cât citesc mai mult, cu atât sunt mai confuz - Este suficient gratuit? Cum să deduci taxa? Ați înțeles greșit “același lucru”? Și cel mai important:A avut efect după ce ați făcut-o sau nu?

Acest articol face doar trei lucruri:

1. Vă oferă un executabilfoaie de parcurs (de asemenea fig.)(Ce să faceți mai întâi, ce să faceți apoi)
2. Fiți clar cu privire la opțiunea pe care o alegeți (care este diferența dintre gratuit/plătit și pentru cine este potrivită fiecare)
3. Scrieți din timp cele mai frecvente capcane (astfel încât să nu trebuiască să căutați în jur pentru a rezolva problemele atunci când ați terminat)

1. Concluzie: Cu ce vine WordPress și cu ce nu vine

Dacă nu vă dați seama mai întâi ce face deja nucleul WordPress, este ușor să faceți unul din două lucruri:

• În loc să utilizați “capacitatea liberă” de care ar trebui să vă bucurați, cheltuiți timp/plătiți bani pentru a construi roata din nou și din nou.
• Am crezut că WordPress va “converti automat toate imaginile vechi în WebP/AVIF”, dar se pare că nu o face!

Nucleul WordPress are aceste capabilități cheie încorporate:

• Imagini responsive (srcset/sizes): Începând cu WordPress 4.4, nucleul va produce imagini pentru srcset 与 sizesși utilizează imaginile de dimensiuni multiple generate în timpul încărcării pentru a permite browserului să aleagă o resursă mai potrivită pentru încărcare în funcție de condițiile ecranului.
• Încărcare leneșă nativă: WordPress 5.5 și mai departe permite încărcarea nativă leneșă a imaginilor în mod implicit, utilizând standardele HTML. loading implementarea atributului.
• Suport pentru încărcarea WebP: De la WordPress 5.8, puteți încărca și utiliza WebP ca JPEG/PNG (cu condiția ca mediul dvs. de găzduire să suporte WebP).
• Suport pentru încărcarea AVIF: De la WordPress 6.5, puteți încărca și utiliza AVIF ca JPEG/PNG (depinde și de suportul de găzduire).

Dar acordați atenție:
“Suport pentru încărcare/utilizare” ≠ “Conversie automată/livrare automată”.
Adică: chiar dacă sunteți deja pe WP 6.5, acele JPG/PNG-uri din biblioteca dvs. media nu se vor transforma singure în WebP/AVIF; nu veți obține automat link-ul complet “ieșire AVIF/WebP în funcție de capacitățile browserului și revenire la imaginea originală pentru browserele nesuportate”! -această parte trebuie, de obicei, să fie remediată printr-un plugin sau serviciu.

2. Foaie de parcurs: Optimizarea imaginilor în 5 pași

Ce trebuie să faceți, de ce, ce trebuie să faceți pentru a vă califica și ce este o groapă tipică.

2.1 În primul rând, stabilirea corectă a “dimensiunii” (cea mai neglijată, dar cea mai satisfăcătoare)

Multe stații sunt lente nu pentru că compresia nu este făcută, ci pentru căAți descărcat o imagine mare care se extinde mult dincolo de zona de afișare：
De exemplu, dacă pagina are de fapt o lățime de numai 900 px, iar vizitatorului îi cereți să descarce imaginea originală de 3 000 px, browserul “o descarcă și apoi o micșorează”. Acest lucru irosește lățimea de bandă, crește timpul de decodare și încetinește primul ecran.

WordPress 4.4+Mecanism de imagine receptiv（srcset/sizes) este conceput tocmai pentru a aborda această problemă.

Faceți ceea ce contează ca o trecere:

• Atunci când deschideți o pagină pe un telefon mobil, dimensiunea imaginii descărcate ar trebui să fie semnificativ mai mică decât pe desktop
• Aceeași imagine se încarcă cu dimensiuni diferite ale resurselor pe dispozitive diferite (în loc să se descarce întotdeauna imaginea originală)

Cele mai frecvente capcane:

• Există teme/constructorii care tratează diagramele ca imagini de fundal CSS sau le produc într-un mod personalizat care poate ocoli srcsetRezultatul a fost o imagine mare a
• Utilizați paturi de imagini legate extern, blocuri de imagini terțe și puteți, de asemenea, să ocoliți sistemul de dimensiuni multiple generat de biblioteca media

---

2.2 Compresie (reduceți KB, dar nu “distrugeți” calitatea)

Esența compresiei nu este “cu cât mai mic, cu atât mai bine”, ci “diferența este abia vizibilă cu ochiul liber, dar scăderea volumului este evidentă”.

Regulile sunt următoarele:

• Fotografii/înregistrări live (oameni, produse, peisaje): Prioritate compresie cu pierderi (câștig maxim)
• Capturi de ecran ale interfeței / imagini cu mult text: Fiți mai conservator în compresie pentru a evita textul neclar
• Logo/Icon: Prioritate SVG sau discret lossless (lossy este ușor de lipit pe margine)

Faceți ceea ce contează ca o trecere:

• Reducerea semnificativă a dimensiunii imaginii pe majoritatea paginilor
• Fără zgomot vizibil, margini înnămolite, întreruperi ale blocurilor de culori, text încețoșat

---

2.3 WebP / AVIF (strategie de format: mai mic pentru aceeași definiție)

WordPress acceptă deja încărcarea WebP (5.8) vs. AVIF (6.5)。
Dar pentru ca formatul Next Generation să funcționeze cu adevărat, trebuie rezolvate două lucruri:

1. Cum să convertiți pe lot bibliotecile media istorice(În caz contrar, optimizați doar pentru “imagini noi încărcate mai târziu”)
2. Dacă se generează o copie sau se înlocuiește imaginea originală(Acesta este un moment riscant; ne vom concentra mai târziu pe opțiunea “Înlocuirea și ștergerea imaginii originale” a Plus WebP)

Stil de scriere recomandat:

• WebP: în general preferat ca implicit (compatibilitate mai stabilă)
• AVIF: o altă direcție de compresie, potrivită pentru imagini mari/imagini mari pe primul ecran/imagini de album (dar maiDependența de sprijinul mediului）

---

2.4 Încărcarea leneșă trebuie să fie utilizată corect (nu o singură mărime se potrivește tuturor)

WordPress 5.5 și următoareleÎncărcare leneșă implicităImagine.
Aceasta reduce utilizarea lățimii de bandă în timpul redării inițiale:

• Încărcare leneșă pentru “resurse în afara ecranului”
• Cea mai importantă imagine mare de pe primul ecran (și, în multe cazuri, imaginea cheie de pe primul ecran) este adesea nepotrivită pentru încărcarea întârziată

---

2.5 Strat de livrare: CDN / Imagine CDN

Compresia, dimensionarea și formatarea rezolvă problema “fișierelor mai mici care se potrivesc”.
Cu toate acestea, dacă imaginile sunt întotdeauna extrase de la o anumită distanță de sursă, latența rețelei va afecta în continuare semnificativ experiența. Aici intervine soluția “stratului de livrare” (CDN/Image CDN).

Două direcții tipice:

• Cloudflare polonez：Documentație CloudflareSunt prezentate metodele poloneze de compresie (lossless/lossy/WebP) și se menționează că compresia cu format=auto Formatul WebP/AVIF este permis.
• Accelerator de site-uri Jetpack：Documentație JetpackExplicați că va optimiza imaginile și le va distribui prin rețeaua sa împreună cu resursele statice.

Optimizarea imaginilor are rolul de a deveni mai mici și mai adecvate.CDN este responsabil pentru furnizarea de mai aproape și mai stabil

3. Selecție: doar două rute principale

Cel mai frecvent eșec în optimizarea imaginilor nu este “lipsa pluginurilor”, ci numărul prea mare de pluginuri care duce la procesarea duplicată:
A comprimă, B comprimă, A convertește în WebP/AVIF, B convertește, A schimbă URL-urile, B rescrie - nici măcar nu vă puteți da seama ce se întâmplă în stație.

Reguli:

Există o singură cale de urmat: fie compresie locală gratuită, fie compresie în cloud a celor trei.

• Ruta A (toate cursele locale gratuite):Plus WebP sau AVIF + Optimizator de imagini EWWW(sau doar una)
• Ruta B (opțiune triplă de compresie în cloud):ShortPixel / Imagify / TinyPNG

---

3.1 Ruta A: Local complet gratuit (plus WebP sau AVIF sau EWWW)

Acest traseu este caracterizat prin:

• Nu vă bazați pe serviciile de compresie ale terților “pe lună/pe foaie” (deși unele caracteristici pot fi oferite ca servicii opționale).
• Costul: procesarea pe loturi poate fi mai consumatoare de servere la CPU/IO, solicitându-vă să acordați mai multă atenție “strategiei și riscului”.”

3.1.1 Plus WebP sau AVIF: nucleul este “generare/înlocuire”, nu este un “instrument de compresie” tradițional.”

• La generarea imaginilor de volum complet:ID-ul fișierului imagine original este suprascris de WebP/AVIF, fișierul original este șters, iar URL-ul din conținut este înlocuit.。
• Pluginul oferă comenzi WP-CLI și reamintește: WP-CLI este mai fiabil atunci când există multe fișiere.

Acest lucru înseamnă că, în loc de “generarea liniștită a unui WebP pentru dvs.”, ar putea fi unMigrarea activelor(Mai ales dacă activați opțiunea “Înlocuiți și ștergeți imaginea originală”).

Diferențe între cele două modele

Modul 1: Păstrați imaginea originală + generați o copie WebP/AVIF (mai stabilă)

• Pro: Mai ușor de folosit în caz de probleme de compatibilitate
• Cost: Utilizarea discului va crește (imaginea originală + noul format + miniaturi de dimensiuni multiple)

Modul 2: Înlocuiți și ștergeți imaginea originală (mai agresiv)

• Avantaje: discurile nu se extind la fel de repede; referințele stațiilor trec direct la noul format
• Risc: “schimbați activele + schimbați referințele”, ceea ce face mai costisitoare rezolvarea problemelor de compatibilitate (mai ales dacă unele sisteme externe sau logici tematice depind de numele de fișier/cărarea/formatul original).

Capcane tipice ale Plus WebP sau AVIF

1. După înlocuirea întregii biblioteci, imaginile unor pagini sunt afișate anormal.
   Motivul pentru care se întâmplă acest lucru nu este, de obicei, că imaginea este “stricată”, ci că o verigă din lanțul de substituire URL, cache, politica privind miniaturile etc. nu este corectă.
2. Cu cât este mai mare numărul de miniaturi, cu atât este mai mare domeniul de aplicare al modificării
   WordPress generează mai multe dimensiuni pentru încărcarea unei imagini; temele/pluginele pot adăuga, de asemenea, mai multe dimensiuni. Înlocuirea completă înseamnă că este posibil să modificați o colecție foarte mare de fișiere.
3. Efectuarea unei migrări de format nu înseamnă neapărat că volumul este întotdeauna cel mai mic
   WebP/AVIF sunt în general mai mici, dar “strategia de dimensiune” și “strategia de compresie” sunt în continuare esențiale. Nu vă gândiți la Plus WebP ca la “un clic mai rapid”.

---

3.1.2 Optimizator de imagini EWWW: reprezentant al compresiei locale libere

Pagina pluginului EWWW este foarte bine poziționată:

• Acesta poate fi optimizat pe serverul dvs. folosind o serie de instrumente (jpegtran, optipng, pnggout, pngquant, gifsicle, cwebp, etc.)
• De asemenea, puteți descărca procesarea care consumă CPU către serverul său (opțional) dacă aveți nevoie de o compresie mai mare sau de mai multe economii CPU.

Ce rol ar trebui să aibă EWWW în ruta A?

Dacă utilizați Plus WebP ca o “strategie de migrare/înlocuire a formatului”, atunci EWWW este mai potrivit:

• Compresia și optimizarea volumului(în special reducerea greutății resurselor brute, cum ar fi JPG/PNG)
• Optimizarea pe loturi a bibliotecii media istorice(vizând “reducerea volumului” mai degrabă decât “înlocuirea URL”)

Groapă tipică de EWWW

1. Încărcare ridicată a serverului în timpul optimizării loturilor
   Deoarece compresia locală consumă CPU/IO, soluția nu este “nu o folosiți”, ci “lot, vârf scăzut, opțiune de offload/cloud dacă este necesar”.
2. “Un WebP este generat” nu înseamnă că frontend-ul trebuie să producă un WebP.
   Multe pluginuri suferă de această neînțelegere: generarea este un lucru, strategiile de livrare (rescrieri, etichete de imagine, accesări cache etc.) sunt altele.
3. Efectuarea aceluiași lucru la nesfârșit cu alte pluginuri
   Dacă urmați calea A, încercați să nu suprapuneți compresia de tip ShortPixel/Imagify/TinyPNG; dacă urmați calea B, nu activați logica de înlocuire Plus WebP. Principiul de bază:O rută până la capăt.

---

3.2 Ruta B: Alegerea triplă a compresiei în cloud (ShortPixel / Imagify / TinyPNG)

Această rută este potrivită pentru persoanele care “doresc să economisească resursele serverului, doresc să facă loturi cu mai puțin efort și acceptă facturarea pe credit/pe volum”.
Dar cel mai înșelător aspect despre compresia în cloud este:Creditele gratuite nu sunt la fel de simple ca “foile gratuite”!.. Numărul de dimensiuni ale miniaturilor, dacă se generează sau nu WebP/AVIF și dacă se represurizează în mod repetat sau nu pot afecta semnificativ consumul.

În cele ce urmează se vor explica: ce se întâmplă cu gratuitatea/taxa, cum sunt deduse creditele, care sunt cele mai probabile capcane în care se poate intra și ce tipuri de site-uri sunt adecvate.

---

3.2.1 Pixel scurt100 de credite gratuite/lună, dar creditele sunt consumate de miniaturi și măriri WebP/AVIF.

Ce se întâmplă cu free/paid

Descrierea pluginului ShortPixel afirmă în mod clar:

• 100 de credite gratuite pe lună
• Există, de asemenea, “Credite lunare suplimentare nelimitate” (pagina pluginului oferă informații cu privire la prețurile corespunzătoare)
• De asemenea, disponibile ca “pachete de credite unice care nu expiră niciodată” (cu informații privind prețul de pornire)

Sfat:

• Gratuit: oferiți o anumită cantitate de credite pe lună pentru site-uri ușoare sau pentru testare
• Pachete de unică folosință: potrivite pentru site-urile cu biblioteci media mari care doresc să își epuizeze stocul dintr-o dată (cumpărați o dată și consumați-l, de obicei nu expiră).
• Lunar/limitat: potrivit pentru site-uri cu imagini actualizate continuu și optimizare stabilă pe termen lung

KB-ul oficial al ShortPixel a oferit, de asemenea, o actualizare cu privire la “One Time Pack vs Unlimited Monthly”.explicație explicită: Lunar nelimitat este o plată lunară (sau anuală) care oferă credite nelimitate cu o alocare fixă de CDN; credite unice care nu expiră, oferindu-vă mai mult control asupra utilizării la cerere.

Concluzia: cum sunt calculate creditele ShortPixel?

Documentația oficială ShortPixel KB a spus-o foarte direct:

• WordPress generează mai multe miniaturi atunci când încărcați o imagine;
• Fiecare optimizare a miniaturii contează ca un credit；
• Dacă alegeți să generați un fișier WebP sau AVIF, fișierulFiecare versiune WebP/AVIF a imaginii originale și thumbnail consumă un credit suplimentar.；
• Puteți exclude anumite miniaturi de la optimizare pentru a reduce consumul de credite.

Exemplu de credite：

Să spunem că încărcați 1 imagine și tema/pluginul generează 8 miniaturi:

• Optimizați doar imaginea originală + miniaturi: 1 (original) + 8 (miniaturi) = 9 credite
• Dacă doriți să generați și WebP/AVIF: încă o versiune next-gen pentru fiecare dintre cele 9 de mai sus → +9 credite.
  Cu alte cuvinte, ceea ce credeți că este “1 imagine” poate consuma de fapt aproape “credite cu 2 cifre”.

Deci:“100 de credite gratuite” nu este același lucru cu “100 de imagini gratuite”.

Cele mai frecvente capcane ale ShortPixel

1. 100 de credite gratuite se termină rapid
   Cauza principală: o mulțime de miniaturi + credite suplimentare pentru generarea WebP/AVIF.
   sugestie：

• Evaluați mai întâi numărul de miniaturi ale site-ului
• Excludeți dimensiunile inutile ale miniaturilor (optimizați numai dimensiunile care vor fi utilizate efectiv)
• Determinați strategia de compresie înainte de rularea în vrac pentru a evita consumul repetat de încercări și erori

2. Stivuirea simultană a altor plug-in-uri de conversie
   Dacă aveți înlocuiri Plus WebP și ShortPixel generând/inserând etichete next-gen, logica se acumulează și devine mai greu de depanat. Pentru ruta B, lăsați ShortPixel să se descurce singur.
3. Am crezut că dacă îl instalez, va fi “WebP/AVIF în prim-plan”.”
   Pagina pluginului ShortPixelA menționat că convertește WebP/AVIF și poate adăuga imagini next-gen pe prima pagină (de exemplu, prin etichetare).
   Dar este totuși important să verificați rezultatele.

---

3.2.2 ImagificațiGratuit: 20MB/lună; cota este dedusă în funcție de “dimensiunea imaginii originale + numărul de miniaturi”, se vor face deduceri repetate pentru reimprimare.

Cantitate liberă și poziționare

Pagina oficială de prețuri ImagifyScrisul este clar:Cont gratuit Cont lunar 20MB Cota。
De asemenea, pagina sa de plugin clarifică faptul că poate comprima, redimensiona și converti WebP/AVIF.

Cum este dedusă cota?

Documentație oficială Imagify “Cum se calculează utilizarea cotelor?” detaliază foarte clar mecanismul de deducere:

• Numărul de miniaturi afectează consumulDe exemplu, dacă aveți 10 dimensiuni ale miniaturilor, optimizarea unei imagini devine optimizarea a 11 imagini (original + 10 miniaturi), care contribuie toate la consumul de cote.
• Deducerea cotei în funcție de dimensiunea documentului original: De exemplu, dacă trimiteți o imagine de 100KB către Imagify, 100KB vor fi scăzuți din cotă.
• Schimbarea nivelului de compresie și reoptimizarea vor consuma din nou cota。
• Aceeași cheie API poate fi utilizată pentru mai multe site-uri, dar cotele sunt partajate între acestea.

Acesta este “modul principal de înțelegere” al Imagify:
Este mai mult ca un pachet de trafic: deduce atât cât trimiteți; cu cât aveți mai multe miniaturi, cu atât deduce mai mult; și veți repeta deducerea dacă o apăsați din nou în mod repetat.

Exemplu de cotă Imagify ușor de citit

Să spunem că încărcați o imagine originală de 800 KB și site-ul generează 8 miniaturi.

• Imagify optimizează pentru a include “imaginea originală + 8 miniaturi” (dacă alegeți să le optimizați pe toate), ceea ce înseamnă că această singură acțiune consumă o cotă apropiată de “dimensiunea originală a tuturor acestor fișiere combinate”.
  Acesta este motivul pentru care unele site-uri simt că “20MB se termină repede”: nu este vorba că Imagify nu este suficient, ci că încărcați prea multe imagini în același timp, prea multe miniaturi și probabil că încercați nivelurile de compresie din nou și din nou.

Cele mai frecvente capcane ale Imagify

1. Gratuit 20MB Nu este suficient pentru a face un “inventar complet al istoriei site-ului”
   20MB este, de obicei, mai potrivit pentru testarea cu actualizări ușoare; dacă biblioteca dvs. media este deja mare, este posibil ca o curățare unică să necesite o actualizare.
2. Ajustarea repetată a nivelurilor de compresie duce la dublarea consumului de cote
   Imagify precizează căReoptimizarea va consuma din nou cota.
   Vă sugerez să clarificați “strategia” pe această pagină:

• Începeți cu un număr mic de imagini pentru a determina nivelul de compresie și aspectul
• Determinați strategia și apoi rulați în masă
  Evitați încercările și erorile repetate pe întreaga bibliotecă

3. Mai multe site-uri care împart cheia API duc la “reducerea inexplicabilă a cotelor”.”
   Dacă utilizați aceeași cheie API pentru mai mult de o stație, cota este partajată.
   Prin urmare, în scenariile de echipă/multi-stații, cel mai bine este să fie clar: care stații sunt partajate și care sunt utilizate individual pentru a evita bugetele incontrolabile.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 de credite gratuite/lună; trecerea la WebP/AVIF va “deduce 1 credit per dimensiune”.”

Credite gratuite și ideile sale de facturare

Pagina de plugin WordPress a lui TinyPNG este foarte clară:

• 500 de credite gratuite pe lună
• În “General WordPress Installation”, probabil că puteți comprima Aproximativ 100 imagini/lună
• Cu toate acestea, dacă conversia AVIF sau WebP este activată:Fiecare dimensiune a imaginii consumă un credit suplimentarDeci, se presupune că poate fi doar comprimat și convertit Aproximativ 50 imagini/lună(în funcție de numărul de dimensiuni ale miniaturilor pe care le aveți).

Între timp, Tinify (dezvoltatorii TinyPNG/TinyJPG) au făcut și ei Pagina de prețuri APIDescriere: Înscrieți-vă și primiți 500 de compresii gratuite pe lună; după aceea, veți fi facturat în funcție de numărul de compresii reușite, fără abonament obligatoriu.

Rezumați modul în care TinyPNG este înțeles într-o propoziție:
Acesta numără creditele; cu cât aveți mai multe dimensiuni ale miniaturilor și mai mult WebP/AVIF activat, cu atât creditele sunt consumate mai rapid.

Exemple ușor de citit de credite TinyPNG

Să presupunem că site-ul dvs. generează 8 dimensiuni ale miniaturilor pentru fiecare imagine:

• Doar compresie: original + 8 miniaturi → 9 credite necesare
• Dacă conversia WebP/AVIF este activată: un credit suplimentar pentru fiecare dimensiune → probabil aproape dublu!
  Acest lucru corespunde descrierii de pe pagina pluginului: după activare, suma gratuită se modifică de la aproximativ “100 de carduri/lună” la “50 de carduri/lună”.

Cele mai frecvente capcane ale TinyPNG

1. Gândire 500 credite = 500 imagini
   Nu este. Este consumată de “dimensiunea/varianta imaginii”. Pagina pluginului avertizează în mod clar că “Conversiile deduc 1 credit suplimentar pentru fiecare dimensiune a imaginii”.
2. Temele / pluginurile de comerț electronic generează prea multe dimensiuni, iar creditele gratuite scad semnificativ
   Cu cât există mai multe dimensiuni, cu atât creditele sunt mai ușor de scalat și consumat.
3. După activarea conversiei, constatați că creditele sunt brusc neutilizate.
   Nu este un bug, este mecanismul său de facturare.
   Sfaturi strategice:

• Dacă faza gratuită este utilizată în principal pentru compresie și reducerea greutății, puteți începe doar cu compresia, iar apoi să activați conversia atunci când sunteți sigur că structura site-ului dvs. este stabilă și că aveți nevoie cu adevărat de next-gen.

4. Recomandarea sub-scenarului: cum să alegeți diferite tipuri de situri

De asemenea, WordPress, site-urile de conținut, site-urile de comerț electronic, portofoliile și site-urile membrilor nu au aceleași “puncte de presiune” pentru imagini.

4.1 Site-uri/bloguri de conținut (multe articole grafice, frecvență medie a actualizărilor)

Recomandări prioritare:

1. Strategia de dimensionare (Etapa 1)
2. Compresie (etapa 2)
3. WebP (Pasul 3)

Un traseu mai potrivit:

• Doriți să salvați: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Dacă doriți să mergeți liber: Ruta A (Plus WebP + EWWW), dar este recomandat să începeți cu “modul conservator (fără ștergerea imaginii originale)” pentru a evalua riscul.

Groapă tipică:

• Prima imagine a paginii articolului este foarte mare, strategie improprie de încărcare leneșăÎncetinește primul ecran

4.2 Site de comerț electronic/produs (multe miniaturi, multe variante de imagine, stabilitate în primul rând)

E-commerce este cel mai probabil să fie problema nu este “efectul de compresie nu este bun”, dar “optimizat unele dintre dimensiunea nu este corect, lipsește miniaturi, componente frontale nu pot obține imaginea”.

Recomandări prioritare:

1. Stabilitatea înainte de toate: strategie de compresie conservatoare, nu înlocuiți imediat întreaga bibliotecă
2. Evaluarea dimensiunilor miniaturilor: temele de comerț electronic generează de obicei mai multe dimensiuni, iar cantitatea consumată este amplificată (ShortPixel/TinyPNG este deosebit de vizibil)
3. Efectuați validarea la scară mică înainte de lot (foarte important)

Un traseu mai potrivit:

• Ruta B tinde să fie mai lipsită de probleme: ShortPixel/Imagify/TinyPNG pot utiliza toate loturile și este esențial să înțelegeți mecanismul cotelor și să evaluați costurile în avans
• Ruta A este bună, dar fiți mai atenți la comportamentul Plus WebP de “suprascriere a ID-urilor/ștergere a imaginilor originale/înlocuire a URL-urilor”: este o migrare a activelor și nu este recomandat să înlocuiți totul de la bun început.

4.3 Portofoliu/stație fotografică (sensibil la calitatea unei singure imagini, imagini mari, cerințe ridicate privind vizualizarea)

Recomandări prioritare:

1. Strategia de dimensiune (controlul zonei de afișare)
2. Strategia de compresie (mai bine să fie mai mare decât să strivească detaliile)
3. WebP/AVIF (câștigurile scenei mari sunt evidente, dar verificați vizualizarea)

Un traseu mai potrivit:

• Imagificați: Deduceți cota în funcție de “dimensiunea imaginii originale”, acest tip de site este mai ușor de făcut “controlabil de buget” (știți cât să deduceți pentru fiecare imagine mare), dar evitați represiunile repetate.
• Pixel scurt: Dacă dimensiunea miniaturii nu este mare, creditele sunt, de asemenea, foarte intuitive; dar dacă generați multe dimensiuni +next-gen, consumul de credite va fi amplificat și trebuie să vă planificați din timp.

5. Comparația dintre cote și facturare: punerea în perspectivă a afirmației “gratuit nu este suficient”

Care este cea mai bună afacere și cât timp va dura gratuitatea?

5.1 Trei modele de rambursare a debitului

• Pixel scurt(credite): Credite bazate pe “imaginea originală + numărul de miniaturi”; credite suplimentare vor fi deduse pentru fiecare versiune corespunzătoare de WebP/AVIF generată.
• Imagificați(cota MB): Deduceți cota în funcție de “dimensiunea fișierului original”; cu cât sunt mai multe miniaturi, cu atât sunt mai multe deduceri; repressarea va deduce din nou.
• TinyPNG(credite): 500 de credite pe lună; activarea conversiei WebP/AVIF deduce credite suplimentare pentru fiecare dimensiune a imaginii.

5.2 Metode de estimare rapidă

Îl puteți estima astfel:

1. Găsiți aleatoriu o “imagine originală pe care o încărcați adesea” și vedeți cât de mare este (de exemplu, 300KB / 1MB / 3MB).
2. În funcție de numărul de dimensiuni ale miniaturilor generate de site-ul dvs. (de exemplu, 5 / 10 / 20)
3. Decideți dacă doriți să generați WebP/AVIF (da/nu)

Apoi folosiți următoarea “matematică mentală” pentru a înțelege consumul:

• Pixel scurt: ≈ (1 + numărul de miniaturi) credite pentru fiecare imagine; dacă se generează WebP/AVIF, ≈ se dublează din nou (deoarece versiunea next-gen ia și credite)
• Imagificați: Fiecare imagine ≈ (dimensiunea originală + dimensiunea fiecărei miniaturi) scade cota; schimbarea nivelului de compresie și recomprimarea vor scădea din nou.
• TinyPNG: 500 de credite gratuite; dacă site-ul dvs. generează o mulțime de dimensiuni pentru fiecare imagine, iar conversia este activată, numărul de credite gratuite scade semnificativ (pagina pluginului oferă o așteptare vizuală de “~100 credite/lună” vs. “~50 credite/lună”)

6. Alerte de risc

Riscul 1: Nu lăsați mai multe pluginuri să facă același lucru din nou și din nou

Este cea mai frecventă “sursă de dezastru”.”

• Ruta A:Plus WebP sau AVIF + EWWW(Împărțiți munca între cele două, nu efectuați conversii și livrări similare în același timp sau instalați doar una dintre ele)
• Ruta B: ShortPixel / Imagify / TinyPNG alegeți trei(alegeți una pentru compresie și next-gen)

Riscul 2: “Suprascrierea ID-ului / Ștergerea imaginii originale / Înlocuirea URL-ului” din Plus WebP este o migrare a activelor.

Subliniere adăugată:Plus WebP Descrierea afirmă în mod clar că generarea completă suprascrie ID-ul imaginii originale, șterge fișierul original și înlocuiește URL-ul conținutului.
Aceasta înseamnă că nu este vorba de o “mică sumă care poate fi retrasă oricând”, ci de o schimbare la nivel de active.

Strategia propusă ar trebui să fie:

• Mai întâi teste mici (de la câteva zeci la câteva sute)
• Confirmați că afișarea frontală, miniaturile și actualizările cache-ului funcționează corect
• Reconsiderarea prelucrării complete a bibliotecii

Riscul 3: Consumul real de “credite gratuite” de compresie în cloud depinde de numărul de miniaturi și de selecția next-gen.

• Pixel scurt: Miniaturile și next-gen afectează în mod semnificativ creditele.
• TinyPNG: Activarea WebP/AVIF deduce un credit suplimentar pentru fiecare dimensiune a imaginii.
• Imagificați: dedus în funcție de dimensiunea imaginii originale, mai multe miniaturi deduse mai mult, presiunea grea va repeta deducerea!

Riscul 4: “WebP/AVIF generat” nu înseamnă “WebP/AVIF este livrat de front office”

Mulți oameni simt că “nu este mai rapid” după conversie, deoarece frontend-ul încă produce JPG/PNG (cachingul/redactarea/ etichetarea/ negocierea browser-ului nu sunt la locul potrivit).

7. Cum se verifică dacă aceasta a intrat în vigoare după ce a fost făcută

4 puncte de validare foarte simple:

1. Dacă aceeași pagină este reîmprospătată a doua oară și se încarcă mai constant și mai rapid(Caching și optimizarea sensului fizic al funcționării)
2. Dimensiunile imaginilor încărcate pe telefoanele mobile și pe desktop-uri sunt semnificativ diferite(receptiv) srcset/sizes (indiferent dacă funcționează sau nu)
3. Verificarea punctuală a câtorva imagini: dacă sunt prezente fișiere/resurse WebP sau AVIF(Site-ul folosește de fapt next-gen）
4. Eșantionați câteva imagini: măriți pentru a vedea dacă sunt vizibil înnămolite, dacă textul este neclar(masa comprimată nu este excesivă)

Dacă toate cele patru se potrivesc, traseul pe care l-ați ales a fost parcurs. Urmează. CDN “Strat de livrare”, ansamblul va fi mai stabil.

8. Recomandări pentru acțiune

1. Alege-ți mai întâi traseul:

• Încerc să fiu cât mai liber posibil.: Plus WebP sau AVIF + EWWW (sau doar unul dintre ele)
• Doriți să economisiți resursele serverului, plătiți pe credit pentru mai multă liniște: ShortPixel / Imagify / TinyPNG - alegeți unul!

2. Faceți mai întâi un mic test (câteva zeci)
3. Asigurați-vă că este în regulă înainte de lot
4. Sunt necesare îmbunătățiri suplimentare în ceea ce privește stabilitatea livrării:citiți CDN Accelerare

probleme comune

1. Câte plug-in-uri trebuie să instalez? Le pot instala pe toate?

Încercați să urmați un singur traseu.

• Ruta A: Plus WebP sau AVIF + EWWW Image Optimizer (sau doar unul dintre ele)
• Ruta B: ShortPixel / Imagify / TinyPNG - alegeți una!
  În aceeași stație, în același timp, lăsați mai mult de un plug-in să facă “compresie / transfer WebP / AVIF / schimbare URL / rescriere de livrare”, cel mai probabil pentru a obține mai mult și mai haotic, dar, de asemenea, cel mai dificil de verificat.

2. WordPress nu acceptă deja WebP/AVIF? Mai am nevoie de un plugin?

Trebuie să fie separate:
“Suport pentru încărcare/utilizare” ≠ “Conversie automată/livrare automată”.
WordPress 6.5, de asemenea, nu convertește automat pe lot vechile JPG/PNG în WebP/AVIF și nici nu face automat întregul lucru “export AVIF/WebP către browser capabil și fallback” pentru dvs. De obicei, este nevoie de un plugin sau serviciu pentru a face biblioteca media istorică să funcționeze.

3. Care este cel mai “răsplătitor” pas în optimizarea imaginii?

Este de obicei Obțineți mai întâi “dimensiunile” corecte (srcset/sizes).。
Multe site-uri sunt lente nu pentru că nu au compresie, ci pentru că pagina are doar 900px și utilizatorului i se cere să descarce o imagine de 3000px. Compresia economisește KB, dar “dimensiunea greșită” vă va face să descărcați de câteva ori mai multe date pentru nimic.

4. Cum pot fi sigur că încarc “cea mai mică” și nu imaginea originală pentru totdeauna?

Uitați-vă la două fenomene:

• Atunci când deschideți o pagină pe un telefon mobil, dimensiunea imaginii descărcate este considerabil mai mică decât pe desktop
• Aceeași imagine se încarcă cu dimensiuni diferite ale resurselor pe dispozitive diferite
  Dacă imaginea originală este descărcată pentru totdeauna, un motiv comun este că tema/constructorul tratează imaginea ca o imagine de fundal CSS sau o ieșire personalizată, ocolind dimensiunile multiple ale bibliotecii media cu srcset.

5. “WebP/AVIF generat” înseamnă că frontend-ul trebuie să producă WebP/AVIF?

Nu sunt egale.
Generarea este doar “stratul de fișier” realizat; dacă frontend-ul furnizează de fapt WebP/AVIF depinde de rescrieri, de politicile de etichetare a imaginilor, de accesările din cache, de negocierea browserului în vigoare și așa mai departe. Când ați terminat, asigurați-vă că “verificați la fața locului câteva imagini pentru tipurile de resurse”.

6. Plus Ce este atât de periculos în legătură cu WebP sau AVIF? Pot rula întreaga bibliotecă cu un singur clic?

Punctul său de risc nu este “compresia”, ciModificări ale nivelurilor de migrare a activelor：

• Generarea completă poate suprascrie ID-ul fișierului imagine original, poate șterge fișierul original și poate înlocui URL-ul în conținut.
  motivul pentru careNu este recomandat să înlocuiți imediat întreaga bibliotecă: Testați la scară mică (de la zeci la sute) + dispuneți de copii de rezervă înainte de a lua în considerare procesarea întregii biblioteci.

7. Care este alegerea între cele două moduri ale Plus WebP: păstrarea imaginii originale vs. înlocuirea și ștergerea imaginii originale?

Simplu de înțeles:

• Modul 1: Păstrați imaginea originală + generați o copie WebP/AVIF (mai stabilă): Convenabil pentru rollback-uri, dar discul crește (imaginea originală + noul format + miniaturi de dimensiuni multiple).
• Modul 2: Înlocuiți și ștergeți imaginea originală (mai agresiv): Discurile sunt mai puțin predispuse la bloat, dar “schimbați activele + schimbați referințele”, ceea ce face mai costisitoare depanarea problemelor de compatibilitate.
  Cu cât site-ul este mai complex (e-commerce/multi-plugin/multi-size), cu atât este mai recomandat să începeți cu un model mai stabil.

8. Este suficientă compresia locală gratuită EWWW Image Optimizer? Va copleși serverul?

EWWW este mai degrabă un “compresor local”: consumă CPU/IO.
Este obișnuit ca încărcarea să crească în timpul optimizării loturilor, ceea ce nu înseamnă că “nu funcționează”, ci mai degrabă că strategia ar trebui să fie corectă: loturi, vârfuri scăzute și opțiuni de descărcare/cloud dacă este necesar.
Dacă doriți să economisiți sau dacă sunteți în criză de resurse pentru server, ruta B este mai prietenoasă cu serverul.

9. Cele 100 de credite gratuite/lună de la ShortPixel, de ce am impresia că au dispărut în câteva poze?

din cauza creditele nu sunt “numărul de imagini”.”Genul următor va fi mărit de o miniatură cu genul următor:

• Imaginea originală + fiecare miniatură contează ca credit
• Dacă este generat un WebP/AVIF, se consumă un credit suplimentar pentru fiecare versiune corespunzătoare.
  Deci, ceea ce credeți că este “1 imagine” poate consuma de fapt aproape “credite cu 2 cifre”. shortPixel

10. Imagify gratuit 20MB/lună, de ce se termină și el rapid?

Imagify este mai mult ca un “pachet de trafic”:

• Așa cum ați trimis-o.Dimensiunea fișierului originaldeducerea cotelor
• Cu cât aveți mai multe miniaturi, cu atât consumați mai mult
• Schimbarea nivelului de compresie pentru reoptimizare va consuma din nou cota
• Aceeași cheie API pentru mai multe site-uri, partajarea cotelor
  Deci, “20MB se va epuiza în curând” este adesea cauzată de imagini prea mari, prea multe miniaturi sau încercări și erori repetate.

11. TinyPNG este gratuit pentru 500 credite/lună, de ce pluginul spune că este vorba doar de 100 credite/lună și apoi 50 credite/lună cu WebP/AVIF?

Deoarece creditele TinyPNG sunt de asemenea mărite de “size/variant”:

• O instalare WordPress obișnuită comprimă probabil aproximativ 100 de foi/lună.
• Activați conversia AVIF sau WebP:Fiecare dimensiune a imaginii consumă un credit suplimentarDeci, probabil că puteți comprima și converti doar aproximativ 50 de imagini/lună (în funcție de numărul de dimensiuni ale miniaturilor).
  Deci 500 de credite ≠ 500 de imagini.

12. Câte miniaturi sunt pe site-ul meu? De ce contează atât de mult?

WordPress generează mai multe dimensiuni pentru încărcarea unei imagini; temele/plugin-urile (în special e-commerce) pot adăuga mai multe dimensiuni.
Creditele/cotele de compresie în cloud sunt de obicei “original + miniaturi împreună”, deci cu cât aveți mai multe miniaturi, cu atât mai puține credite gratuite trebuie să utilizați.

13. Încărcarea leneșă este întotdeauna mai rapidă? De ce spun unii oameni că încărcarea leneșă încetinește lucrurile?

Încărcarea leneșă este potrivită pentru “resursele din afara ecranului”.
Dacă primul ecran al celei mai critice imagini mari este, de asemenea, încărcat cu întârziere, poate încetini experiența primului ecran. WordPress 5.5 deoarece încărcarea leneșă implicită este bună, dar nu “o mărime se potrivește tuturor”.

14. Călătoresc pe ruta A sau B. Când am nevoie de CDN / Picture CDN?

Compresia, dimensionarea și formatarea rezolvă problema “fișierelor mai mici care se potrivesc”;
CDN rezolvă problema de a oferi mai aproape și mai stabil。
Atunci când imaginile sunt extrase de la o distanță de site-ul sursă, ceea ce duce la o latență semnificativă, atunci suplimentarea CDN/imagini cu CDN (de exemplu, Cloudflare Polish / Jetpack Site Accelerator) va fi mai stabilă în general, citiți Accelerare WordPress CDN。

15. Care este cel mai simplu mod de a verifica dacă “funcționează cu adevărat” atunci când am terminat?

Cea mai eficientă metodă de verificare din punct de vedere al timpului:

• Dacă aceeași pagină este reîmprospătată a doua oară și se încarcă mai constant și mai rapid
• Sunt dimensiunile imaginilor încărcate pe telefoanele mobile și pe desktop-uri sensibil diferite (intervine srcset/sizes)
• Verificarea punctuală a câtorva imagini: dacă sunt prezente fișiere/resurse WebP sau AVIF
• Eșantionați câteva imagini: măriți pentru a vedea dacă sunt vizibil înnămolite, dacă textul este neclar