Vietnes attēlu optimizācija

Attēlu optimizācija ir viens no “atalgojošākajiem” WordPress veiktspējas aspektiem: ja vien lapas struktūra un tēma ir pareiza un attēla izmērs, izmēri, formatējums un piegāde ir pareiza, ielādes pieredze uzreiz uzlabojas.

Taču attēlu optimizācija ir arī visvieglākais veids, kā radīt haosu, nevis tāpēc, ka tas ir tehniski pārāk sarežģīti, bet gan tāpēc, ka informācija ir pārāk sadrumstalota:
Jūs lasīt dažus rakstus, zināt, ka “kompresija”, “WebP/AVIF”, “slinks iekraušanas”, un pēc tam apskatīt spraudņa ievads un teica “bezmaksas katru mēnesi! 100 kredīti mēnesī”, “Bezmaksas 20MB”, “1 kredīts par attēlu”, bet jo vairāk es lasu, jo vairāk es apjukstu... Vai bezmaksas ir pietiekami? Kā atskaitīt maksu? Vai jūs nepareizi sapratāt “tas pats”? Un vissvarīgākais:Vai tas patiešām stājās spēkā pēc tam, kad to izdarījāt, vai nē?

Šajā rakstā ir tikai trīs lietas:

1. Sniedz izpildāmo failuceļvedis (arī attēls)(Ko darīt vispirms, ko darīt pēc tam)
2. Skaidri noskaidrojiet, kādu iespēju izvēlaties (kāda ir atšķirība starp bezmaksas/apmaksāto un kam katra no tām ir piemērota).
3. Uzrakstiet visbiežāk sastopamās kļūdas jau iepriekš (lai pēc tam, kad būsiet pabeidzis darbu, jums nebūtu jāmeklē, kur novērst problēmas).

1. Kopsavilkums: ar ko ir un ar ko nav aprīkots WordPress

Ja vispirms neizpēta, ko WordPress kodols jau dara, ir viegli izdarīt vienu no divām lietām:

• Tā vietā, lai izmantotu “brīvo jaudu”, kas jums būtu jāizmanto, jūs tērējat laiku vai maksājat naudu, lai atkal un atkal veidotu ratu.
• Es domāju, ka WordPress “automātiski konvertēs visus vecos attēlus uz WebP/AVIF”, bet izrādās, ka tā nav!

WordPress kodolā ir iebūvētas šīs galvenās iespējas:

• Responsīvi attēli (srcset/sizes): Sākot ar WordPress 4.4, kodols izvadīs attēlus, kas paredzēti srcset 与 sizesun izmanto augšupielādes laikā ģenerētos vairāku izmēru attēlus, lai pārlūkprogramma varētu izvēlēties piemērotāku resursu ielādei atkarībā no ekrāna apstākļiem.
• Vietējā slinkā iekraušana: WordPress 5.5 un jaunākās versijas pēc noklusējuma nodrošina attēlu slinkumu ielādi, izmantojot HTML standartus. loading atribūta īstenošana.
• WebP augšupielādes atbalsts: Kopš WordPress 5.8 versijas varat augšupielādēt un izmantot WebP kā JPEG/PNG (ar nosacījumu, ka jūsu hostinga vide atbalsta WebP).
• Atbalsts AVIF augšupielādei: Kopš WordPress 6.5 versijas varat augšupielādēt un izmantot AVIF kā JPEG/PNG (atkarīgs arī no hostinga atbalsta).

Taču pievērsiet uzmanību:
“Atbalsts augšupielādei/izmantošanai” ≠ “Automātiska konvertēšana/automātiska piegāde”.
Tas nozīmē, ka pat tad, ja jau izmantojat WP 6.5, šie JPG/PNG jūsu multivides bibliotēkā paši par sevi nepārvērsīsies WebP/AVIF; jūs automātiski nesaņemsiet pilnu saiti “izvadīt AVIF/WebP atbilstoši pārlūkprogrammas iespējām un neatbalstītu pārlūkprogrammu gadījumā izmantot oriģinālo attēlu”! --Šī daļa parasti ir jālabo ar spraudņa vai pakalpojuma palīdzību.

2. Ceļvedis: attēla optimizācija 5 posmos

Ko darīt, kāpēc, ko darīt, lai kvalificētos, un kāda ir tipiska bedre.

2.1. Vispirms pareizi noteikt “izmēru” (visvairāk piemirstais, bet visiepriecinošākais)

Daudzas stacijas ir lēnas nevis tāpēc, ka nav veikta saspiešana, bet gan tāpēc, kaLejupielādēts liels attēls, kas sniedzas daudz tālāk par displeja apgabalu：
Piemēram, ja lapa patiesībā ir tikai 900px plata un jūs lūdzat apmeklētājam lejupielādēt oriģinālo 3000px attēlu, pārlūkprogramma to vienkārši “lejupielādē un pēc tam samazina”. Tas izšķērdē joslas platumu, palielina dekodēšanas laiku un palēnina pirmā ekrāna darbību.

WordPress 4.4+Reaģējošs attēlu mehānisms（srcset/sizes) ir izstrādāts, lai risinātu tieši šo problēmu.

Veiciet to, kas tiek uzskatīts par caurlaidi:

• Atverot lapu mobilajā tālrunī, lejupielādētā attēla izmēram jābūt ievērojami mazākam nekā darbvirsmā.
• Tas pats attēls dažādās ierīcēs tiek ielādēts ar dažādiem resursu izmēriem (tā vietā, lai vienmēr lejupielādētu oriģinālo attēlu).

Biežāk sastopamie mīnusi:

• Ir tēmas/būvētāji, kas diagrammas apstrādā kā CSS fona attēlus vai izvada tos pielāgotā veidā, kas var apiet fona attēlu. srcsetTā ir liela aina, kas arvien samazinās.
• Varat izmantot ārēji saistītus attēlu slāņus, trešo pušu attēlu blokus, kā arī apiet multivides bibliotēkas izveidoto daudzizmēru sistēmu.

---

2.2 Kompresija (samaziniet KB, bet nesamaziniet kvalitāti)

