Notities van het team over vakmanschap, formaten en de kleine beslissingen achter een goed resultaat.
Hoe WebP kleinere groottes haalt dan PNG
WebP gebruikt twee aparte compressiemodi. De lossless modus combineert ruimtelijke en kleurvoorspelling met een entropiecoderingsstap die geavanceerder is dan PNG's DEFLATE, en haalt volgens Googles gepubliceerde benchmark op typische afbeeldingen ruwweg 26 procent betere compressie. De lossy modus past een blokgebaseerde transformatie toe die lijkt op videocompressie, ontworpen om perceptueel irrelevante informatie weg te gooien en te behouden wat het oog werkelijk ziet. Voor afbeeldingen met transparantie gebruikt WebP een aparte lossless subcompressie voor de transparantiegegevens en past het tegelijk lossy compressie toe op de RGB-gegevens, en daarom kan lossy WebP met transparantie bij gelijke visuele kwaliteit ruwweg drie keer kleiner zijn dan een PNG. PNG's DEFLATE kent alleen lossless en kan de perceptuele afweging die de lossy modus benut niet gebruiken. Het formaatverschil verklaart de kloof.
Het alfakanaal in detail
Zowel PNG als WebP ondersteunen 8-bits alfatransparantie, wat betekent dat elke pixel een dekkingswaarde kan vasthouden van 0 (volledig transparant) tot 255 (volledig dekkend). Wanneer de afbeeldingsengine van het platform een PNG opnieuw codeert naar WebP, leest hij de RGBA-waarden van elke pixel en geeft de alfawaarden rechtstreeks door aan de WebP-codeerstap, waar ze met lossless compressie behouden blijven, los van hoe de RGB-gegevens worden gecodeerd. Het resultaat is dat elke transparante pixel in de PNG op alfa 0, elke half-transparante pixel tussen 1 en 254 en elke dekkende pixel op 255 op precies dezelfde staat in de WebP wordt afgebeeld. Voor een logo met zachte slagschaduwen of anti-aliased tekst op een transparante achtergrond blijft de randzachtheid intact. Dit staat in contrast met JPG, dat geen alfaveld in zijn containerspecificatie heeft en de afbeelding tegen een achtergrondkleur moet samenstellen voor het codeert.
Core Web Vitals en de keuze van het afbeeldingsformaat
Largest Contentful Paint meet hoe lang het grootste zichtbare element op de pagina erover doet om in het kijkvenster te verschijnen. Voor de meeste contentpagina's is dat element de hero-afbeelding, en Google gebruikt LCP als rangschikkingssignaal in zijn Core Web Vitals-beoordeling. PNG-afbeeldingen zijn een vaste bron van LCP-problemen vanwege hun bestandsgrootte, want een fotografische PNG op 4K-resolutie kan meerdere megabytes wegen terwijl de gelijkwaardige WebP bijna zonder verlies meestal een fractie daarvan is. PageSpeed Insights markeert dit specifiek in zijn controlepunt voor nieuwe-generatieformaten en noemt PNG als het te vervangen formaat. PNG's die op kritieke renderpaden verschijnen omzetten naar WebP is een van de meest invloedrijke enkele wijzigingen om de gemeten paginaprestaties te verbeteren. De tijdlijn van browserondersteuning maakt dit veilig, met WebP in Chrome vanaf 2011, Firefox vanaf 2019, Safari vanaf 2020 en Edge sinds zijn Chromium-herbouw.
Lossy uitvoer en de instelling bijna zonder verlies
WebP-codering biedt een kwaliteitsparameter van 0 tot 100, waarbij hogere waarden meer detail behouden ten koste van grotere bestanden. Deze tool codeert op een vaste instelling bijna zonder verlies, afgestemd om visuele getrouwheid en bestandsgrootte in balans te brengen voor de typische webcategorieën foto's, UI-beelden en pictogrammen. Bij deze instelling is de uitvoer op normale schermkijkafstanden niet te onderscheiden van de bron-PNG. Technisch gaat wat precisie op bitniveau verloren ten opzichte van een echte lossless codering, wat betekent dat een byte-voor-byte-vergelijking tussen de gedecodeerde WebP-pixels en de originele PNG-pixels kleine numerieke verschillen toont. Deze verschillen liggen bij fotografische inhoud onder de drempel van menselijke waarneming. Voor medische beeldvorming, satellietfotografie of digitale archiefbewaring, waar lossless getrouwheid een harde eis is, is de juiste aanpak om de PNG te houden en WebP alleen als leveringsexport te gebruiken, niet als werkkopie.
Gedrag van metadata
De keten die voor PNG-naar-WebP-omzetting wordt gebruikt, verwijdert EXIF-, IPTC- en XMP-metadata uit de uitvoer. Dit komt overeen met het gedrag dat over alle drie de grote browser-engines wordt waargenomen. ICC-kleurprofielen worden inconsistent verwerkt, waarbij Chrome en Safari het sRGB-ICC-profieltag in de WebP-uitvoer behouden en Firefox alle metadata inclusief het ICC-profiel verwijdert. Het netto-resultaat is dat de omgezette WebP browserbreed sRGB-veilig is, maar elke breed-gamuttagging zoals Display-P3, Adobe RGB of ProPhoto RGB in de bron-PNG overleeft niet in Firefox. Voor kleurkritieke professionele werkstromen telt deze inconsistentie, dus als de eindoutput kleurprofielgetrouwheid nodig heeft, zet dan om met een tool die ICC-gegevens uitdrukkelijk wegschrijft, of pas het profieltag toe als nabewerkingsstap met een speciale beeldmetadata-editor.
Wanneer PNG houden en wanneer WebP volstaat
De praktische beslisboom is kort. Als de uiteindelijke bestemming van de afbeelding een webpagina of webapplicatie is, en de weergaveomgeving een willekeurige browser vanaf 2020 is, is WebP het juiste exportformaat. Als de afbeelding in een ontwerptoepassing als Figma, Sketch of Affinity Designer moet openen, controleer dan eerst de WebP-ondersteuning in de exacte versie die je gebruikt, want die verschilt. Als de afbeelding in een drukwerkstroom wordt gebruikt, gaat de voorkeur uit naar PNG of TIFF, aangezien de meeste druk-RIP's WebP niet verwerken. Als de afbeelding per e-mail wordt verstuurd, is PNG veiliger, gezien hoe wisselvallig e-mailprogramma's met moderne formaten omgaan. Als de afbeelding wordt gebruikt als werkbestand dat meermaals wordt bewerkt en opnieuw opgeslagen, houd dan de PNG als master. WebP bijna zonder verlies is een uitstekend leveringsformaat, en PNG is het betere formaat om te archiveren en te bewerken. De ideale werkstroom houdt de PNG als origineel en exporteert WebP voor weblevering.