Afbeeldingen optimaliseren voor websitesnelheid (WebP vs AVIF) | We.Inc
Kies het juiste formaat, schaal met srcset, laad de juiste afbeeldingen lazy en nooit de hero. Inclusief een markup-builder voor picture, srcset en fetchpriority.
Afbeeldingen optimaliseren voor een website
Afbeeldingen optimaliseren komt neer op vier stappen: kies het formaat dat bij de afbeelding past, exporteer alleen de pixelbreedtes die de layout nodig heeft, comprimeer elk bestand en bepaal wanneer het laadt. Lever AVIF of WebP met een JPEG als fallback, noem de breedtes in srcset, laad afbeeldingen onder de vouw lazy en geef de hero in plaats daarvan fetchpriority high.
Welk formaat voor welke afbeelding
Afbeelding
Beste formaat
Fallback
Foto
AVIF of WebP
JPEG
Screenshot met tekst
WebP lossless of PNG
PNG
Logo, icoon, eenvoudige vormen
SVG
PNG
Korte animatie
Video (MP4 of WebM)
Geanimeerde WebP
Afbeeldingen zijn meestal het zwaarste deel van een pagina, en de hero is vaak het element dat voor Largest Contentful Paint gemeten wordt. De meeste winst komt van instellingen die u één keer kiest: formaat, breedtes, kwaliteit en laadgedrag. De builder hieronder schrijft correcte markup voor die keuzes, en de checklist daarna dekt de rest.
Bepaal het formaat met de tabel: foto's naar AVIF of WebP, vlakke graphics naar SVG.
Schaal naar drie tot vijf breedtes die alles van telefoons tot grote schermen dekken.
Comprimeer elk bestand en controleer het resultaat op ware grootte op onscherpte en kleurbanden.
Genereer de markup met de builder, markeer de hero als hoge prioriteit en de rest als lazy.
Draai een snelheidstest voor de pagina en bekijk de audits over afbeeldingen om het te bevestigen.
Laad de hero of een andere afbeelding die bij de eerste paint zichtbaar is nooit lazy; web.dev waarschuwt dat dit Largest Contentful Paint vertraagt.
Stel altijd width en height in, zodat de browser ruimte reserveert en de layout niet verschuift.
Verwijder cameragegevens bij het exporteren; locatie- en apparaatgegevens voegen bytes toe en kunnen privégegevens lekken.
Gebruik een CSS-achtergrond alleen voor decoratie; inhoudelijke afbeeldingen horen in img-tags met alt-tekst.
Vergelijk kwaliteitsinstellingen met het oog op 100% zoom, want het juiste getal verschilt per encoder.
Veelgestelde vragen
WebP vs AVIF: welke moet ik gebruiken?
Beide verslaan JPEG voor foto's. AVIF is het nieuwere formaat en comprimeert vaak verder, terwijl WebP sneller codeert en al langer ondersteund wordt. Een veilig patroon is een picture-element dat eerst AVIF aanbiedt, dan WebP, en dan een JPEG in de img-tag voor alles wat ouder is.
Wat doet het sizes-attribuut?
Het vertelt de browser hoe breed de afbeelding getekend wordt, nog voordat de layout berekend is, zodat hij het juiste bestand uit srcset kan kiezen. Zonder sizes gaat een browser ervan uit dat de afbeelding de hele viewport vult en downloadt hij mogelijk een veel groter bestand dan nodig.
Moet elke afbeelding loading lazy gebruiken?
Alleen afbeeldingen onder de vouw. Lazy loading wacht tot de browser weet waar een afbeelding staat, en dat is een vertraging die u niet wilt voor iets wat mensen meteen zien.
Hoeveel moet ik comprimeren?
Verlaag de kwaliteit tot u op ware grootte net een verschil ziet en ga dan een stapje terug omhoog. Drukke foto's verbergen compressie goed; vloeiende verlopen, luchten en tekst tonen sneller artefacten.
Heb ik een plugin of dienst nodig om afbeeldingen te optimaliseren?
Nee. U kunt schalen en converteren in een editor of met een gratis tool in de browser en de markup daarna met de hand schrijven. Diensten helpen als u duizenden afbeeldingen of uploads van gebruikers automatisch moet verwerken.
Eerst het formaat
De formaatgids van web.dev vat het samen: kies vectoren als de afbeelding uit vormen en tekst bestaat, en gebruik een modern rasterformaat voor foto's. PNG bewaart elke pixel exact, wat bij screenshots past maar foto's onnodig groot maakt.
Met het picture-element biedt u nieuwe formaten aan zonder oude browsers te breken. De browser neemt de eerste source waarvan hij het type begrijpt en valt terug op de img erin.
Het juiste formaat voor elk scherm
web.dev merkt op dat afbeeldingen op desktopformaat naar telefoons sturen twee tot vier keer meer data kan kosten dan nodig, en raadt drie tot vijf formaten per afbeelding aan. Noem ze met breedtedescriptors in srcset en beschrijf de layout in sizes.
Meet de weergegeven breedte in uw layout in plaats van te gokken. Een kaart die op desktop een derde van het scherm is en op telefoons de volle breedte, heeft een sizes-waarde nodig die precies dat zegt.
Laadvolgorde
Lazy loading bespaart bandbreedte op lange pagina's, dus zet loading lazy op afbeeldingen verder naar beneden. Voeg voor de belangrijkste afbeelding boven de vouw fetchpriority high toe, zodat die vóór minder belangrijke bestanden opgevraagd wordt.
Met decoding async kan de browser tekst tekenen voordat hij klaar is met het decoderen van een grote afbeelding. Het is een hint, en browsers kunnen hem negeren.
Checklist voor het optimaliseren van afbeeldingen
Wat u controleert en waarom
Controle
Hoe
Waarom het helpt
Modern formaat
picture met AVIF- en WebP-sources
Kleinere bestanden voor hetzelfde beeld
Responsive breedtes
srcset met w-descriptors plus sizes
Telefoons slaan bestanden op desktopformaat over
Compressie
Kwaliteit met het oog afgesteld per type afbeelding
Minder bytes per pixel
Afmetingen
Attributen width en height
Voorkomt layoutverschuiving
Lazy loading
loading="lazy" alleen onder de vouw
Bespaart data op lange pagina's
Prioriteit voor de hero
fetchpriority="high" op de hoofdafbeelding
Snellere Largest Contentful Paint
Alt-tekst
Beschrijf inhoudelijke afbeeldingen; lege alt voor decoratie
Toegankelijkheid en zoeken op afbeeldingen
Markuppatronen om te kopiëren
AVIF en WebP met een JPEG als fallback
De browser gebruikt het eerste source-type dat hij ondersteunt. De img bevat de afmetingen, alt-tekst en laadhints voor elk formaat.
In bulk schalen en converteren met sharp
Een klein Node-script met het pakket sharp: elke JPEG in ./src wordt drie WebP-breedtes in ./out.
Ceder terras met ingebouwde bank bij zonsondergang
Markup-builder voor afbeeldingen
Stel de bestandsnaam, breedtes, formaten en de plek van de afbeelding op de pagina in. De builder schrijft picture- en img-markup met de juiste laadhints.