Converteer een ondoorzichtige PNG naar WebP en vergelijk het resultaat

Een fotografische PNG kan de moeite waard zijn om te testen als WebP voor een website. Het kan een camerabeeld zijn dat wordt geëxporteerd uit een ontwerptool, een weergegeven kamerscène of een afgeplatte promotieafbeelding. Maak een aparte export en vergelijk het met het origineel in plaats van de PNG onmiddellijk te verwijderen. De bestandsgrootte is afhankelijk van de afbeelding, dus de nuttige besparing is degene die u daadwerkelijk meet.

Transparantie heeft hier speciale zorg nodig. Hoewel het WebP-formaat alfa kan opslaan, geeft deze tool momenteel WebP-uitvoer weer op een witte achtergrond. Een transparante input verliest dus dat transparante gebied in de export. Houd PNG voor logo's, uitsparingen en overlays die op verschillende achtergronden moeten zitten, en gebruik deze conversie voor afbeeldingen waar een ondoorzichtig resultaat geschikt is.

De voorinstelling behoudt de afmetingen en begint bij 90% kwaliteit met scherper. Probeer een bestand met kleine tekst en een andere met een fotografische achtergrond. Inspecteer dunne randen, gekleurde letters en vloeiende gradiënten. Een ontwerp kan er in één oogopslag goed uitzien terwijl gekleurde halo's naast een label worden weergegeven wanneer ze op de beoogde grootte worden weergegeven.

Als de PNG een screenshot van een interface is, kan de leesbaarheid er meer toe doen dan een paar bytes afscheren. Vergelijk een PNG-export Of bewaar de bron wanneer WebP kritische details verzacht. Test voor een grote ondoorzichtige foto binnen de werkelijke weergavegrenzen voordat u de kwaliteit verder verlaagt. Verminder eerst onnodige pixels wanneer de website ze nooit laat zien, maar behoud voldoende resolutie voor de beoogde plaatsing.

De schuifregelaar WebP-kwaliteit regelt de lossy-codering van deze export. Een hogere instelling herstelt geen details die in de bron ontbraken, en hetzelfde nummer impliceert niet hetzelfde visuele resultaat in verschillende formaten. Gebruik het als vergelijkingstool: pas een beetje aan, inspecteer het resultaat en bewaar de kleinste versie die aan uw eigen kwaliteitsbehoeften voldoet.

PNG gebruikt die kwaliteitscontrole niet op dezelfde manier, dus het veranderen van de extensie is een echte keuze voor de workflow. Als uw PNG kleine diagramlabels of precieze kleurgrenzen bevat, kan het houden van PNG de juiste beslissing zijn, zelfs als het bestand groter is. Deze converter verkleint geen PNG-kleurenpalet, produceert een Lossless WebP-instelling of bewerkt de objecten en lagen in een afgeplatte afbeelding.

Download de geconverteerde afbeelding en upload deze naar een testpagina in uw eigenlijke websitesysteem. Bevestig dat de browser WebP ontvangt, het weergegeven uitsnede correct is en geen transparante randen zijn onverwacht wit geworden. Bekijk het tegen de achtergrond van de pagina, vooral als de bron is ontworpen voor een donkere sectie. Conversie moet in context worden gecontroleerd, niet alleen in een bestandsvoorbeeld.

Bekijk dan het mobiele display. Een grote marketingafbeelding heeft mogelijk een eenvoudigere lay-out nodig in plaats van een meer gecomprimeerde kopie wanneer de belettering op een telefoon onleesbaar wordt. Responsieve beeldselectie en gereserveerde dimensies blijven aparte websitetaken. Zodra de sample in orde is, verwerk je het matchen van bestanden samen. Uw afbeeldingsgegevens blijven tijdens deze conversie in de browser en de bron PNG blijft ongewijzigd.

Test bijvoorbeeld een wit woordmerk op transparante pixels voordat u merkactiva converteert. Een witte ondoorzichtige output kan het merkteken volledig verbergen, wat een vergelijking van een bestandsgrootte alleen zou missen.