Het beste beeldformaat voor websites: JPG, PNG, WebP of AVIF?

JPG, PNG, WebP en AVIF in het kort

Zie de MDN-referentie voor beeldformaten voor mogelijkheden en compatibiliteit. Formaatondersteuning betekent niet dat iedere uploadservice of editor het accepteert.

Wat compressie met en zonder verlies bewaart

Codering met verlies verandert een deel van de pixelinformatie om het bestand kleiner te maken. Een kleine verandering in textuur kan in een foto acceptabel zijn, terwijl dezelfde verandering rond een letter de leesbaarheid vermindert. Compressie zonder verlies bewaart de pixelgegevens die ze ontvangt. Een al gecomprimeerde JPG omzetten naar PNG herstelt geen eerder verloren details; het bestand kan er alleen groter van worden.

WebP ondersteunt beide methoden, zoals de WebP-documentatie van Google uitlegt. De formaatnaam vertelt niet welke methode een export gebruikt, en kwaliteit 100 garandeert geen resultaat zonder verlies. Bewaar je beste bronbestand en maak elke publicatieversie daarvan, zonder verliesgevende conversies aaneen te rijgen. Lees de gids over compressie met en zonder verlies voor het onderscheid.

Foto's: vergelijk WebP en AVIF met je JPG

De bergfoto hieronder vergelijkt echte Pixilo-exports. De aangeleverde JPG is 413,1 kB; Pixilo maakte een WebP van 299,0 kB bij kwaliteit 80 en een AVIF van 275,7 kB met de vaste kwaliteitsinstelling 65. Alle drie zijn 1920 × 1440 pixels. WebP bespaart ongeveer 28% en AVIF ongeveer 33% ten opzichte van deze JPG. De AVIF is in dit voorbeeld ongeveer 8% kleiner dan de WebP.

Dit zijn metingen van volledige bestanden uit één al gecomprimeerde JPG. Kwaliteitsinstellingen verschillen per formaat en deze exports zijn niet afgestemd op gelijke zichtbare kwaliteit. Gebruik ze als voorbeelden om te onderzoeken, niet als algemene ranglijst. Let in de schuifvergelijking op zachtere rotsstructuren, lichte randen langs de bergtoppen en kleurbanden in de egale lucht. Beoordeel het hele beeld op het beoogde weergaveformaat en controleer twijfelachtige plekken vervolgens in de detailweergave.

Herhaal de test met een kenmerkend beeld van je site: stof voor een winkel of een gezicht voor een teampagina. Maak beide versies uit dezelfde bron met dezelfde afmetingen: gebruik voor een JPG JPG naar WebP en JPG naar AVIF. Gebruik voor andere bronnen PNG naar AVIF of WebP naar AVIF. Kies de kleinste versie met voldoende detail; het origineel behouden is ook zinvol als dat al voldoet. Houd bij een grote batch ook rekening met de conversietijd.

Originele JPGPixilo-WebP

Bescherm randen, tekst en transparantie

Tekst en diagrammen maken compressieschade snel zichtbaar: een gekleurd randje rond een letter of een onderbroken lijn van één pixel kan meer storen dan een kleine verandering in een landschap. De afbeelding hieronder vergelijkt een PNG van 109,2 kB met Pixilo’s JPG-, WebP- en AVIF-exports op dezelfde 960 × 640 pixels. De AVIF is slechts 6,4 kB, maar die besparing is alleen nuttig als de kleinste tekst en lijnen duidelijk genoeg blijven.

Wissel van formaat en bekijk dezelfde letters en gekleurde randen in de detailweergave. Ga daarna terug naar het hele beeld om de normale leesgrootte te beoordelen. Dit zijn conversies met verlies, geen tests van verliesvrije WebP of AVIF. Legt een schermafbeelding een prijs, foutmelding of software-instelling vast, geef dan voorrang aan leesbare en correcte tekst boven het kleinste bestand. Behoud de PNG als de alternatieven die test niet doorstaan.

Transparantie is een andere eis dan scherpte: PNG, WebP en AVIF ondersteunen die; JPG niet. Probeer voor een transparante productafbeelding PNG naar WebP en controleer omtrek en schaduw op zowel lichte als donkere achtergronden. Kies vóór een JPG-export bewust een effen achtergrond. De ondoorzichtige afbeelding hieronder test geen transparante randen.

Bestaat je logo als SVG, bewaar dan de vectorbron. Rasteriseren alleen om te comprimeren kan het voordeel van scherp schalen wegnemen. Pixilo's rastertools verwerken de typen die bij elk hulpmiddel staan. Lees de SVG- en PNG-gids om te bepalen wanneer je het vectorformaat behoudt en wanneer een PNG-kopie zinvol is.

Originele PNGPixilo-JPG

Kies afmetingen voordat je naar het kleinste bestand zoekt

Plan voor de werkelijke ruimte. Een foto van 600 CSS-pixels breed kan een variant van 1200 pixels voor dichte schermen krijgen. Dit is een testvoorbeeld, geen algemene regel. Vergroten herstelt geen ontbrekende details in een kleine bron.

Als je zowel breedte als hoogte verdubbelt, verviervoudigt het aantal pixels. De bestandsgrootte wordt niet noodzakelijk vier keer zo groot, maar de encoder moet meer beeldinformatie opslaan. Kies eerst de uitsnede en de benodigde afmetingen en vergelijk daarna formaten op diezelfde afmetingen. Zo houd je het voordeel van verkleinen gescheiden van een formaatwijziging.

Een website kan via responsieve afbeeldingsinstellingen zoals srcset en sizes verschillende groottes aanbieden. Maak varianten met Afbeeldingsformaat wijzigen en lees de gids over responsieve afbeeldingen voor de aflevering ervan. Gebruik niet één vaste bestandsgrootte voor elk beeld: een kleine kaart en een gedetailleerde productzoom hebben verschillende doelen.

Controleer ook het laden

Reserveer ruimte zodat de inhoud niet verspringt. Lazy loading kan passen bij afbeeldingen lager op de pagina, maar het zichtbare hoofdbeeld vertragen. Googles LCP-advies raadt aan het belangrijke beeld vroeg vindbaar te maken en het LCP-beeld niet vertraagd te laden.

Configureer een benodigd terugvalformaat in de HTML of het CMS. Bij een picture-element gebruikt de browser de eerste bron die voldoet aan zijn formaatondersteuning en andere voorwaarden; hij vergelijkt niet alle bestanden om het kleinste te kiezen. Zet je geteste voorkeursformaat eerst en houd een geschikte JPG of PNG als terugvaloptie. De picture-gids van web.dev legt deze selectie uit.

Controleer het beeld dat de gepubliceerde pagina werkelijk levert. Een CMS of afbeeldings-CDN kan je upload schalen of opnieuw coderen, waardoor bezoekers een ander bestand ontvangen dan je Pixilo-download. Pixilo bereidt bestanden voor; je website regelt de aflevering. Een kleinere export alleen verhelpt geen late afbeeldingsaanvraag of trage serverreactie.

Controle voor publicatie

• Het doel accepteert het formaat en de extensie klopt.
• De afmetingen passen bij de lay-out.
• Tekst, gezichten en transparante randen blijven goed.
• Het bestand is kleiner of lost een werkelijk compatibiliteitsprobleem op.
• De pagina werkt op smalle schermen en het belangrijke beeld laadt op tijd.
• Het origineel blijft bewaard voor later.