Kies op basis van de taak die de afbeelding moet uitvoeren
Begin bij het asset, niet bij de extensie. Een foto is continuous‑tone content, dus enige compressieverlies is acceptabel op de weergegeven schaal. Een screenshot, grafiek, logo of lijntekening heeft scherpe randen en tekst waarbij artefacten opvallen. Behoud deze met lossless output of zorg voor zorgvuldige goedkeuring. Gebruik SVG voor een vectorlogo of diagram wanneer beschikbaar.
Bepaal daarna de vereiste mogelijkheden. Alfa betekent per‑pixel‑transparantie. Animatie is een reeks frames. Benodigde browserdekking, publicatievolume en build‑tijd zijn leveringsbeperkingen die een kleiner formaat kunnen overrulen.
Test eerst lossy AVIF en WebP. Houd JPEG beschikbaar wanneer een breed compatibele ondoorzichtige fallback nodig is.
Behoud een lossless‑bron. Vergelijk PNG met lossless WebP of AVIF op de daadwerkelijke weergaveschaal vóór de keuze.
Gebruik AVIF, WebP of PNG; kies geen JPEG omdat dat geen alfakanaal bevat.
Begrijp wat elk formaat bijdraagt
AVIF slaat AV1‑gecodeerde beelden op in een HEIF‑gebaseerd containerformaat. De specificatie omvat still images, beeldsequenties en alpha‑afbeeldingselementen. Het ondersteunt lossy en lossless codering, transparantie en animatie. Besparingen zijn niet vast: bronmateriaal, encoder, snelheid, doelkwaliteit en metadata beïnvloeden het resultaat.
WebP ondersteunt lossy en lossless modi, transparantie en animatie. JPEG is een lossy still‑imageformaat met zeer brede historische ondersteuning en nuttig als ondoorzichtige fotofallback. PNG is lossless met alfa, waardoor het een degelijke fallback is voor exacte grafieken, hoewel fotografische PNG’s vaak inefficiënt zijn. Gewone PNG is statisch; test een apart animatieformaat als beweging nodig is.
Zeker te verkennen voor hoogwaardige rasterbeelden waarbij een kleinere overdracht de extra encoder‑ en fallback‑inspanningen kan rechtvaardigen.
Handig als modern algemeen rasterformaat, inclusief transparantie en geanimeerde reeksen.
Gebruik voor ondoorzichtige fotografische fallback, niet voor een transparant logo of uitgesneden object.
Gebruik voor lossless, transparante rasterfallback en voor assets waarbij pixelfideliteit belangrijker is dan minimale bytes.
Bouw een fallback‑pad in plaats van te gokken op één formaat
Het picture‑element laat de browser alternatieven evalueren. Zet AVIF eerst, daarna WebP en dan een img‑fallback in JPEG of PNG, met het juiste MIME‑type. De browser slaat een niet‑ondersteunde source over en gebruikt de fallback wanneer geen bron decoderenbaar is. Houd dezelfde betekenisvolle alternatieve tekst tenzij je bewust de uitsnede verandert.
Formatfallback vervangt geen responsieve sizing. Lever op breedte gebaseerde kandidaten en een eerlijke sizes‑waarde wanneer de plaats varieert. Geef width en height zodat de browser ruimte kan reserveren. Een klein‑bestandsformaat bij een te grote pixelafmeting verspilt nog steeds bytes.
AVIF eerst, WebP tweede, daarna JPEG voor ondoorzichtige foto’s of PNG wanneer de fallback transparantie of lossless randen moet bieden.
Als een server formaten selecteert op basis van request‑capabilities in plaats van picture‑markup, configureer cache‑variatie correct en test dat elke client een decoderenbare representatie ontvangt.
Gebruik een client zonder de voorkeursdecoder of schakel een source doelbewust uit in staging; bevestig dat afbeelding, dimensies en alternatieve tekst correct blijven.
Budgetteer encodeertijd en bescherm visuele kwaliteit
Moderne compressie verschuift werk naar het encoderen. AVIF’s referentie‑encoder biedt een snelheidsbereik van 0 (langzaamst) tot 10 (snelst); WebP ruilt encoderwerk ook in voor tijd, outputgrootte en kwaliteit. Behandel batch‑re‑encode of on‑demand transformatie als een operationele beslissing, niet als een gratis instellingwijziging.
Stel een herhaalbaar beleid op per assetklasse en beoordeel originelen op gangbare weergavegroottes. Inspecteer gezichten, verlopen, tekst, randen en transparante grenzen. Behoud de master en registreer encoder‑versie en instellingen zodat een defect gereproduceerd en teruggedraaid kan worden.
Snellere encodering kan build‑druk verminderen maar kan een groter bestand of minder efficiënte compressie opleveren; benchmark je eigen bronnen.
Een score of preset kan de visuele beoordeling van beeldregio’s die betekenis dragen voor bezoekers niet vervangen.
Maak wijzigingen in afbeeldingsformaten een proactieve praktijk voor betrouwbaarheid
Voor Status Is UP is image‑optimalisatie proactief uptime‑werk wanneer het voorkomt dat een release een kritieke pagina degradeert. Maak een inventaris van kritieke afbeelding‑URL’s, voer een representatieve conversie in staging uit en verifieer content‑type, CDN‑gedrag en cache‑invalidatie vóór een site‑brede migratie.
Implementeer in omkeerbare batches. Vergelijk renderen en overdrachtsgedrag op de release‑candidate en houd de oude representatie beschikbaar totdat het nieuwe pad bewezen is. Als een transformatie‑ of cache‑regel faalt, herstel de bekende‑goede bron. Dit is een veerkrachtige leveringsrichting, geen universeel mandaat voor AVIF of meerdere formaten.
Prioriteer de lead‑afbeelding en contentafbeeldingen die de first useful view beïnvloeden, niet elke archiefafbeelding tegelijk.
Houd deterministische asset‑namen of een versiegemapte mapping bij zodat het vorige JPEG‑, PNG‑ of WebP‑pad snel kan worden hersteld.