Kompresijas būtība ir nevis “jo mazāks, jo labāks”, bet “atšķirība ir tikko pamanāma ar neapbruņotu aci, bet apjoma samazinājums ir acīmredzams”.

Noteikumi ir šādi:

• Fotogrāfijas/spēles kadri (cilvēki, produkti, ainavas): Prioritārā kompresija ar zaudējumiem (maksimālais ieguvums)
• Interfeisa ekrānšāviņi / teksta attēli: Lai izvairītos no izplūduša teksta, saspiešana ir konservatīvāka.
• Logotips/ikona: Prioritāte SVG vai diskrēts bez zudumiem (zudumus ir viegli ielīmēt)

Veiciet to, kas tiek uzskatīts par caurlaidi:

• Ievērojams attēla izmēra samazinājums lielākajā daļā lappušu
• Nav redzama trokšņa, dubļainu malu, krāsu bloku pārrāvumu, neskaidra teksta.

---

2.3 WebP / AVIF (formāta stratēģija: mazāka, lai nodrošinātu vienādu izšķirtspēju)

WordPress jau atbalsta augšupielādi WebP (5,8) pret AVIF (6,5)。
Taču, lai nākamās paaudzes formāts patiešām darbotos, parasti ir jāatrisina divas lietas:

1. Kā veikt vēsturisko multivides bibliotēku partijas konvertēšanu(Pretējā gadījumā jūs optimizējat tikai “vēlāk augšupielādētiem jauniem attēliem”).
2. Vai ģenerēt kopiju vai aizstāt oriģinālo attēlu(Tas ir riskants ūdensgabals; mēs pievērsīsimies Plus WebP “Aizstāt un dzēst oriģinālo attēlu” vēlāk).

Ieteicamais rakstīšanas stils:

