Afbeeldingsoptimalisatie voor WordPress

Afbeeldingsoptimalisatie is een van de meest “rendabele” aspecten van de prestaties van WordPress: met dezelfde paginastructuur en hetzelfde thema, maar met de juiste afbeeldingsgrootte, -indeling en -bezorgingsmethode, wordt de laadervaring vaak onmiddellijk verbeterd.

Maar het optimaliseren van afbeeldingen is ook het makkelijkst om het “steeds verder te verpesten”. Dit komt niet door de moeilijkheid van de techniek, maar door de versnippering van de informatie.
Je hebt een paar artikelen gelezen en je weet dat je “WebP/AVIF” moet comprimeren en “lazy loading” moet gebruiken. In de beschrijving van de plug-in wordt vermeld dat je “100 gratis credits per maand” krijgt en dat “20 MB gratis is”, maar hoeveel kost het eigenlijk? Wordt er geld in rekening gebracht? Heb je “hetzelfde” misschien verkeerd begrepen? En het belangrijkste:Heeft het echt effect gehad, nadat je het had gedaan?

Dit artikel doet maar drie dingen:

1. Ik geef je een uitvoerbareHet routekaart(Wat eerst doen, wat later doen)
2. Leg duidelijk uit welke optie je kiest (wat het verschil is tussen gratis en betaald, en voor wie ze geschikt zijn).
3. Noem de meest voorkomende valkuilen van tevoren (zodat je ze niet later nog hoeft te zoeken en te controleren).

1. De basis: Wat wordt er wel en niet meegeleverd door WordPress?

Als je niet eerst begrijpt wat WordPress Core al doet, kan er gemakkelijk twee dingen gebeuren:

• De “gratis mogelijkheden” die beschikbaar zijn, worden niet benut. In plaats daarvan wordt tijd en geld besteed aan het opnieuw uitvinden van het wiel.
• Ik dacht dat WordPress “automatisch alle oude afbeeldingen naar WebP/AVIF zou converteren”, maar dat is niet het geval.

De kern van WordPress beschikt al over deze belangrijke functionaliteiten:

• Responsieve afbeeldingen (srcset/sizes)Vanaf WordPress 4.4 genereert de kern de afbeeldingsuitvoer. srcset 与 sizesEn maak gebruik van de afbeeldingen met verschillende formaten die tijdens het uploaden worden gegenereerd, zodat de browser de meest geschikte bron kan selecteren voor het laden, afhankelijk van de schermomstandigheden.
• Natieve lazy loadingVanaf WordPress 5.5 wordt er standaard native lazy loading geactiveerd voor afbeeldingen, met behulp van HTML-standaarden. loading Attribuutimplementatie.
• Ondersteuning voor het uploaden van WebP-bestanden.Vanaf WordPress 5.8 kun je WebP bestanden uploaden en gebruiken, net zoals JPEG/PNG bestanden, zolang als je hostingomgeving WebP ondersteunt.
• Ondersteuning voor het uploaden van AVIF.Vanaf WordPress 6.5 kun je AVIF-bestanden net als JPEG- en PNG-bestanden uploaden en gebruiken (hoewel dit ook afhankelijk is van de ondersteuning door de hostomgeving).

Maar let op:
“Ondersteuning voor uploaden/gebruiken” ≠ “automatische conversie/automatische levering”.
Dat wil zeggen dat als je al WP 6.5 gebruikt, de JPG- en PNG-bestanden in je mediabibliotheek niet automatisch in WebP- of AVIF-indeling worden geconverteerd. Je krijgt ook geen volledige keten die “AVIF/WebP uitvoert op basis van de mogelijkheden van de browser en terugvalt op de originele afbeelding als de browser dit niet ondersteunt”. Voor dit deel heb je normaal gesproken plug-ins of services nodig.

2. Stappenplan: foto's in 5 stappen optimaliseren

Wat moet je doen, waarom moet je het doen, wat is een goede score en wat zijn typische valkuilen?

2.1 Zorg eerst voor de juiste “afmetingen” (dit wordt vaak over het hoofd gezien, maar levert de grootste voordelen op).

Veel langzame websites hebben niet zozeer een probleem met compressie, maar eerder met...Ik heb een afbeelding gedownload die veel groter is dan het weergegeven gebied.：
Als de pagina bijvoorbeeld slechts 900 pixels breed is, maar je laat bezoekers de originele afbeelding van 3000 pixels downloaden, zal de browser deze eerst downloaden en vervolgens verkleinen. Dit leidt tot een verspilling van bandbreedte, langere decoderingstijd en een langzamere weergave op het eerste scherm.

Voor WordPress 4.4+Het responsieve afbeeldingsmechanisme.（srcset/sizesHet was juist om dit probleem op te lossen.

Wat wordt als voldoende beschouwd:

• Wanneer je de pagina op je mobiele telefoon opent, moeten de afbeeldingen die je hebt gedownload duidelijk kleiner zijn dan op een desktop.
• De hoeveelheid resources die nodig is om dezelfde afbeelding op verschillende apparaten te laden, verschilt (in plaats van dat de originele afbeelding altijd wordt gedownload).

De meest voorkomende valkuilen:

• Sommige thema's of builders gebruiken afbeeldingen als CSS-achtergronden of voegen ze op een andere manier toe, waardoor deze mogelijk worden genegeerd. srcsetDit resulteerde in een constante stortregen.
• Je gebruikt externe afbeeldingshosts, afbeeldingsblokken van derden of je omzeilt misschien zelfs het systeem voor meerdere afbeeldingsformaten dat door de mediabibliotheek wordt gegenereerd.

---

2.2 Comprimeren (om het aantal KB te verminderen, zonder de kwaliteit in gevaar te brengen)

De kern van compressie is niet “hoe kleiner, hoe beter”, maar “er is nauwelijks een verschil te zien, maar de bestandsgrootte is wel aanzienlijk verminderd”.

De regels zijn als volgt:

