SparkCore
Van PNG naar WebP zonder handmatig exporteren
Transparante PNG’s worden slim omgezet waar WebP dat ondersteunt, met fallback waar nodig.
In het kort
- Zet PNG's met foto's of kleurverlopen om naar WebP: daar zit de grootste winst.
- WebP ondersteunt transparantie, dus je logo hoeft niet plat te worden.
- Laat een plugin het werk doen en bewaar altijd het origineel.
Transparantie behouden
Spark kiest per asset het formaat dat kwaliteit en grootte balanceert.
Waarom zijn PNG-bestanden zo groot?
PNG slaat elke pixel zonder verlies op. Dat is ideaal voor scherpe randen, tekst en iconen. Bij een foto of een beeld met veel kleurverloop levert het zware bestanden op. Een screenshot of een export uit een ontwerptool is snel meerdere megabytes groot. Die bytes moet elke bezoeker downloaden. Dat vertraagt je pagina en drukt je LCP-score. Bij een omzetting naar WebP verdwijnt een groot deel van dat gewicht, vaak zonder dat iemand het verschil ziet.
- Foto's die als PNG zijn opgeslagen
- Screenshots van een volledig scherm
- Exports met schaduwen en kleurverlopen
Houdt WebP de transparantie van je PNG vast?
Ja. WebP ondersteunt een alfakanaal, net als PNG. Een logo met een doorzichtige achtergrond blijft dus doorzichtig. WebP kent twee modi. Lossless bewaart elke pixel. Lossy mag kleine details weggooien voor een kleiner bestand. Voor een foto met transparante randen kies je meestal lossy. Voor een icoon met harde lijnen is lossless veiliger. Controleer na de omzetting altijd de randen op een gekleurde achtergrond. Daar zie je een eventuele lichte rand het eerst.
Wanneer blijf je beter bij PNG?
PNG blijft zinvol als bron. Een bestand dat je nog wilt bewerken, bewaar je als PNG of in het ontwerpformaat. Ook heel kleine iconen met weinig kleuren winnen soms weinig. Meet daarom per bestand en kijk niet alleen naar het gemiddelde. Een omzetting die groter uitvalt, laat je gewoon staan. Op de site zelf serveer je liever WebP, met PNG als terugvaloptie voor oude browsers.
- Bewaar het origineel voor later bewerken
- Meet de grootte voor en na
- Laat bestanden die niet kleiner worden ongemoeid
Hoe zet je PNG automatisch om naar WebP in WordPress?
Handmatig exporteren werkt voor tien bestanden, niet voor duizend. Een plugin neemt dat over. Spark Media Optimizer verwerkt nieuwe uploads en je bestaande bibliotheek op de achtergrond in een wachtrij. Je uploadt zoals altijd en het dashboard blijft bruikbaar. Browsers die WebP aankunnen krijgen WebP. De rest krijgt de PNG. Per afbeelding kiest de plugin het compressieniveau zonder zichtbaar verschil. Originelen blijven als veilige kopie bewaard, zodat je kunt terugdraaien.
Veelgestelde vragen
Meestal wel, vooral bij foto's en beelden met kleurverloop. Bij kleine iconen met weinig kleuren is het verschil klein en soms valt PNG zelfs kleiner uit. Meet daarom per bestand wat de omzetting oplevert.
Alle huidige grote browsers ondersteunen WebP. Voor de zeldzame oude browser gebruik je een fallback naar PNG of JPEG. Zo ziet elke bezoeker altijd een werkend beeld, ook als het formaat niet wordt herkend.
Bij lossless WebP niet. Bij lossy WebP gaat wat detail verloren, maar op een goed niveau is dat op het scherm niet te zien. Bewaar het origineel en vergelijk bij twijfel beide versies naast elkaar.