• WebP: parasti priekšroka tiek dota kā noklusējuma iestatījumam (stabilāka savietojamība).
• AVIF: vēl viens kompresijas virziens, kas piemērots lieliem attēliem/pirmā ekrāna lieliem attēliem/albuma attēliem (bet vairākAtkarība no vides atbalsta）

---

2.4 Lēna ielāde jāizmanto pareizi (nav universāla).

WordPress 5.5 un jaunākas versijasNoklusējuma slinka iekraušanaAttēls.
Tas samazina joslas platuma izmantošanu sākotnējā atveidošanas laikā:

• Lēna ielāde “ārpusekrāna resursiem”
• Kritiskākais lielais attēls pirmajā ekrānā (un daudzos gadījumos galvenais attēls pirmajā ekrānā) bieži vien nav piemērots novēlotai ielādei.

---

2.5 Piegādes slānis: CDN / Foto CDN

Saspiešana, izmēra noteikšana un formatēšana atrisina “mazāku un piemērotu failu” problēmu.
Tomēr, ja attēli vienmēr tiek ņemti no attāluma no avota, tīkla aizkavēšanās joprojām būtiski ietekmēs pieredzi. Šajā gadījumā tiek izmantots “piegādes slāņa” risinājums (CDN/attēls CDN).

Divi tipiski virzieni:

• Cloudflare Poļu valoda：Cloudflare dokumentācijaTiek ieviestas Polijas saspiešanas metodes (lossless/lossy/WebP), un ir minēts, ka saspiešana ar format=auto Ir atļauts WebP/AVIF formāts.
• Jetpack vietnes paātrinātājs：Jetpack dokumentācijaPaskaidrojiet, ka tas optimizēs attēlus un izplatīs tos savā tīklā kopā ar statiskajiem resursiem.

Attēlu optimizācija ir atbildīga par to, lai tie kļūtu mazāki un piemērotāki.CDN Atbildīgs par ciešāku un stabilāku

3. Atlase: tikai divi galvenie maršruti

Visbiežāk sastopamā kļūda attēlu optimizācijā ir nevis “nav spraudņu”, bet gan pārāk daudz spraudņu, kas izraisa dubultu apstrādi:
A saspiež, B saspiež, A konvertē uz WebP/AVIF, B konvertē, A maina URL, B pārraksta - jūs pat nevarat pateikt, kas notiek stacijā.

Noteikumi:

Ir tikai viens ceļš: vai nu visi trīs bezmaksas vietējie, vai mākoņa saspiešana.

• A maršruts (visi vietējie bezmaksas):Plus WebP vai AVIF + EWWWW attēlu optimizētājs(vai tikai viens)
• Maršruts B (mākoņu saspiešanas trīskāršais variants):ShortPixel / Imagify / TinyPNG

---

3.1 Maršruts A: Pilnīgi bezmaksas vietējais (plus WebP vai AVIF, vai EWWWW)

Šo maršrutu raksturo:

• Jūs nepaļaujaties uz trešo pušu kompresijas pakalpojumiem “par mēnesi/par lapu” (lai gan dažas funkcijas var tikt piedāvātas kā izvēles pakalpojumi).
• Izmaksas: CPU/IO sērijveida apstrādei var būt lielāks servera noslogojums, tāpēc jums ir jāpievērš lielāka uzmanība “stratēģijai un riskam”.”

3.1.1 Plus WebP vai AVIF: kodols ir “ģenerēt/aizstāt”, tas nav tradicionālais “saspiešanas rīks”.”

• Ģenerējot pilna apjoma attēlus:Sākotnējais attēla faila ID tiek pārrakstīts ar WebP/AVIF, sākotnējais fails tiek dzēsts, un saturā tiek aizstāts URL.。
• Spraudnis nodrošina WP-CLI komandas un atgādina: WP-CLI ir uzticamāks, ja ir daudz failu.

Tas nozīmē, ka tā vietā, lai “klusi ģenerētu jums WebP”, tas varētu būtAktīvu migrācija(Īpaši, ja ieslēdzat opciju “Aizstāt un dzēst oriģinālo attēlu”).

Atšķirības starp abiem modeļiem

1. režīms: saglabāt oriģinālo attēlu + ģenerēt WebP/AVIF kopiju (stabilāk)

• Priekšrocības: Vieglāk atgriezties atpakaļ, ja rodas savietojamības problēmas.
• Izmaksas: palielināsies diska izmantošana (oriģinālais attēls + jaunais formāts + vairāku izmēru sīktēli).

2. režīms: sākotnējā attēla aizstāšana un dzēšana (agresīvāks).

• Priekšrocības: diski neizplatās tik ātri; staciju atsauces tieši uz jauno formātu.
• Risks: jūs “maināt aktīvus + maināt atsauces”, kas sadārdzina savietojamības problēmu novēršanu (īpaši, ja dažas ārējās sistēmas vai tēmu loģika ir atkarīga no sākotnējā faila nosaukuma/ceļu/formāta).

Tipiski WebP vai AVIF trūkumi Plus WebP vai AVIF

1. Pēc visas bibliotēkas aizstāšanas daži lapu attēli tiek rādīti nepareizi.
   Parasti iemesls parasti nav tas, ka attēls ir “bojāts”, bet gan tas, ka kāds posms URL aizvietošanas, kešēšanas, miniatūru politikas u. c. ķēdē nav pareizs.
2. Jo lielāks miniatūru skaits, jo lielāks izmaiņu apjoms.
   WordPress ģenerē vairākus attēla augšupielādes izmērus; tēmas/plogi var pievienot arī citus izmērus. Pilnīga nomaiņa nozīmē, ka, iespējams, tiek mainīta ļoti liela failu kolekcija.
3. Veicot tikai formāta migrāciju, tas ne vienmēr nozīmē, ka sējums vienmēr ir mazākais.
   WebP/AVIF parasti ir mazāki, taču “izmēra stratēģija” un “saspiešanas stratēģija” joprojām ir ļoti svarīgas. Nedomājiet, ka Plus WebP ir “par vienu klikšķi ātrāks”.

---

3.1.2 EWWW attēlu optimizētājs: brīvas vietējās kompresijas pārstāvis

EWWW spraudņa lapa ir ļoti labi izvietota:

• To var optimizēt serverī, izmantojot dažādus rīkus (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp u.c.).
• Ja nepieciešama lielāka saspiešana vai lielāks CPU ietaupījums, CPU patērējošo apstrādi var arī novirzīt uz serveri (pēc izvēles).

Kāda loma A maršrutā būtu jāuzņemas EWWW?

Ja lietojat Plus WebP kā “formāta migrācijas/aizstāšanas stratēģiju”, tad EWWW ir piemērotāks:

• Kompresija un apjoma optimizācija(jo īpaši neapstrādātu resursu, piemēram, JPG/PNG, svara samazināšana).
• Vēsturiskās multivides bibliotēkas sērijveida optimizācija(mērķis ir “apjoma samazināšana”, nevis “URL aizstāšana”).

Tipiska EWWW bedre

1. Palielināta servera slodze partijas optimizācijas laikā
   Tā kā vietējā saspiešana apēd CPU/IO, risinājums nav “neizmantojiet to”, bet gan “partijas, zema maksimālā slodze, izkraušanas/apmaiņas iespēja, ja nepieciešams”.
2. “Tiek ģenerēts WebP” nenozīmē, ka frontendam ir jārada WebP.
   Daudzi spraudņi cieš no šī pārpratuma: ģenerēšana ir viena lieta, bet piegādes stratēģijas (pārrakstīšana, attēlu tagi, kešatmiņas trāpījumi utt.) ir cita lieta.
3. Vienas un tās pašas darbības veikšana atkal un atkal ar citiem spraudņiem
   Ja izvēlaties A veidu, mēģiniet nepārklāt ShortPixel/Imagify/TinyPNG veida mākoņa kompresiju; ja izvēlaties B veidu, neieslēdziet Plus WebP aizstāšanas loģiku. Pamatprincips:Viens ceļš līdz galam.

---

3.2. Maršruts B: mākoņu kompresijas trīskāršā izvēle (ShortPixel / Imagify / TinyPNG)

Šis ceļš ir piemērots cilvēkiem, kuri “vēlas ietaupīt servera resursus, vēlas veikt partijas ar mazāku piepūli un pieņemt rēķinu par kredītu/apjomu”.
Taču visvairāk maldinošais aspekts par mākoņu kompresiju ir šāds:Bezmaksas kredīti nav tik vienkārši kā “bezmaksas lapas”!.. Patēriņu var būtiski ietekmēt sīktēlu izmēru skaits, tas, vai tiek vai netiek ģenerēts WebP/AVIF un vai tas tiek vai netiek atkārtoti saspiests.

Turpmāk tiks paskaidrots: kas notiek ar bezmaksas/nodokļu sistēmu, kā tiek atskaitīti kredīti, uz kādām lamatām visdrīzāk var iekrist un kādi vietņu veidi ir piemēroti.

---

3.2.1 ShortPixel100 bezmaksas kredīti mēnesī, bet kredītus patērē miniatūras un WebP/AVIF palielinājumi.

Kas notiek ar bezmaksas/apmaksāto

ShortPixel spraudņa aprakstā skaidri norādīts:

• 100 bezmaksas kredīti mēnesī
• Ir arī “Papildu neierobežoti mēneša kredīti” (spraudņa lapā ir sniegta informācija par attiecīgajām cenām).
• Pieejami arī kā “vienreizējo kredītu komplekti, kuru derīguma termiņš nekad nebeidzas” (ar informāciju par sākuma cenu).

Padoms:

• Bezmaksas: piešķir noteiktu kredītu skaitu mēnesī vieglajām vietnēm vai testēšanai.
• Vienreizlietojamie iepakojumi: piemēroti vietnēm ar lielām multivides bibliotēkām, kas vēlas vienreiz atbrīvoties no krājumiem (iegādājieties vienreiz un izmantojiet, parasti to derīguma termiņš nebeidzas).
• Ikmēneša / neierobežots: piemērots vietnēm ar pastāvīgi atjauninātiem attēliem un ilgtermiņa stabilu optimizāciju.

ShortPixel oficiālajā KB ir sniegts arī atjauninājums par “Vienreizēja pakete vs neierobežots ikmēneša”.nepārprotams skaidrojums: Unlimited Monthly ir ikmēneša (vai gada) maksājums, kas piedāvā neierobežotu kredītu skaitu ar fiksētu CDN piešķīrumu; vienreizējie kredīti, kuru termiņš nebeidzas, sniedz jums lielāku iespēju tos izmantot pēc vajadzības.

Galvenais: kā tiek aprēķināti ShortPixel kredīti?

ShortPixel oficiālā dokumentācija KB bija ļoti tiešs:

• Kad augšupielādējat attēlu, WordPress ģenerē vairākas sīktēlus;
• Katra sīktēlu optimizācija tiek ieskaitīta kā kredītpunkts.；
• Ja izvēlaties ģenerēt WebP vai AVIF.Katra WebP/AVIF oriģinālā attēla un miniatūras versija patērē papildu kredītu.；
• Lai samazinātu kredītu patēriņu, varat no optimizācijas izslēgt noteiktas sīkbildes.

Kredīti Piemērs：

Pieņemsim, ka augšupielādējat 1 attēlu un tēma/plogins ģenerē 8 sīktēlus:

• Optimizēt tikai attēla oriģinālu + miniatūras: 1 (oriģināls) + 8 (miniatūras) = 9 kredītpunkti.
• Ja vēlaties ģenerēt arī WebP/AVIF: vēl viena nākamās paaudzes versija katrai no iepriekš minētajām 9 versijām → +9 kredīti.
  Citiem vārdiem sakot, tas, ko jūs uzskatāt par “1 attēlu”, patiesībā var patērēt gandrīz 2 ciparu kredītus.

Tātad:“Bezmaksas 100 kredīti” nav tas pats, kas “bezmaksas 100 attēli”.

ShortPixel biežāk sastopamie slazdi

1. Bezmaksas 100 kredīti beidzas ātri
   Pamatcēlonis: daudz sīktēlu + papildu kredīti par WebP/AVIF ģenerēšanu.
   ieteikums：

• Vispirms novērtējiet vietnes sīktēlu skaitu
• Izslēdziet nevajadzīgus sīktēlu izmērus (optimizējiet tikai tos izmērus, kas tiks izmantoti).
• Pirms masveida darbības nosakiet saspiešanas stratēģiju, lai izvairītos no atkārtota izmēģinājumu un kļūdu patēriņa.

2. Citu pārveidotāju spraudņu kraušana vienlaicīgi
   Ja ir Plus WebP aizstājēji un ShortPixel, kas ģenerē/ievieto nākamās paaudzes tagus, loģika sakrājas un kļūst grūtāk novērst problēmas. Izvēloties B maršrutu, ļaujiet ShortPixel to darīt vienai.
3. Es domāju, ka, ja es to instalētu, tas būtu “WebP/AVIF priekšplānā”.”
   ShortPixel spraudņa lapaMinēja, ka tā konvertē WebP/AVIF un var pievienot nākamās paaudzes attēlus sākumlapai (piemēram, ar marķēšanu).
   Tomēr ir svarīgi pārbaudīt rezultātus arī pēc tam.

---

3.2.2 ImagifyBezmaksas: 20MB/mēnesī; kvota tiek atskaitīta atbilstoši “oriģinālā attēla izmēram + miniatūru skaitam”, atkārtota atskaitīšana tiks veikta atkārtotas presēšanas gadījumā.

Bezmaksas summa un pozicionēšana

Imagify Oficiālā cenu lapaRaksts ir skaidrs:Bezmaksas konts Ikmēneša kvota 20MB。
Tā spraudņa lapā ir arī skaidri norādīts, ka tas var saspiest, mainīt izmēru un konvertēt WebP/AVIF.

Kā tiek atskaitīta kvota?

Imagify Oficiālā dokumentācija “Kā tiek aprēķināta kvotu izmantošana?” ļoti skaidri aprakstīts atskaitīšanas mehānisms:

• Miniatūru skaits ietekmē patēriņuPiemēram, ja jums ir 10 miniatūru izmēri, 1 attēla optimizēšana kļūst par 11 attēlu optimizēšanu (oriģināls + 10 miniatūras), kas visi palielina kvotas patēriņu.
• Kvotas atskaitīšana atkarībā no dokumenta oriģināla lieluma: Piemēram, ja uz Imagify nosūtāt 100 kB lielu attēlu, no kvotas tiks atskaitīti 100 kB.
• Mainot saspiešanas līmeni un atkārtoti optimizējot, atkal tiks patērēta kvota.。
• Vienu un to pašu API atslēgu var izmantot vairākās vietnēs, bet kvotas tiek sadalītas starp tām.

Tas ir Imagify “galvenais izpratnes veids”:
Tas drīzāk atgādina satiksmes paketi: tā atskaita tik daudz, cik nosūtāt; jo vairāk miniatūru jums ir, jo vairāk tiek atskaitīts; un, ja atkārtoti nospiežat to atkārtoti, atskaitījums tiek atkārtots.

Viegli lasāms Imagify kvotu piemērs

Pieņemsim, ka augšupielādējat oriģinālu 800 kB attēlu un vietne ģenerē 8 sīktēlus.

• Imagify optimizē, lai iekļautu “oriģinālo attēlu + 8 sīktēlus” (ja izvēlaties optimizēt visus), kas nozīmē, ka šī vienīgā darbība patērē kvotu, kas ir tuvu “visu šo failu sākotnējam lielumam kopā”.
  Tāpēc dažas vietnes uzskata, ka “20MB ātri izsīkst”: nav tā, ka Imagify nepietiek, bet gan tā, ka jūs augšupielādējat pārāk daudz attēlu vienlaikus, pārāk daudz sīktēlu un, iespējams, atkal un atkal izmēģināt saspiešanas līmeņus.

Imagify visbiežāk sastopamās kļūdas

1. Bezmaksas 20MB Nepietiek, lai veiktu “pilnu vietnes vēstures inventarizāciju”
   20MB parasti ir labāk piemērots testēšanai ar nelieliem atjauninājumiem; ja multivides bibliotēka jau ir liela, vienreizējai tīrīšanai, visticamāk, būs nepieciešams atjauninājums.
2. Atkārtota saspiešanas līmeņu pielāgošana rada kvotu patēriņa dublēšanos.
   Imagify skaidri norāda, kaAtkārtota optimizācija atkal patērēs kvotu.
   Es ierosinu skaidri formulēt “stratēģiju” šajā lapā:

• Sāciet ar nelielu skaitu attēlu, lai noteiktu saspiešanas līmeni un izskatu.
• Nosakiet stratēģiju un pēc tam palaidiet to masveidā.
  Izvairieties no atkārtotiem izmēģinājumiem un kļūdām ar pilnu bibliotēku.

3. Vairāku vietņu API atslēgas koplietošana izraisa “neizskaidrojamu kvotas samazinājumu”.”
   Ja vienu un to pašu API atslēgu izmantojat vairāk nekā vienai stacijai, kvota tiek dalīta.
   Tāpēc komandas/dažādu staciju scenārijos vislabāk ir skaidri noteikt, kuras stacijas ir koplietojamas un kuras tiek izmantotas individuāli, lai izvairītos no nekontrolējamiem budžetiem.

---

3.2.3 TinyPNG(Tiny Compress Images): bezmaksas 500 kredīti mēnesī; pārejot uz WebP/AVIF, “tiks atskaitīts 1 kredīts par katru izmēru”.”

Bezmaksas kredīti un to norēķinu idejas

TinyPNG WordPress spraudņa lapa ir ļoti skaidra:

• 500 kredīti mēnesī bez maksas
• sadaļā “Vispārējā WordPress instalēšana”, iespējams, varat saspiest Aptuveni 100 attēlu mēnesī
• Tomēr, ja ir iespējota AVIF vai WebP konvertēšana:Katrs attēla izmērs patērē papildu kredītuTātad, domājams, to var tikai saspiest un konvertēt. Aptuveni 50 attēli mēnesī(atkarībā no tā, cik liela izmēra sīkbildes jums ir pieejamas).

Tikmēr Tinify (TinyPNG/TinyJPG izstrādātāji) arī ir veikuši savu API cenu lapaApraksts: Reģistrējieties un saņemiet 500 bezmaksas kompresijas mēnesī; pēc tam jums tiks izrakstīts rēķins par veiksmīgu kompresiju skaitu, bez obligātas abonēšanas.

Apkopojiet TinyPNG izpratni vienā teikumā:
Tas skaita kredītpunktus; jo vairāk miniatūru izmēru un jo vairāk WebP/AVIF ir ieslēgts, jo ātrāk tiek patērēti kredītpunkti.

Viegli lasāmi TinyPNG kredītu piemēri

Pieņemsim, ka jūsu vietne katram attēlam ģenerē 8 miniatūru izmērus:

• Tikai saspiešana: oriģināls + 8 sīkbildes → nepieciešami 9 kredīti
• Ja ir ieslēgta WebP/AVIF konvertēšana: viens papildu kredītpunkts par katru izmēru → iespējams, gandrīz dubultā!
  Tas atbilst aprakstam spraudņa lapā: pēc ieslēgšanas bezmaksas daudzums mainās no aptuveni “100 kartes mēnesī” uz “50 kartes mēnesī”.

TinyPNG visbiežāk sastopamās nepilnības

1. Domāja, ka 500 kredīti = 500 attēli
   Tas tā nav. To patērē “attēla izmērs/variants”. Iespraudņa lapā ir skaidri norādīts, ka “Konvertācijas atskaita papildu 1 kredītu par katru attēla izmēru”.
2. Tēmas / e-komercijas spraudņi rada pārāk daudz izmēru, un bezmaksas kredīti ievērojami samazinās
   Jo vairāk izmēru, jo vieglāk ir palielināt un patērēt kredītus.
3. Pēc konversijas aktivizēšanas jūs konstatējat, ka kredīti pēkšņi nav izmantoti.
   Tā nav kļūda, tas ir norēķinu mehānisms.
   Stratēģijas ieteikumi:

• Ja bezmaksas fāze galvenokārt tiek izmantota saspiešanai un svara samazināšanai, varat sākt tikai ar saspiešanu un pēc tam ieslēgt konvertēšanu, kad esat pārliecināts, ka jūsu vietnes struktūra ir stabila un jums patiešām nepieciešama nākamās paaudzes versija.

4. Ieteikumi par apakšscenārijiem: kā izvēlēties dažādus objektu veidus

Arī WordPress, satura vietnēm, e-komercijas vietnēm, portfolio vietnēm un dalības vietnēm nav tādu pašu “spiediena punktu” attiecībā uz attēliem.

4.1 Satura vietnes/blogi (daudz rakstu grafikas, vidējs atjauninājumu biežums)

Prioritārie ieteikumi:

1. Izmēra noteikšanas stratēģija (1. solis)
2. Kompresija (2. posms)
3. WebP (3. posms)

Piemērotāks maršruts:

• Vēlaties, lai saglabātu: B maršruta trīskāršā izvēle (ShortPixel / Imagify / TinyPNG)
• Ja vēlaties izmantot bezmaksas: A maršruts (Plus WebP + EWWW), bet ieteicams sākt ar “konservatīvo režīmu (neizdzēšot sākotnējo attēlu)”, lai novērtētu risku.

Tipiska bedre:

• Pirmais raksta lapas attēls ir ļoti liels, nepareiza slinkuma ielādes stratēģija.Palēnina pirmā ekrāna darbību

4.2 E-komercijas/produktu vietne (daudz sīktēlu, daudz attēlu variantu, stabilitāte pirmajā vietā)

E-komercija, visticamāk, ir problēma nav “saspiešanas efekts nav labs”, bet “optimizēts daži izmēri nav pareizi, trūkst sīktēlu, priekšējie komponenti nevar iegūt attēlu”.

Prioritārie ieteikumi:

1. Vispirms stabilitāte: konservatīva saspiešanas stratēģija, neveiciet pilnu bibliotēkas nomaiņu uzreiz.
2. Miniatūru izmēru novērtēšana: e-komercijas tēmas parasti ģenerē vairāk izmēru, un patēriņa apjoms ir palielināts (īpaši jūtams ir ShortPixel/TinyPNG).
3. Veiciet neliela mēroga validāciju pirms partijas (ļoti svarīgi).

Piemērotāks maršruts:

• Maršruts B parasti ir vieglāk veicams: ShortPixel/Imagify/TinyPNG var izmantot partijas, un ir ļoti svarīgi, lai jūs saprastu kvotu mehānismu un iepriekš novērtētu izmaksas.
• Maršruts A ir labs, bet esiet uzmanīgāki ar Plus WebP “pārrakstīt ID/izdzēst oriģinālos attēlus/aizstāt URL”: tā ir aktīvu migrācija, un nav ieteicams aizstāt visu uzreiz.

4.3 Portfolio/fotogrāfijas stacija (jutīga pret atsevišķu attēlu kvalitāti, lieli attēli, augstas prasības attiecībā uz skatīšanu)

Prioritārie ieteikumi:

1. Izmēra stratēģija (displeja zonas kontrole)
2. Saspiešanas stratēģija (labāk būt lielākam, nekā sadrupināt detaļas)
3. WebP/AVIF (liela attēla ainas ieguvumi ir acīmredzami, bet pārbaudiet skatu)

Piemērotāks maršruts:

• Imagify: Atskaitiet kvotu atbilstoši “sākotnējā attēla izmēram”, šāda veida vietni ir vieglāk veikt “budžeta kontrolējamu” (jūs zināt, cik daudz atskaitīt par katru lielu attēlu), bet izvairieties no atkārtotas represijas.
• ShortPixel: Ja miniatūras izmērs nav liels, arī kredīti ir ļoti intuitīvi, bet, ja ģenerējat daudz izmēru +next-gen, kredītu patēriņš palielināsies, un jums ir jāplāno uz priekšu.

5. Kvotu un rēķinu salīdzinājums: “bezmaksas nav pietiekami” perspektīvā

Kurš no tiem ir izdevīgāks un cik ilgi būs pieejams bez maksas?

5.1 Trīs maksas atmaksas modeļi

• ShortPixel(kredīti): Kredīti, pamatojoties uz “oriģinālā attēla + sīktēlu skaitu”; papildu kredīti tiks atskaitīti par katru atbilstošo WebP/AVIF versiju.
• Imagify(MB kvota): Atņemiet kvotu atbilstoši “sākotnējam faila izmēram”; jo vairāk miniatūru, jo vairāk atskaitījumu; atkārtoti nospiežot, atkal tiks atskaitīts.
• TinyPNG(kredīti): 500 kredīti mēnesī; WebP/AVIF konversijas ieslēgšana samazina papildu kredītus par katru attēla izmēru.

5.2 Ātrās novērtēšanas metodes

To var aprēķināt šādi:

1. Atrodiet nejauši atlasītu “oriģinālo attēlu, ko bieži augšupielādējat”, un apskatiet, cik liels tas ir (piemēram, 300KB / 1MB / 3MB).
2. Atkarībā no tā, cik lielus sīkbildes ģenerē jūsu vietne (piemēram, 5 / 10 / 20).
3. Izlemiet, vai vēlaties ģenerēt WebP/AVIF (jā/nē)

Tad, lai saprastu patēriņu, izmantojiet šādu “prāta matemātiku”:

• ShortPixel: ≈ (1 + miniatūru skaits) kredītu par attēlu; ja tiek ģenerēts WebP/AVIF, ≈ atkal dubultojas (jo nākamās paaudzes versija arī ņem kredītu).
• Imagify: katrs attēls ≈ (oriģinālais izmērs + katra miniatūras izmērs) atskaita kvotu; mainot saspiešanas līmeni un atkārtoti saspiežot, atkal atskaita kvotu!
• TinyPNG: 500 kredīti bez maksas; ja jūsu vietne ģenerē daudz izmēru uz attēlu un ir iespējota konvertēšana, bezmaksas kredītu skaits ievērojami samazinās (spraudņa lapā ir vizuāli redzams “~100 kredīti/mēnesī” pret “~50 kredīti/mēnesī”).

6. Riska brīdinājumi

1. risks: neļaujiet vairākiem spraudņiem atkal un atkal darīt vienu un to pašu.

Tas ir visbiežāk sastopamais “katastrofas avots”.”

• A maršruts:Plus WebP vai AVIF + EWWWW(Sadaliet darbu starp abiem, neveiciet līdzīgas konversijas un piegādes vienlaicīgi vai instalējiet tikai vienu no tiem.)
• Maršruts B: ShortPixel / Imagify / TinyPNG izvēlēties trīs(izvēlieties vienu no kompresijas un nākamās paaudzes ierīcēm)

2. risks: Plus WebP “Pārrakstīt ID / dzēst oriģinālo attēlu / aizstāt URL” ir aktīvu migrācija.

Uzsvērums pievienots:Plus WebP Aprakstā skaidri norādīts, ka pilnīga ģenerēšana pārraksta sākotnējā attēla ID, dzēš sākotnējo failu un aizstāj satura URL.
Tas nozīmē, ka tas nav “neliels iestatījums, ko var atcelt jebkurā laikā”, bet gan aktīvu līmeņa izmaiņas.

Ierosinātajai stratēģijai vajadzētu būt šādai:

• Vispirms neliels tests (daži desmiti līdz daži simti).
• Pārliecinieties, ka frontend displejs, sīktēli un kešatmiņas atjauninājumi darbojas pareizi.
• Pārdomāt pilnu bibliotēkas apstrādi

3. risks: reālais mākoņu kompresijas “bezmaksas kredītu” patēriņš ir atkarīgs no sīktēlu skaita un nākamās paaudzes atlases.

• ShortPixel: Miniatūras un nākamās paaudzes ievērojami ietekmē kredītpunktus.
• TinyPNG: Ieslēdzot WebP/AVIF, par katru attēla izmēru tiek atskaitīts papildu kredīts.
• Imagify: atskaitīts atbilstoši sākotnējā attēla izmēram, jo vairāk miniatūras atskaitīts vairāk, smags spiediens atkārtos atskaitījumu!

4. risks: “WebP/AVIF ģenerēts” nenozīmē, ka “WebP/AVIF tiek piegādāts no operatora”.”

Daudzi cilvēki pēc konvertēšanas jūtas “ne ātrāk”, jo frontend joprojām izvada JPG/PNG (kešēšana/pārrakstīšana/marķēšana/pārlūka sarunas nav pareizajā vietā).

7. Kā pārbaudīt, vai tas ir stājies spēkā pēc tam, kad tas ir izdarīts?

4 ļoti vienkārši validācijas punkti:

1. Vai tā pati lapa tiek atsvaidzināta otrreiz un ielādēta vienmērīgāk un ātrāk.(Kešēšana un optimizēšana fiziskā nozīmē, vai tas darbojas)
2. Vai mobilajos tālruņos un galddatoros ielādēto attēlu izmēri būtiski atšķiras?(atsaucīgi) srcset/sizes (neatkarīgi no tā, vai tie darbojas vai ne)
3. Pārbaudiet dažus attēlus: vai ir WebP vai AVIF faili/resursi.(Vai vietne faktiski izmanto nākamās paaudzes）
4. Pārbaudiet dažus attēlus: palieliniet attēlu, lai redzētu, vai tie ir redzami dubļaini, vai teksts ir izplūdis.(saspiestā masa nav pārmērīga)

Ja visi četri no šiem punktiem sakrīt, jūsu izvēlētais maršruts ir veikts. Nākamais. CDN “Piegādes slānis”, kopējais rādītājs būs stabilāks.

8. Ieteikumi rīcībai

1. Vispirms izvēlieties maršrutu:

• Cenšamies būt pēc iespējas brīvāki.: Plus WebP vai AVIF + EWWWW (vai tikai viens no tiem)
• Vēlaties ietaupīt servera resursus, maksājiet par kredītu, lai būtu mierīgāks prāts: ShortPixel / Imagify / TinyPNG - izvēlieties vienu!

2. Vispirms veiciet nelielu testu (daži desmiti).
3. Pirms partijas izveides pārliecinieties, vai viss ir kārtībā.
4. Ir vajadzīgi turpmāki piegādes stabilitātes uzlabojumi:lasīt CDN Paātrinājums

bieži sastopamās problēmas

1. Cik daudz spraudņu ir jāinstalē? Vai es varu tos visus instalēt?

Mēģiniet izvēlēties tikai vienu maršrutu.

• Maršruts A: Plus WebP vai AVIF + EWWWW Image Optimizer (vai tikai viens no tiem)
• Maršruts B: ShortPixel / Imagify / TinyPNG - izvēlieties vienu!
  Tajā pašā stacijā vienlaicīgi ļaujiet vairāk nekā vienam spraudnim veikt “saspiešanu / pārsūtīšanu WebP / AVIF / mainīt URL / piegādes pārrakstīšanu”, visticamāk, lai iegūtu vairāk un vairāk haotisku, bet arī visgrūtāk pārbaudīt.

2. Vai WordPress jau neatbalsta WebP/AVIF? Vai man joprojām ir nepieciešams spraudnis?

Tas ir jānodala:
“Atbalsts augšupielādei/izmantošanai” ≠ “Automātiska konvertēšana/automātiska piegāde”.
WordPress 6.5 arī automātiski nekonvertē vecos JPG/PNG failus uz WebP/AVIF, kā arī automātiski neveic visu “eksportēt AVIF/WebP uz pārlūkprogrammu un rezerves variantu”. Lai vēsturiskā multivides bibliotēka darbotos, parasti ir nepieciešams spraudnis vai pakalpojums.

3. Kāds ir “atalgojošākais” attēla optimizācijas solis?

Tas parasti ir Vispirms pareizi iestatiet “izmērus” (srcset/sizes).。
Daudzas vietnes ir lēnas nevis tāpēc, ka tajās nav kompresijas, bet gan tāpēc, ka lapa ir tikai 900px, bet lietotājam tiek prasīts lejupielādēt 3000px attēlu. Kompresija ietaupa KB, bet “nepareizais izmērs” liek lejupielādēt vairākas reizes vairāk datu par velti.

4. Kā es varu būt pārliecināts, ka ielādēju “mazāko”, nevis oriģinālo attēlu uz visiem laikiem?

Aplūkojiet divas parādības:

• Atverot lapu mobilajā tālrunī, lejupielādētā attēla izmērs ir ievērojami mazāks nekā darbvirsmā.
• Viena un tā paša attēla ielāde ar dažādiem resursu izmēriem dažādās ierīcēs
  Ja oriģinālais attēls tiek lejupielādēts uz visiem laikiem, biežākais iemesls ir tāds, ka tēma/būvētājs apstrādā attēlu kā CSS fona attēlu vai pielāgotu produkciju, apejot multivides bibliotēkas daudzizmēru iestatīšanu ar srcset.

5. Vai “WebP/AVIF ģenerēts” nozīmē, ka frontendam ir jārada WebP/AVIF?

Nav vienādi.
Ģenerēšana ir tikai “faila slānis”; tas, vai frontends faktiski nodrošina WebP/AVIF, ir atkarīgs no pārrakstīšanas, attēlu marķēšanas politikas, kešatmiņas trāpījumiem, spēkā esošajām pārlūkprogrammas sarunām utt.. Kad esat pabeidzis, pārliecinieties, ka esat “izlases veidā pārbaudījis dažus attēlus resursu tipiem”.

6. Plus Kas ir bīstams WebP vai AVIF? Vai es varu palaist visu bibliotēku ar vienu klikšķi?

Tās riska punkts nav “saspiešana”, tas ir.Aktīvu migrācijas līmeņa izmaiņas：

• Pilnīga ģenerēšana var pārrakstīt sākotnējā attēla faila ID, dzēst sākotnējo failu un saturā aizstāt URL.
  iemesls, kāpēcNav ieteicams uzreiz nomainīt visu bibliotēku.: Vispirms pārbaudiet nelielā mērogā (desmitiem ~ simtiem) + ir pieejamas rezerves kopijas, pēc tam apsveriet pilnu bibliotēkas apstrādi.

7. Kāda ir izvēle starp diviem Plus WebP režīmiem: saglabāt oriģinālo attēlu vai aizstāt un dzēst oriģinālo attēlu?

Vienkārši saprotams:

• 1. režīms: saglabāt oriģinālo attēlu + ģenerēt WebP/AVIF kopiju (stabilāk): Ērts, lai atjaunotu, bet disks palielinās (sākotnējais attēls + jaunais formāts + vairāku izmēru sīktēli).
• 2. režīms: sākotnējā attēla aizstāšana un dzēšana (agresīvāks).: Diski ir mazāk pakļauti uzpūšanās riskam, taču jūs “maināt aktīvus + maināt atsauces”, kas sadārdzina savietojamības problēmu novēršanu.
  Jo sarežģītāka vietne (e-komercija/dažādu spraudņu/dažāda izmēra), jo vairāk ieteicams sākt ar stabilāku modeli.

8. Vai pietiek ar EWWW Image Optimizer bezmaksas vietējo saspiešanu? Vai tas pārslogos serveri?

EWWW ir vairāk “vietējais kompresors”: tas ēd CPU/IO.
Partijas optimizācijas laikā slodze parasti pieaug, kas nenozīmē, ka tā “nedarbojas”, bet gan to, ka stratēģijai jābūt pareizai: partija, zemas maksimālās slodzes un nepieciešamības gadījumā izkraušanas/cloud iespējas.
Ja vēlaties ietaupīt līdzekļus vai jums trūkst servera resursu, B maršruts ir serverim draudzīgāks.

9. ShortPixel 100 bezmaksas kredīti mēnesī, kāpēc man liekas, ka tie ir pazuduši pēc pāris bildēm?

sakarā ar kredīti nav “bilžu skaits”.”Nākamās paaudzes attēls tiks palielināts ar sīktēlu, izmantojot nākamās paaudzes attēlu:

• Oriģinālais attēls + katra miniatūra tiek uzskatīta par kredītu
• Ja tiek ģenerēts WebP/AVIF, par katru attiecīgo versiju tiek izmantots papildu kredīts.
  Tātad tas, ko jūs uzskatāt par “1 attēlu”, patiesībā var patērēt gandrīz “2 ciparu kredītus”. shortPixel

10. Imagify bezmaksas 20MB/mēnesī, kāpēc tas arī ātri beidzas?

Imagify drīzāk ir “satiksmes pakete”:

• Kā jūs to nosūtījāt.Sākotnējais faila izmērskvotu atskaitīšana
• Jo vairāk miniatūru ir, jo lielāks ir patēriņš.
• Mainot saspiešanas līmeni, lai atkārtoti optimizētu, atkal tiks patērēta kvota.
• Viena API atslēga vairākām vietnēm, kvotu koplietošana
  Tātad “20MB drīz beigsies” bieži vien izraisa pārāk lieli attēli, pārāk daudz sīktēlu vai atkārtots mēģinājums un kļūda.

11. TinyPNG ir bezmaksas 500 kredīti mēnesī, kāpēc spraudnis saka, ka tas ir tikai aptuveni 100 kredīti mēnesī un tad 50 kredīti mēnesī ar WebP/AVIF?

Jo TinyPNG kredīti tiek arī palielināti ar “size/variant”:

• Parasta WordPress instalācija, iespējams, saspiež aptuveni 100 lapas mēnesī.
• Iespējot AVIF vai WebP konvertēšanu:Katrs attēla izmērs patērē papildu kredītuTātad jūs, iespējams, varat saspiest un konvertēt tikai aptuveni 50 attēlus mēnesī (atkarībā no miniatūru izmēru skaita).
  Tātad 500 kredīti ≠ 500 attēli.

12. Cik sīktēlu ir manā vietnē? Kāpēc tam ir tik liela nozīme?

WordPress ģenerē vairākus attēla augšupielādes izmērus; tēmas/plogi (īpaši e-komercijas) var pievienot vairāk izmēru.
Mākoņu kompresijas kredīti/kvotas parasti ir “oriģināls + miniatūras kopā”, tāpēc, jo vairāk miniatūru jums ir, jo mazāk bezmaksas kredītu jums ir jāizmanto.

13. Vai slinka ielāde vienmēr ir ātrāka? Kāpēc daži cilvēki saka, ka slinka ielāde palēnina darbību?

Lēna ielāde ir piemērota “ārpusekrāna resursiem”.
Ja pirmais ekrāns ar kritiskāko lielo attēlu ir arī aizkavēta iekraušana, var palēnināt pirmā ekrāna pieredzi. WordPress 5.5 kopš noklusējuma slinks iekraušana ir labi, bet nav “viens izmērs der visiem”.

14. Es ceļoju pa maršrutu A vai B. Kad man ir nepieciešams CDN / CDN attēls?

Saspiešana, izmēra noteikšana un formatēšana atrisina “mazāku un piemērotu failu” problēmu;
CDN Risinājums ir nodrošināt ciešāku un stabilāku。
Ja attēli tiek vilkti no attāluma no avota vietnes, kas rada ievērojamu latentumu, tad CDN/attēlu papildināšana ar CDN (piemēram, Cloudflare Polish / Jetpack Site Accelerator) kopumā būs stabilāka, lasiet. WordPress CDN paātrināšana。

15. Kāds ir visvienkāršākais veids, kā es varu pārbaudīt, vai “tas patiešām darbojas”, kad esmu pabeidzis darbu?

Laika ziņā visefektīvākā verifikācijas metode:

• Vai tā pati lapa tiek atsvaidzināta otrreiz un ielādēta vienmērīgāk un ātrāk.
• Vai mobilajos tālruņos un galddatoros ielādēto attēlu izmēri ievērojami atšķiras (vai ir nozīme srcset/sizes)?
• Pārbaudiet dažus attēlus: vai ir WebP vai AVIF faili/resursi.
• Pārbaudiet dažus attēlus: palieliniet attēlu, lai redzētu, vai tie ir redzami dubļaini, vai teksts ir izplūdis.