Optimaliseer websitebeelden: controleer pagina voor publicatie

Eerst controleren

Begin met wat de browser downloadt

Ontwerpbestanden en mediapakketten tonen niet wat gebruikers echt krijgen. De browser toont welke afbeelding URL laadt, hoe groot deze lijkt, of de pagina ruimte reserveert en of een groot bestand wordt hergebruikt waar een klein bestand volstaat.

Afbeeldingsplan

Plan elke belangrijke afbeelding voor conversie

Een afbeeldingsplan houdt deze gids gescheiden van converter-artikelen. Het vraagt wat elk afbeeldingsgebied nodig heeft: grootte, laadvolgorde, fallback, metadata-rol en een laatste controle die bewijst dat de pagina het juiste bestand gebruikt.

Als het plan zegt dat bestanden nieuwe versies nodig hebben, gebruik dan de gids voor afbeeldingsconversie om de volgende stap te kiezen. Gebruik de JPG naar WebP gids voor normale WebP-taken en de AVIF-gids alleen voor grote foto's die nog meer besparing nodig hebben.

Afbeeldingsformaten

Stel duidelijke formaten in voor elk afbeeldingsgebied

Responsieve afbeeldingen werken alleen als de HTML overeenkomt met de lay-out. Meet het gebied, kies enkele nuttige breedtes, reserveer de beeldverhouding en vermijd het verzenden van een groot origineel alleen omdat het bestaat.

Eenvoudige controle: als een kaart van 360 px een bestand van 2400 px downloadt, is compressie niet het grootste probleem. De pagina heeft een kleinere afbeelding nodig of de HTML verwijst naar het verkeerde bestand.

Laadvolgorde

Laat de eerste afbeelding bewust laden

De afbeelding die het eerste scherm bepaalt, heeft een andere regel nodig dan afbeeldingen lager op de pagina. Vind de waarschijnlijke LCP-afbeelding, voorkom per ongeluk lazy loading en houd lagere afbeeldingen stil totdat ze nodig zijn.

1. 1

   Geef de LCP-afbeelding een naam

   Als de eerste betekenisvolle afbeelding waarschijnlijk de Largest Contentful Paint wordt, laad deze dan niet per ongeluk lazy.

2. 2

   Houd lagere afbeeldingen stil

   Afbeeldingen onder het eerste viewport gebruiken normaal gesproken lazy loading en asynchrone decodering.

3. 3

   Controleer CSS-achtergronden

   Een bijgesneden achtergrond kan nog steeds een groot bestand downloaden. Gebruik een correct formaat voor het zichtbare gebied.

4. 4

   Controleer herhaalde verzoeken

   Een kleine kaartafbeelding wordt duur als hetzelfde te grote bestand tientallen keren wordt hergebruikt.

HTML

Gebruik responsive HTML voor het gemeten gebied

Maak voor belangrijke afbeeldingen de browserkeuze duidelijk. Het voorbeeld hieronder toont breedte-opties, formaten, vaste afmetingen en een fallback. Pas het laadgedrag aan op basis van het gebied, niet uit gewoonte.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Dashboard screenshot die het uploadproces toont"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Zoeken en delen

Laat afbeeldingen, alt-tekst en metadata één verhaal vertellen

Image SEO is niet alleen het toevoegen van zoekwoorden. De zichtbare afbeelding, nabijgelegen tekst, nuttige alt-tekst, Open Graph-tags en JSON-LD afbeeldingslinks moeten dezelfde pagina duidelijk beschrijven. Decoratieve afbeeldingen blijven decoratief.

Als de controle zwakke sociale previews vindt, ga dan verder met de Open Graph-afbeeldingsgids. Als schema en meta-tags het probleem zijn, gebruik dan de Blazor metadata gids om JSON-LD en paginametadata consistent te houden.

Stappen

Een eenvoudige afbeeldingscontrole voor elke pagina

1. 1

   Open de echte pagina

   Begin bij de huidige URL, niet bij de asset-map. Noteer de afbeeldingen die daadwerkelijk laden.

2. 2

   Maak het afbeeldingsplan

   Noteer voor elke belangrijke afbeelding de doelbreedte, beeldverhouding, laadvolgorde, fallback en metadata-rol.

3. 3

   Converteer alleen wat is veranderd

   Gebruik conversietools alleen voor bestanden die de controle vond, in plaats van de hele mediabibliotheek opnieuw te exporteren.

4. 4

   Werk HTML en metadata bij

   Verwijs srcset, formaten, afmetingen, Open Graph en JSON-LD afbeeldingslinks naar de voorbereide bestanden.

5. 5

   Verifieer browseroutput

   Controleer de pagina, netwerkverzoeken, sociale metadata, gestructureerde data en mobiele lay-out.

6. 6

   Bewaar de regel voor de volgende keer

   Documenteer de afbeeldingsbeslissingen zodat toekomstige updates niet opnieuw met giswerk beginnen.

Checklist

Afbeeldingschecklist voor publicatie

Gebruik deze lijst voordat een artikel, landingspagina of productpagina live gaat. Het vangt pagina-problemen op die conversie alleen kan missen.