• Foto's/echte foto's (van mensen, producten, landschappen): Voorkeur voor verlieslijdende compressie (maximale opbrengst)
• Schermafbeeldingen van de interface/afbeeldingen met veel tekstHet comprimeren moet conservatiever zijn om te voorkomen dat de tekst er onscherp uitziet.
• Logo/pictogram: Geef de voorkeur aan SVG of wees voorzichtig met onschadelijke bestanden (want bij schadelijke bestanden kunnen de randen makkelijk onscherp worden).

Wat wordt als voldoende beschouwd:

• De meeste afbeeldingen op de pagina zijn aanzienlijk kleiner geworden.
• Er zijn geen duidelijke ruis, onscherpe randen, kleurverschuivingen of onscherpe tekst te zien.

---

2.3 WebP / AVIF (formaatstrategie: lagere bestandsgrootte bij dezelfde beeldkwaliteit)

WordPress ondersteunt nu uploaden. WebP (5.8) en AVIF (6.5)。
Maar om de “volgende generatie formaten” echt te kunnen gebruiken, moeten er meestal twee dingen worden opgelost:

1. Hoe je in de historische mediabibliotheek bestanden in bulk kunt converteren(Anders optimaliseer je alleen de “nieuwe foto's die in de toekomst worden geüpload”).
2. Moet ik een kopie maken of de originele afbeelding vervangen?(Dit is een risicovolle mijlpaal; hierna zal er meer aandacht worden besteed aan de functie “Vervangen en originele afbeelding verwijderen” van Plus WebP.)

Aanbevolen schrijfwijze:

• WebP: dit wordt over het algemeen als de standaardoptie gebruikt (omdat het beter compatibel is).
• AVIF: een verdere stap in compressie, geschikt voor grote afbeeldingen/afbeeldingen op het eerste scherm/albumafbeeldingen (maar nog meer compressie leidt tot een lagere kwaliteit).Afhankelijk van de ondersteuning van de omgeving）

---

2.4 Het is belangrijk om lazy loading op de juiste manier te gebruiken (en niet voor alles dezelfde aanpak te hanteren).

Vanaf WordPress 5.5Standaard uitgestelde ladenAfbeeldingen.
Het vermindert het bandbreedteverbruik tijdens de eerste weergave:

• Lazy loading is geschikt voor “off-screen resources”.”
• De grote afbeelding op het eerste scherm (vaak de belangrijkste afbeelding op het eerste scherm) is meestal niet geschikt om later te laden.

---

2.5 Leveringslaag: CDN / Afbeeldingen CDN

Compressie, afmetingen en indeling zorgen ervoor dat “bestanden kleiner en geschikter worden”.
Maar als de afbeeldingen altijd vanuit een externe bron worden opgehaald, heeft de netwerkvertraging nog steeds een grote impact op de gebruikerservaring. Hiervoor hebt u een oplossing op leveringsniveau nodig (CDN/afbeeldings-CDN).

Twee typische richtingen:

• Cloudflare Pools：Het document van CloudflareEr wordt een introductie gegeven van de compressiemethoden van Poolse taal (verliesloos/met verlies/WebP) en er wordt vermeld dat deze methoden worden gebruikt door format=auto Het gebruik van de WebP/AVIF-indeling is toegestaan.
• Jetpack websiteversneller：Het Jetpack-documentHiermee wordt aangegeven dat de afbeeldingen worden geoptimaliseerd en samen met de statische bronnen via het netwerk worden gedistribueerd.

De afbeeldingsoptimalisatie zorgt ervoor dat de afbeeldingen kleiner en geschikter worden.Het CDN is verantwoordelijk voor het leveren van een snellere en stabielere service.

3. Selectie: er worden maar twee hoofdroutes gevolgd.

De meest voorkomende fout bij het optimaliseren van afbeeldingen is niet dat er geen plug-ins zijn geïnstalleerd, maar dat er te veel plug-ins zijn geïnstalleerd, waardoor de afbeeldingen dubbel worden verwerkt:
A is aan het comprimeren, B is ook aan het comprimeren; A converteert naar WebP/AVIF, B doet hetzelfde; A wijzigt de URL, B voert een herschrijving uit - uiteindelijk weet je zelf niet eens meer wat er op de site aan de gang is.

Regels:

Er is maar één route: kies uit drie opties: ofwel volledig gratis lokaal, ofwel cloudcompressie, ofwel een combinatie van beide.

• Route A (volledig gratis en lokaal):Plus WebP of AVIF + EWWW Image Optimizer(Of kies er maar een van)
• Route B (één van de drie cloudcompressieopties):Korte pixel / Imagify / TinyPNG

---

3.1 Route A: geheel gratis lokaal (Plus WebP of AVIF of EWWW)

De kenmerken van deze route zijn:

• Je bent niet afhankelijk van externe compressiediensten waarbij je maandelijks een limiet hebt of per afbeelding wordt gefactureerd (al bieden sommige services optionele diensten aan).
• Het nadeel is dat batchverwerking mogelijk meer rekenkracht/I/O van de server vereist en dat je meer aandacht moet besteden aan “strategie en risico's”.”

3.1.1 Plus WebP of AVIFDe kern is “genereren/vervangen”. Het is geen “compressietool” in de traditionele zin.”

• Tijdens het genereren van een volledige set afbeeldingen:De ID van het originele afbeeldingsbestand wordt overschreven door WebP/AVIF, het originele bestand wordt verwijderd en de URL in de inhoud wordt vervangen.。
• De plug-in biedt WP-CLI-commando's en herinnert eraan dat het gebruik van WP-CLI betrouwbaarder is wanneer er veel bestanden zijn.

Dit betekent dat het niet “stilletjes een WebP voor je genereert”, maar dat het waarschijnlijk eenmalig is.Het verplaatsen van activa(Vooral wanneer je de optie “Vervangen en originele afbeelding verwijderen” inschakelt).

Het verschil tussen de twee modellen.

Mode 1: de originele afbeelding behouden + een WebP/AVIF-kopie genereren (veiliger)

• Voordelen: het is gemakkelijker om terug te keren bij compatibiliteitsproblemen.
• De kosten: het gebruik van schijfruimte neemt toe (oorspronkelijke afbeelding + nieuw formaat + thumbnails in verschillende formaten).

Mode 2: De originele afbeelding vervangen en verwijderen (agressiever)

• Voordelen: de schijf zal niet zo snel vol raken; interne referenties worden automatisch in het nieuwe formaat omgezet.
• Risico: wanneer je “assets wijzigt + referenties wijzigt”, kunnen de kosten voor het oplossen van compatibiliteitsproblemen hoger zijn (vooral wanneer bepaalde externe systemen of themalogica afhankelijk zijn van de oorspronkelijke bestandsnaam, het pad of de indeling).

De typische valkuilen van WebP of AVIF

1. Na de volledige vervanging van de database, worden bepaalde afbeeldingen op pagina's niet correct weergegeven.
   De reden is meestal niet dat de afbeelding “beschadigd” is, maar dat er ergens in de keten iets is misgelopen met de URL-vervanging, caching of miniatuurstrategie.
2. Hoe meer thumbnails er zijn, hoe groter de reikwijdte van de wijzigingen is.
   Wanneer je een afbeelding uploadt naar WordPress, worden er meerdere afmetingen gegenereerd; thema's en plug-ins kunnen ook extra afmetingen toevoegen. Een volledige vervanging betekent dat je mogelijk een grote verzameling bestanden moet bewerken.
3. Het uitvoeren van een formatomigratie betekent niet dat de bestandsgrootte automatisch zo klein mogelijk is.
   WebP/AVIF zijn over het algemeen kleiner, maar de “dimensie- en compressiestrategieën” blijven belangrijk. Beschouw Plus WebP niet als een “one-stop-oplossing” voor snelheid.

---

3.1.2 EWWW beeldoptimalisatieDe vertegenwoordiger van gratis lokale compressie.

De positie van de EWWW-plug-inpagina is duidelijk:

• Het kan op je server worden geoptimaliseerd met verschillende tools (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc.)
• Als je behoefte hebt aan een hogere compressie of een lagere CPU-belasting, kun je de CPU-intensieve verwerking optioneel uitbesteden aan hun servers.

Welke rol zou EWWW moeten spelen in route A?

Als je de “formaatmigratie-/vervangingsstrategie” gebruikt met Plus WebP, is EWWW hier beter geschikt voor:

• Compressie en volume-optimalisatie(Vooral het verminderen van de bestandsgrootte van originele bronnen, zoals JPG/PNG.)
• Het optimaliseren van een historische mediabibliotheek in bulk.(Met als doel “het volume verminderen”, in plaats van “de URL vervangen”)

Een typische valkuil van EWWW.

1. Tijdens het bulkoptimaliseren neemt de serverbelasting toe.
   Omdat lokaal comprimeren veel CPU- en I/O-verkeer vereist. De oplossing is niet “niet gebruiken”, maar “in batches, tijdens piekmomenten en indien nodig kiezen voor uitladen of een cloudoplossing”.
2. “Het genereren van een WebP betekent niet dat de front-end automatisch een WebP produceert.
   Veel plug-ins maken een voornaam verschil tussen twee concepten: genereren en de leveringsstrategie (herverschrijven, afbeeldingslabels, caching, etc.)
3. Hetzelfde doen als andere plug-ins
   Als je route A volgt, moet je proberen geen cloudcompressie meer toe te voegen, zoals ShortPixel/Imagify/TinyPNG. Als je route B volgt, moet je de vervangingslogica van Plus WebP niet meer gebruiken. De kernprincipes zijn:Volg één route tot het einde.

---

3.2 Route B: Kies uit drie cloud-compressieopties (ShortPixel / Imagify / TinyPNG)

Deze route is geschikt voor mensen die “serverbronnen willen besparen, het gemakkelijk willen maken om bulkacties uit te voeren en bereid zijn om op basis van gebruik of volume te betalen”.
Maar het meest misverstaande aspect van cloudcompressie is:Het gratis tegoed is niet zo simpel als “gratis kaartjes”.Het aantal en de grootte van de thumbnails, of ze in WebP/AVIF-indeling worden geëxporteerd en of ze herhaaldelijk worden gecomprimeerd, heeft allemaal een grote impact op het dataverbruik.

Hieronder wordt uitgelegd: hoe het zit met gratis versus betaalde services, hoe de limieten worden afgetrokken, welke valkuilen het gemakkelijkst zijn om in te trappen en welke typen websites dit het meest geschikt maken.

---

3.2.1 \nShortPixel100 gratis credits per maand, maar de credits worden verbruikt door het vergroten van de thumbnails en WebP/AVIF-bestanden.

Hoe zit het met gratis versus betaald?

In de beschrijving van de ShortPixel-plug-in wordt duidelijk vermeld:

• 100 gratis credits per maand
• Er zijn ook “extra onbeperkte maandelijkse credits” (de prijsinformatie hiervan wordt verstrekt op de pagina van de plug-in).
• Er wordt ook een “niet-vervalbaar pakket eenmalige credits” aangeboden (waarbij de startprijs wordt vermeld).

Tip:

• Gratis: elke maand krijg je een aantal credits voor lichte websites of tests.
• Eenmalige pakketten: geschikt voor websites met een grote mediabibliotheek die de voorraad in één keer willen opruimen (je koopt het eenmalig en gebruikt het totdat het op is; ze vervallen over het algemeen niet).
• Maandelijks/onbeperkt: geschikt voor websites waarop regelmatig nieuwe foto's worden geplaatst en die op de lange termijn stabiel en goed geoptimaliseerd moeten blijven.

De officiële KB van ShortPixel geeft ook uitleg over het verschil tussen een eenmalig pakket en een onbeperkt maandelijks abonnement.Een duidelijke uitlegOnbeperkte maandelijkse abonnementen worden maandelijks (of jaarlijks) gefactureerd en bieden een onbeperkt aantal credits, evenals een vastgestelde CDN-limiet. Eenmalige credits vervallen niet, zodat je ze op een meer controleerbare manier kunt gebruiken wanneer dat nodig is.

Het belangrijkste: hoe worden de credits van ShortPixel berekend?

De officiële documentatie van ShortPixel KB zei het heel duidelijk:

• Als je een afbeelding uploadt naar WordPress, worden er meerdere thumbnails gemaakt;
• Voor elke geoptimaliseerde miniatuur wordt één credit in rekening gebracht.；
• Als je ervoor kiest om WebP of AVIF te genereren,Voor elke originele afbeelding en elke miniatuurversie in WebP/AVIF wordt nog een credit in rekening gebracht.；
• Je kunt bepaalde thumbnails uitsluiten van de optimalisatie om het verbruik van credits te verminderen.

Credits voorbeeld：

Stel je voor dat je 1 afbeelding uploadt en dat het thema/de plug-in 8 thumbnails genereert:

• Alleen de originele afbeelding en de thumbnail worden geoptimaliseerd: 1（originele afbeelding）+ 8（thumbnail）= 9 credits
• Als je ook WebP/AVIF wilt genereren: voeg voor elk van de bovenstaande 9 bestanden een next-gen-versie toe → +9 credits.
  Dat betekent dat je denkt dat het “1 foto” is, maar dat het in werkelijkheid bijna “2 tientallen credits” kost.

Dus:“100 gratis credits” betekent niet hetzelfde als “100 gratis foto's”.

De meest voorkomende valkuilen van ShortPixel

1. Gratis 100 credits die snel op zijn
   Oorzaak: te veel thumbnails + extra credits voor het genereren van WebP/AVIF-bestanden.
   Aanbeveling：

• Eerst beoordeel je het aantal thumbnails van de site.
• Verwijder onnodige afmetingen van de thumbnails (optimaliseer alleen de afmetingen die echt worden gebruikt).
• Bepaal eerst de compressiestrategie en voer het vervolgens in bulk uit om te voorkomen dat je tijd verspilt aan het herhaaldelijk uitproberen van verschillende methoden.

2. Tegelijkertijd voegen we andere plug-ins voor bestandsconversie toe.
   Als je Plus WebP vervangt en ShortPixel de next-gen-tags laat genereren/invullen, zal de logica overlappen en wordt het moeilijk om problemen op te sporen. Bij route B laat je ShortPixel dit alleen doen.
3. Je denkt misschien dat als je het hebt geïnstalleerd, de “front-end automatisch WebP/AVIF gebruikt”.”
   De pagina van de ShortPixel-plug-inEr wordt vermeld dat het WebP/AVIF kan converteren en dat het de mogelijkheid biedt om afbeeldingen van de volgende generatie op de voorgrondpagina te plaatsen (bijvoorbeeld met behulp van tags).
   Maar nadat je het hebt gedaan, moet je het effect nog steeds verifiëren.

---

3.2.2 Imagify: Gratis 20 MB/maand; het quotum wordt in rekening gebracht op basis van de “grootte van de originele afbeelding plus het aantal thumbnails”. Het opnieuw comprimeren van een afbeelding leidt tot een herhaalde aftrek van het quotum.

Gratis limiet en locatiegegevens

De officiële prijspagina van Imagify.Het is duidelijk geschreven:Een gratis account heeft een maandelijks quotum van 20 MB.。
De plug-inpagina geeft ook duidelijk aan dat het mogelijk is om bestanden te comprimeren, de grootte aan te passen en WebP/AVIF-bestanden te converteren.

Hoe worden de quota in mindering gebracht?

De officiële documentatie van Imagify. “Hoe wordt het quota-gebruik berekend?” De kostenberekeningsmethode wordt duidelijk uitgelegd:

• Het aantal thumbnails heeft invloed op het dataverbruik.Zo heb je bijvoorbeeld 10 miniatuurafbeeldingen. Als je 1 afbeelding optimaliseert, worden er in totaal 11 afbeeldingen geoptimaliseerd (de originele afbeelding plus de 10 miniatuurafbeeldingen), wat bijdraagt aan het verbruik van je quota.
• Het quotum wordt afgetrokken van de oorspronkelijke bestandsgrootte.Als je bijvoorbeeld een foto van 100 KB naar Imagify stuurt, wordt 100 KB van je quota afgetrokken.
• Als je het compressieniveau wijzigt en het opnieuw optimaliseert, wordt je quota opnieuw verbruikt.。
• Dezelfde API-sleutel kan voor meerdere sites worden gebruikt, maar de quota worden gedeeld tussen deze sites.

Dit is de “kernbeginsel” van Imagify:
Het lijkt meer op een data-abonnement: hoe meer je gebruikt, hoe meer het kost; hoe meer thumbnails je hebt, hoe meer het kost; en als je de afbeeldingen steeds opnieuw comprimeert, wordt er steeds meer in rekening gebracht.

Een eenvoudig te begrijpen voorbeeld van quota van Imagify.

Stel dat je een originele afbeelding van 800 KB uploadt en dat de site hieruit 8 thumbnails genereert.

• Tijdens het optimaliseren met Imagify worden “de originele afbeelding + 8 thumbnails” allemaal meegeoptimaliseerd (als je ervoor kiest om alles te optimaliseren). Dit betekent dat de actie bijna het totale geheugen van “alle originele bestanden samen” in beslag zal nemen.
  Dit is de reden waarom sommige websites denken dat “20 MB snel op is”: niet omdat Imagify niet goed genoeg is, maar omdat je elke keer te grote afbeeldingen uploadt, te veel thumbnails maakt en je misschien zelfs steeds opnieuw de compressieniveaus aanpast.

De meest voorkomende valkuilen van Imagify

1. 20 MB gratis is niet genoeg om de “geschiedenis van de hele site” op te ruimen.”
   20 MB is meestal geschikt voor tests en kleine updates. Als je mediabibliotheek al erg groot is, moet je deze waarschijnlijk in één keer opruimen voordat je een upgrade uitvoert.
2. Het herhaaldelijk aanpassen van het compressieniveau, leidt tot een herhaaldelijke uitputting van de quota.
   Imagify maakt het duidelijkEen nieuwe optimalisatie zal opnieuw quota verbruiken.
   Het wordt aanbevolen om op deze pagina duidelijk de “strategie” te beschrijven:

• Allereerst kun je met een klein aantal foto's het compressieniveau en de beeldkwaliteit bepalen.
• Bevestig de strategie en voer deze vervolgens in bulk uit.
  Verwijder de noodzaak om steeds opnieuw fouten te maken in de volledige database.

3. De gedeelde API-sleutel voor meerdere stations zorgt ervoor dat de quota “op mysterieuze wijze afnemen”.”
   Als je dezelfde API-sleutel op meerdere sites gebruikt, worden de quota gedeeld.
   Daarom is het in een team- of multi-station-scenario het beste om duidelijk te maken welke stations worden gedeeld en welke stations afzonderlijk worden gebruikt, om oncontroleerbare budgetten te voorkomen.

---

3.2.3 TinyPNG(Tiny Compress Images): gratis 500 credits per maand; voor het converteren naar WebP/AVIF wordt “1 credit extra per afbeeldingsgrootte” in rekening gebracht.”

Het gratis tegoed en de bijbehorende factureringsstructuur.

De WordPress-plug-inpagina van TinyPNG is zeer duidelijk geschreven:

• 500 gratis credits per maand
• Bij een “standaard WordPress-installatie” kun je dit waarschijnlijk comprimeren. Ongeveer 100 foto's per maand.
• Maar als je de conversie naar AVIF of WebP inschakelt:Elke afbeelding kost bovendien één extra credit.Daarom kan het waarschijnlijk alleen worden gecomprimeerd en geconverteerd. Ongeveer 50 foto's per maand.(Dit is afhankelijk van het aantal miniatuurafbeeldingen dat je hebt.)

Tegelijkertijd heeft Tinify (de ontwikkelaar van TinyPNG/TinyJPG) dit ook gedaan in zijn De prijspagina van de APIVerduidelijking: Registreer je en je krijgt 500 gratis compressies per maand. Voor elke extra compressie wordt een bedrag in rekening gebracht, en er is geen verplichting om je te abonneren.

Om het begrip van TinyPNG in één zin samen te vatten:
Het wordt in credits bijgehouden; hoe groter de afbeeldingen en hoe meer WebP/AVIF-indelingen je gebruikt, hoe sneller de credits worden verbruikt.

Een eenvoudig te begrijpen voorbeeld van TinyPNG-credits.

Stel dat je website voor elke afbeelding 8 thumbnail-afmetingen genereert:

• Alleen comprimeren: originele afbeelding + 8 thumbnails → er zijn 9 credits nodig
• Als je de conversie van WebP/AVIF inschakelt: er wordt nog een keer credit in rekening gebracht voor elke afmeting → dit kan bijna het dubbele zijn.
  Dit komt overeen met de uitleg op de pagina van de plug-in: als je de conversie inschakelt, wordt je gratis limiet verlaagd van “100 foto's per maand” naar “50 foto's per maand”.

De meest voorkomende valkuilen van TinyPNG

1. Ik dacht dat 500 credits = 500 foto's waren.
   Nee. Het wordt verbruikt per “afbeeldingsgrootte/variant”. Op de pagina van de plug-in wordt duidelijk vermeld dat “elke afbeeldingsgrootte 1 extra credit kost tijdens het converteren”.
2. Het onderwerp/de e-commerce plug-in genereert te veel afbeeldingen, waardoor de gratis limiet drastisch omlaag gaat.
   Hoe groter de afmetingen, hoe sneller de credits worden verbruikt.
3. Na het inschakelen van de conversie merkte ik dat mijn dataverbruik plotseling enorm was toegenomen.
   Dit is geen bug, maar het is het factureringsmechanisme.
   Strategieadvies:

• Als de gratis fase voornamelijk wordt gebruikt om het gewicht te verminderen door middel van compressie, kunt u eerst alleen compressie toepassen. Als u vervolgens bevestigt dat de structuur van de site stabiel is en dat u inderdaad next-gen nodig hebt, kunt u de conversie starten.

4. Aanbevelingen per scenario: hoe je de juiste site kiest voor verschillende typen toepassingen.

Ook al gebruiken ze allemaal WordPress, toch verschillen de “beeldproblemen” van contentwebsites, e-commercewebsites, portfolio's en ledenwebsites van elkaar.

4.1 Inhoudssites/blogs (veel afbeeldingen in artikelen, met een gemiddelde updatefrequentie)

Prioriteitsadvies:

1. Maatstrategie (Stap 1)
2. Comprimeren (Stap 2)
3. WebP (Stap 3)

Een meer geschikte route:

• Als je het gemakkelijk wilt: kies uit drie routebeschrijvingen (ShortPixel / Imagify / TinyPNG).
• Als u het gratis wilt: route A (Plus WebP + EWWW), maar het wordt aanbevolen om eerst de risico's in te schatten in de “conservatieve modus (waarbij de originele afbeeldingen niet worden verwijderd)”.

Typische valkuil:

• De afbeelding bovenaan het artikel is erg groot en de strategie voor lazy loading is niet goed geïmplementeerd.Dit zal het eerste scherm vertragen.

4.2 E-commerce/productwebsites (veel thumbnails, veel varianten van afbeeldingen, stabiliteit staat voorop)

Het grootste probleem met e-commerce is niet dat de compressie niet goed werkt, maar dat bepaalde afmetingen na optimalisatie niet kloppen, dat er thumbnails ontbreken of dat er geen afbeeldingen worden weergegeven in de front-end componenten.

Prioriteitsadvies:

1. Eerst rustig aan: houd het bij een conservatieve compressiestrategie en vervang niet meteen de volledige database.
2. De afmetingen van de thumbnail evalueren: e-commerce-thema's genereren over het algemeen meer afmetingen, waardoor de dataverbruik toeneemt (ShortPixel/TinyPNG is hier een duidelijk voorbeeld van).
3. Doe eerst een kleinschalige validatie en ga daarna over tot de productie op grote schaal (dit is erg belangrijk).

Een meer geschikte route:

• Route B is vaak een stuk eenvoudiger: ShortPixel/Imagify/TinyPNG bieden allemaal de mogelijkheid om dit in bulk te doen. Het is echter belangrijk om het quotummechanisme te begrijpen en de kosten van tevoren in te schatten.
• Route A is ook mogelijk, maar wees voorzichtig met het gedrag van Plus WebP met betrekking tot “overdekken van ID's/verwijderen van originele afbeeldingen/vervangen van URL's”. Dit valt onder de migratie van assets en het wordt niet aanbevolen om dit meteen op grote schaal te doen.

4.3 Portfolio/fotostation (kwaliteit van de afbeeldingen is belangrijk, de afbeeldingen zijn groot en er worden hoge eisen gesteld aan de beeldkwaliteit)

Prioriteitsadvies:

1. Maatstrategie (controle over het weergavegebied)
2. Compressiestrategie (liever te groot dan dat de details beschadigd raken)
3. WebP/AVIF (de voordelen van grote afbeeldingen zijn duidelijk, maar de gebruikerservaring moet nog worden gevalideerd)

Een meer geschikte route:

• ImagifyAls je op “Originele afbeeldingsgrootte” klikt om het quotum te verminderen, is het gemakkelijker om op dergelijke websites “binnen het budget te blijven” (je weet ongeveer hoeveel elke grote afbeelding zal kosten), maar probeer niet steeds opnieuw op de afbeeldingen te klikken.
• \nShortPixelAls de afmetingen van de thumbnails niet te groot zijn en de credits ook duidelijk zijn, is dat geen probleem. Maar als je veel afmetingen en next-gen-afbeeldingen genereert, zal het aantal credits snel oplopen en moet je dit van tevoren goed plannen.

5. Vergelijking van het quotum/de facturering: leg uit of “gratis” voldoende is.

Welke optie is voordeliger en hoe lang kan je gratis gebruikmaken van deze optie?

5.1 Drie factureringsmodellen

• \nShortPixel(Credits)De credits worden berekend op basis van het aantal “originele afbeeldingen + thumbnails”. Het genereren van WebP/AVIF-bestanden kost extra credits voor elke overeenkomstige versie.
• Imagify(MB-quota)De quota worden afgetrokken op basis van de “omvang van het originele bestand”. Hoe meer thumbnails er zijn, hoe meer quota er worden afgetrokken. Als je de foto's opnieuw comprimeert, worden er opnieuw quota afgetrokken.
• TinyPNG(Credits)500 credits per maand; het inschakelen van de conversie naar WebP/AVIF kost extra credits voor elke afbeeldingsgrootte.

5.2. Snelle schattingsmethode

Je kunt het als volgt inschatten:

1. Neem een willekeurige “originele foto” die je vaak uploadt en kijk hoe groot deze ongeveer is (bijvoorbeeld 300KB / 1MB / 3MB).
2. Kijk hoeveel miniatuurafbeeldingen je site ongeveer genereert (bijvoorbeeld 5, 10 of 20).
3. Bepaal of je WebP/AVIF wilt genereren (ja/nee).

En vervolgens gebruik je de volgende “mentale rekentruc” om het verbruik te begrijpen:

• \nShortPixelElke afbeelding ≈ (1 + aantal thumbnails) credits; als WebP/AVIF wordt gegenereerd, wordt dit ≈ verdubbeld (omdat de next-gen versie ook credits vereist).
• ImagifyElke afbeelding telt mee voor het quota, ongeveer gelijk aan de grootte van de originele afbeelding plus de grootte van alle thumbnails. Als je het compressieniveau wijzigt en de afbeelding opnieuw comprimeert, wordt het quota opnieuw in rekening gebracht.
• TinyPNG500 gratis credits; als je website veel afbeeldingen van verschillende formaten genereert en de conversiefunctie inschakelt, zal het aantal gratis credits aanzienlijk afnemen (op de pagina van de plug-in wordt een indicatieve verwachting gegeven van “ongeveer 100 afbeeldingen per maand” en “ongeveer 50 afbeeldingen per maand”).

6. Risicowaarschuwing

Risico 1: Zorg ervoor dat meerdere plug-ins niet hetzelfde werk overlappen.

Dit is de meest voorkomende “oorzaak van een ramp”.”

• Route A:Plus WebP of AVIF + EWWW(De twee taken moeten gescheiden worden uitgevoerd. Voer geen gelijkaardige conversies en leveringen tegelijkertijd uit of installeer slechts één van beide.)
• Route B: ShortPixel / Imagify / TinyPNG Kies uit drie opties.(Kies een persoon die verantwoordelijk is voor compressie en next-gen)

Risico 2: Het “overdekken van ID's / verwijderen van originele afbeeldingen / vervangen van URL's van Plus WebP valt onder de migratie van assets.

Nogmaals benadrukken:Plus WebP De beschrijving geeft duidelijk aan dat wanneer de volledige afbeelding wordt gegenereerd, de originele afbeeldings-ID wordt overschreven, het originele bestand wordt verwijderd en de inhoud-URL wordt vervangen.
Dit betekent dat het geen “kleine instelling die op elk moment kan worden teruggedraaid” is, maar een wijziging op het niveau van de activa.

De voorgestelde strategie zou moeten zijn:

• Eerst een kleinschalige test (van tientallen tot honderden foto's).
• Zorg ervoor dat de weergave op de voorpagina, de thumbnails en de cache-updates allemaal correct werken.
• Overweeg nogmaals de verwerking van de volledige database.

Risico 3: Het werkelijke verbruik van de “gratis quota” voor cloudopslag is afhankelijk van het aantal thumbnails en de keuze voor next-gen.

• \nShortPixelDe thumbnails en next-gen hebben een grote impact op de credits.
• TinyPNGHet inschakelen van WebP/AVIF kost extra credits voor elke afbeeldingsgrootte.
• ImagifyHet wordt afgerekend op basis van de originele afbeeldingsgrootte. Hoe meer thumbnails er zijn, hoe meer er in rekening wordt gebracht. Bij een heruitgave worden de kosten nogmaals in rekening gebracht.

Risico 4: “WebP/AVIF is gegenereerd” betekent niet dat “WebP/AVIF daadwerkelijk wordt geleverd aan de gebruiker”.”

Veel mensen denken na de conversie dat er “niets is veranderd”, omdat de front-end nog steeds JPG/PNG produceert (of omdat een van de stappen in het proces, zoals caching, overschrijven, taggen of browseronderhandelingen, niet correct is uitgevoerd).

7. Hoe kun je controleren of het effectief is als je klaar bent?

4 zeer eenvoudige verificatiepunten:

1. Als je dezelfde pagina voor de tweede keer vernieuwt, is het laden dan stabieler en sneller?(Hoe het voelt of het cachen en optimaliseren effectief is)
2. Zijn de afbeeldingen die op mobiele telefoons en op desktops worden geladen duidelijk van verschillende grootte?(Responsief) srcset/sizes Werkt het?
3. Controleer een paar afbeeldingen: worden er WebP- of AVIF-bestanden/bronnen weergegeven?(Wordt de site echt gebruikt?) De volgende generatie.）
4. Let's take a look at a few pictures: zoom in om te zien of ze erg onscherp zijn of dat de tekst wazig is.(Is de compressiekwaliteit te hoog?)

Als aan deze vier voorwaarden wordt voldaan, betekent dit dat je de gekozen route al volgt. Ga hierna verder met de volgende stap. CDN “leveringslaag”Het zal over de hele linie stabieler zijn.

8 Voorstellen voor actie

1. Kies eerst een route:

• Ik wil dit zo gratis mogelijk houden.Plus WebP of AVIF + EWWW (of installeer er maar een van)
• Je bespaart serverbronnen en het is handiger om op basis van het gebruik te betalen.Kies uit drie opties: ShortPixel, Imagify of TinyPNG.

2. Doe eerst een kleinschalige test (met een paar tientallen foto's).
3. Als je zeker weet dat alles in orde is, kun je het vervolgens in bulk verwerken.
4. Er is verdere verbetering van de leveringsstabiliteit nodig:Lezen CDN-versnelling

gemeenschappelijke problemen

1. Hoeveel plug-ins moet ik eigenlijk installeren? Kan ik ze allemaal installeren?

Probeer indien mogelijk maar één route te nemen.

• Route A: Plus WebP of AVIF + EWWW Image Optimizer (of installeer een van beide)
• Route B: kies uit ShortPixel, Imagify of TinyPNG.
  Als je in dezelfde site meerdere plug-ins tegelijkertijd laat uitvoeren (“compressie/conversie naar WebP/AVIF/wijziging van de URL/herziening van de levering”), wordt het al snel een puinhoop en is het moeilijk om de fouten op te sporen.

2. Ondersteunt WordPress niet al WebP/AVIF? Heb ik hiervoor nog een plug-in nodig?

Het is belangrijk om het verschil te begrijpen tussen:
“Ondersteuning voor uploaden/gebruiken” ≠ “automatische conversie/automatische levering”.
WordPress 6.5 converteert oude JPG/PNG-bestanden niet automatisch naar WebP/AVIF en helpt je ook niet bij het volledige proces van “AVIF/WebP uitvoeren op basis van de mogelijkheden van de browser en, indien nodig, terugvallen op een andere indeling”. Om ervoor te zorgen dat je historische mediabibliotheek ook up-to-date is, heb je meestal plug-ins of services nodig.

3. Welke stap in de beeldbewerking levert de hoogste opbrengst op?

Dat is meestal het geval. Zorg eerst voor de juiste “afmetingen” (srcset/sizes).。
Veel websites zijn traag, niet omdat ze niet zijn gecomprimeerd, maar omdat de pagina slechts 900 pixels weergeeft, terwijl gebruikers de originele afbeelding van 3000 pixels moeten downloaden. Compressie bespaart KB, maar als de “afmetingen niet kloppen”, moet u vele malen meer gegevens downloaden voor niets.

4. Hoe kan ik controleren of het de “kleinere foto” is die wordt geladen, en niet de originele foto voor altijd?

Kijk naar twee fenomenen:

• Als je de pagina op je mobiele telefoon opent, zijn de afbeeldingen die worden gedownload duidelijk kleiner dan op een desktop.
• De hoeveelheid gegevens die nodig is om dezelfde afbeelding op verschillende apparaten te laden, verschilt.
  Als je altijd de originele afbeelding downloadt, komt dit meestal doordat het thema of de builder de afbeelding als CSS-achtergrondafbeelding of aangepaste uitvoer gebruikt en hierbij de verschillende afmetingen en srcsets van de mediabibliotheek omzeilt.

5. Betekent “WebP/AVIF gegenereerd” dat de front-end zeker WebP/AVIF produceert?

Niet hetzelfde.
De generatie is pas voltooid als de “bestandslaag” is voltooid; of de WebP/AVIF daadwerkelijk wordt geleverd, hangt af van de herschrijving, de strategie voor de -tag, of de cache wordt getroffen en of de browseronderhandelingen effectief zijn. Als je klaar bent, moet je “de bestandstype van een paar afbeeldingen controleren”.

6. Maar waarom is WebP of AVIF eigenlijk zo gevaarlijk? Kan ik dit met één klik voor de hele database uitvoeren?

Het risico zit niet in het “comprimeren”, maar...Wijzigingen op het niveau van de activamigratie.：

• Tijdens het genereren van de volledige set gegevens worden de ID's van de originele afbeeldingsbestanden mogelijk overschreven, worden de originele bestanden verwijderd en worden de URL's in de inhoud vervangen.
  DusHet wordt niet aanbevolen om de hele database in één keer te vervangen.eerst op kleine schaal testen (van tientallen tot honderden exemplaren) + als er een back-up beschikbaar is, kan je vervolgens de volledige database verwerken.

7. Hoe kies je tussen de twee modi van WebP: de originele afbeelding behouden of de originele afbeelding vervangen en verwijderen?

Eenvoudig gezegd:

• Mode 1: de originele afbeelding behouden + een WebP/AVIF-kopie genereren (veiliger)Het is handig om terug te gaan, maar de schijfruimte neemt toe (originele afbeelding + nieuw formaat + thumbnails in verschillende formaten).
• Mode 2: De originele afbeelding vervangen en verwijderen (agressiever)Het is niet eenvoudig om de schijf uit te breiden, maar als je “activa wijzigt + referenties wijzigt”, kunnen er compatibiliteitsproblemen ontstaan die moeilijk op te lossen zijn.
  Hoe complexer de site is (e-commerce, meerdere plug-ins, verschillende afmetingen), hoe meer wordt aanbevolen om met een stabielere modus te beginnen.

8. Is gratis lokale compressie met EWWW Image Optimizer voldoende? Zal het de server overbelasten?

EWWW lijkt meer op een “lokale compressiewerknemer”: het verbruikt veel CPU- en I/O-vermogen.
Het komt vaak voor dat de belasting toeneemt tijdens het optimaliseren in batches. Dit betekent niet dat het “niet werkt”, maar dat de strategie moet worden aangepast: verdeel de taken over meerdere batches, voer de taken uit tijdens piekmomenten en kies indien nodig voor een offloading- of cloudoplossing.
Als u op zoek bent naar een zorgeloze oplossing of als de serverbronnen beperkt zijn, is route B een goedkopere optie voor de server.

9. Met 100 gratis credits per maand van ShortPixel, waarom heb ik het gevoel dat ze al na een paar foto's op zijn?

Omdat “Credits” verwijst niet naar het aantal foto's.”Deze zal worden verkleind tot een miniatuur en vervolgens in high-resolutie worden weergegeven op apparaten met een next-gen-scherm:

• De originele afbeelding + elke miniatuur telt als een credit.
• Als je WebP/AVIF genereert, kost elke overeenkomstige versie extra credits.
  Dus je denkt misschien dat het “1 afbeelding” is, maar in werkelijkheid verbruikt het bijna “2 tientallen credits”. ShortPixel

10. Waarom is de gratis limiet van 20 MB per maand bij Imagify toch zo snel opgebruikt?

Imagify lijkt meer op een “data-abonnement”:

• Volgens wat je hebt verzondenDe oorspronkelijke bestandsgrootteQuota beperken
• Hoe meer thumbnails, hoe meer data er verbruikt wordt.
• Als je het compressieniveau opnieuw optimaliseert, wordt het quotum opnieuw verbruikt.
• Hetzelfde API-sleutel wordt gedeeld door meerdere sites en de quota worden gedeeld.
  Daarom is “20 MB is snel opgebruikt” vaak het gevolg van te grote afbeeldingen, te veel thumbnails of het herhaaldelijk maken van dezelfde fouten.

11. TinyPNG is gratis en biedt 500 credits per maand. Waarom zegt de plug-in dat dit ongeveer slechts 100 afbeeldingen per maand zijn en dat dit, nadat je WebP/AVIF hebt geactiveerd, zelfs nog verder wordt teruggebracht tot 50 afbeeldingen per maand?

Omdat de credits van TinyPNG ook worden versterkt door “afmetingen/varianten”:

• Een standaard WordPress-installatie comprimeert ongeveer 100 afbeeldingen per maand.
• Het inschakelen van AVIF- of WebP-conversie:Elke afbeelding kost bovendien één extra credit.Daarom kunnen we waarschijnlijk slechts ongeveer 50 foto's per maand comprimeren en converteren (afhankelijk van de grootte en het aantal thumbnails).
  Dus 500 credits ≠ 500 foto's.

12. Hoeveel thumbnails zijn er op mijn site? Waarom heeft dit zo'n grote impact?

Als je een afbeelding uploadt naar WordPress, worden er meerdere afmetingen gegenereerd. Thema's en plug-ins (vooral voor e-commerce) voegen mogelijk nog meer afmetingen toe.
De credits/quota voor cloudcompressie worden meestal berekend op basis van “de originele afbeelding plus de thumbnail”, dus hoe meer thumbnails je gebruikt, hoe sneller je gratis quota opgebruikt.

13. Betekent lazy loading automatisch dat het sneller gaat? Waarom zeggen sommige mensen dat lazy loading juist voor vertragingen zorgt?

Lazy loading is geschikt voor “resources buiten het scherm”.
Als zelfs de belangrijkste grote afbeelding op het eerste scherm pas later wordt geladen, kan dit de ervaring op het eerste scherm vertragen. Vanaf WordPress 5.5 is het standaard mogelijk om afbeeldingen met vertraging te laden, maar dit moet niet voor iedereen gelden.

14. Wanneer heb ik een CDN / beeld-CDN nodig als ik route A of B neem?

Compressie, grootte en indeling zorgen ervoor dat “bestanden kleiner en geschikter worden”.
Het CDN zorgt voor een snellere en stabielere levering.。
Als de afbeeldingen vanuit de bron op grote afstand worden opgehaald, wat tot duidelijke vertragingen leidt, is het over het algemeen stabieler om gebruik te maken van een CDN/afbeeldings-CDN (bijvoorbeeld Cloudflare Polish / Jetpack Site Accelerator). Lees meer WordPress CDN-versnelling。

15. Hoe kan ik op de eenvoudigste manier controleren of het echt effectief is, als ik klaar ben?

De snelste manier om dit te verifiëren:

• Als je dezelfde pagina voor de tweede keer vernieuwt, is het laden dan stabieler en sneller?
• Zijn de afbeeldingen die op mobiele apparaten en op desktops worden geladen, duidelijk verschillend in grootte (werkt srcset/sizes hierbij)?
• Controleer een paar afbeeldingen: worden er WebP- of AVIF-bestanden/bronnen weergegeven?
• Let's take a look at a few pictures: zoom in om te zien of ze erg onscherp zijn of dat de tekst wazig is.