1. Classificeer de afbeelding voordat u deze optimaliseert
Maak een inventaris van afbeeldingen per template. Noteer de rol van elke afbeelding, grootste en kleinste gerenderde breedte, of deze in de initiële viewport staat en of kleine schermen een andere uitsnede nodig hebben. Dit verandert bestandsgroottewerk in beslissingen die u op belangrijke pagina's kunt testen.
Foto's verdragen vaak beoordeelde lossy-compressie. Logo's, interfacepictogrammen, lijntekeningen en grafieken kunnen geschikt zijn voor SVG of een rasterformaat dat scherpe randen beschermt. SVG is geschikt voor lijntekeningen, diagrammen en grafieken, niet voor gedetailleerde foto's.
Behoud essentiële details en voorzie tekst die het doel van de afbeelding overbrengt.
Gebruik een lege alternatieve tekst (alt=""); maak er geen enige bron van belangrijke informatie van.
Noem de actie of bestemming, niet alleen de pixels van de afbeelding.
2. Pas de grootte aan voor het gerenderde slot en bied daarna responsieve kandidaten aan
Laat de intrinsieke afmetingen overeenkomen met het CSS-slot. Een desktop-schaalbestand in een smal kaartje is verspilling; een klein raster dat te ver wordt uitgerekt wordt onscherp. Houd rekening met device pixel ratio, maar valideer visueel in plaats van aan te nemen dat elk scherm de grootste kandidaat nodig heeft.
Voor één compositie op meerdere breedtes, gebruik srcset met width-descriptors en gebruik sizes om de werkelijke slotbreedte te vermelden. De browser kiest dan een kandidaat. Gebruik picture voor art direction: een small-screen uitsnede die het onderwerp bewaart is iets anders dan simpelweg het desktopbeeld verkleinen. Houd binnen picture altijd een img-fallback met src en alt.
Zelfde compositie, verschillende pixelafmetingen.
Andere uitsnede of compositie wanneer schalen de boodschap verbergt.
Laat src op img staan voor clients die geen responsieve attributen gebruiken.
3. Kies formaat en compressie op basis van beeldkenmerken
WebP en AVIF kunnen rastertransfer verminderen in geschikte gevallen, maar formaat is geen kwaliteitsgarantie. Test representatieve gezichten, fijne textuur, merkgradients, ingebakken tekst en transparantie. JPEG blijft een veelgebruikte fotofallback; PNG kan geschikt zijn voor verliesloze rasterdetail of transparantie. Controleer AVIF-ondersteuning en operationele fit voor uw publiek en delivery stack.
Lossy-compressie verwijdert informatie om bytes te besparen en is meestal vergevingsgezinder bij gedetailleerde foto's dan bij scherpe lijnen of tekst. Lossless-compressie behoudt gecodeerde pixels, maar bespaart meestal minder. Kies kwaliteit via side-by-side review op de gerenderde grootte, niet via een gekopieerde numerieke instelling. Verwijder metadata pas nadat u rotatie, kleur en workflowbehoeften hebt bevestigd.
Vergelijk lossy AVIF, WebP en een JPEG-fallback op de weergavegrootte.
Geef de voorkeur aan geschikte SVG of bescherm scherpe rasterranden door testen.
Bevestig het uiterlijk van alpha in elk geleverd formaat en de fallback.
4. Zorg dat de markup snelheid en lay-outstabiliteit beschermt
Geef elke content img width- en height-attributen die bij zijn intrinsieke aspectratio passen. De browser kan zo ruimte reserveren voordat het bestand arriveert, waardoor lay-outbewegingen verminderen. CSS kan nog steeds de zichtbare afmetingen bepalen.
Gebruik loading=lazy alleen buiten de initiële viewport. Laad geen afbeelding lazy die waarschijnlijk zichtbaar is bij het laden, met name een Largest Contentful Paint-kandidaat. LCP is de rendertijd van de grootste afbeelding, tekstblok of video zichtbaar in de viewport. fetchpriority=high is slechts een relatieve hint; gebruik het spaarzaam en meet het resultaat. Gebruik HTML-image markup voor content die alternatieve tekst of ontdekkbaarheid nodig heeft; Google documenteert dat het CSS-afbeeldingen niet indexeert.
Stel width en height in, ook op lazy-loaded galerijafbeeldingen.
Houd waarschijnlijke LCP-afbeeldingen direct geladen en inspecteer request-prioriteit.
Laad offscreen-afbeeldingen lazy en test scrollen op een begrensde netwerkverbinding.
5. Behoud betekenis, vindbaarheid en visuele kwaliteit
Alternatieve tekst hangt af van doel en context. Beschrijf essentiële informatie voor een informatieve afbeelding, gebruik alt="" voor decoratie en benoem de functie van een gelinkte of knopafbeelding. Voor een complexe grafiek of diagram geef een equivalent in nabij tekst. Gebruik geen sleutelwoordlijsten.
Voor ontdekbare contentafbeeldingen gebruik standaard HTML-image-elementen, relevante nabije tekst, korte beschrijvende bestandsnamen waar praktisch, en een fallbackbron met responsieve markup. Maak decoratieve achtergronden niet tot redundante content alleen om ze vindbaar te maken.
Bekijk gecomprimeerde bestanden op grootste en kleinste bedoelde maten.
Geef de voorkeur aan reguliere tekst; anders bied een equivalent woordelijk aan.
Plaats informatieve afbeeldingen dicht bij relevante paginatekst.
6. Verifieer de pagina, niet alleen het bestand
Test representatieve pagina's bij smalle en brede viewports. Inspecteer in de developer tools van de browser de srcset-kandidaat, transfergrootte, gerenderde afmetingen en lay-outbeweging. Demp het netwerk om late hero-afbeeldingen en trage galerijen zichtbaar te maken. Een exportvergelijking kan een onjuiste sizes-waarde, onverwachte uitsnede of productietransformatiefout niet onthullen.
Gebruik lab- en veldsignalen waar beschikbaar. Lighthouse en PageSpeed Insights kunnen onjuist gedimensioneerde afbeeldingen identificeren; veld-LCP weerspiegelt echte bezoeken over tijd. Vergelijk hetzelfde template, apparaatklasse, releaseversie en meetvenster. Schrijf afbeeldingen niet de credit voor een metricverandering toe wanneer servertijd, scripts, lettertypen of derden ook veranderden. Staged gedeelde-template wijzigingen en behoud een rollback-pad totdat gevalideerd.
Bevestig dat het slot geen onverwacht te grote kandidaat selecteert.
Controleer uitsnede, scherpte, kleur, alternatieven en lay-outstabiliteit.
Noem de eigenaar, verwacht signaal en omkeerpunt.