Inline-afbeeldingen: Regels en Voorbeelden

Een inline afbeelding is een enkele afbeelding die in de leesstroom wordt geplaatst om het punt er direct omheen te verduidelijken of te bewijzen. Het is geen galerij, promotioneel paneel of vervanging van tekst. Vraag wat de lezer kan begrijpen of verifiëren na het zien ervan dat omliggende woorden niet zo efficiënt bieden.

De gekerfde uitsparing voorkomt dat de connector in de verkeerde richting in de socket wordt gestoken.

Het weergegeven element hierboven hoort direct na een alinea die de lezer vertelt de connectororiëntatie te controleren. De uitsnede maakt de kerf zichtbaar, het bijschrift vermeldt de betekenis ervan en de volgende instructie kan doorgaan zonder dat de lezer een grote, niet-gerelateerde scène moet ontcijferen.

Waarom dit element belangrijk is

Lezers wisselen af tussen scannen en gericht inspecteren. Een goed geplaatste afbeelding verandert een abstracte beschrijving in een herkenbare vorm, toont bewijs of vermindert de inspanning die nodig is om een visuele staat voor te stellen. Plaatsing impliceert dat het nabijgelegen tekst uitlegt. Wanneer die relatie zwak is, inspecteren lezers het, vinden geen extra betekenis en moeten hun plek terugvinden.

Het relevante psychologische principe is signaleren. Uitsnede, bijschrift en omringende tekst sturen de aandacht naar het detail dat ertoe doet. Een foto van een hele machine is zwak wanneer de zin gaat over een vergrendelingslip van twee centimeter. Een gerichte uitsnede van die lip geeft de lezer één visuele vraag om te beantwoorden. De afbeelding heeft geen pijlen of ingebed proza nodig wanneer kadrering alleen het onderwerp al duidelijk kan maken.

Machine-extraheerbaarheid is het vermogen van software om een eenheid te identificeren en de relatie ervan tot nabijgelegen betekenis te behouden. Een semantische <figure> met een <img> en optionele <figcaption> geeft crawlers, ondersteunende technologie, migratietools en AI-ophaalsystemen een stabiele eenheid. Alternatieve tekst vermeldt wat de afbeelding bijdraagt; afmetingen beschrijven de geometrie; een bijschrift geeft interpretatie of herkomst weer buiten de pixels.

Machines mogen geen computervisie nodig hebben om een essentiële instructie, getal, waarschuwing of conclusie te achterhalen. Als een afbeelding een beslissende meting of label bevat, herhaal die informatie dan in nabijgelegen tekst of gebruik een gestructureerde tabel. De schrijfregels voor elementen bepalen de gedeelde directivesyntaxis, bronpaden, body-mapping en voorrang. Deze pagina heeft voorrang bij beslissingen over inline-afbeeldingsvelden, formaat, laden, bijschrift en alternatieve tekst.

Wanneer te gebruiken

Gebruik een inline afbeelding wanneer één visueel element direct één nabijgelegen idee ondersteunt en de afbeelding nuttig blijft op de breedte van de leeskolom. Geschikte toepassingen zijn het tonen van een fysiek detail, het identificeren van een plek of object, het presenteren van een eenvoudige voor-na-toestand, het geven van visueel bewijs van een geteste conditie, of het tonen van het uiterlijk van een uitvoer die geen annotaties nodig heeft.

Voer drie tests uit voordat u deze toevoegt:

1. Bijdragetest: Benoem de nieuwe informatie, het bewijs of de herkenning die de afbeelding levert.
2. Contexttest: Identificeer de exacte alinea die de afbeelding ondersteunt. Als drie secties er evenzeer aanspraak op kunnen maken, is het doel waarschijnlijk te breed.
3. Verwijderingstest: Verberg de afbeelding. Als er niets betekenisvols verloren gaat, markeer deze dan alleen als decoratief wanneer het ontwerp het echt nodig heeft; verwijder deze anders.

Bijna-goede gevallen veroorzaken de meeste verkeerde toepassingen. Gebruik een geannoteerde screenshot wanneer lezers bedieningselementen moeten vinden of meerdere genummerde gebieden moeten vergelijken. Gebruik een diagram wanneer de inhoud een relatie, volgorde of systeem is in plaats van een zichtbaar object. Gebruik een galerij wanneer meerdere gelijkwaardige afbeeldingen moeten worden bekeken. Gebruik een vergelijkingstabel wanneer verschillen afhangen van herhaalde criteria. Gebruik een imagebox wanneer een afbeelding en een uitgebreide uitleg een zelfstandige tweekolomse eenheid vormen.

Plaats geen generieke stockfoto alleen om tekst op te breken. Een handdruk bewijst geen samenwerking; een laptop verklaart geen software; een gloeilamp maakt een idee niet duidelijker. Publiceer geen tekst als afbeelding om typografie te behouden. Gebruik geen screenshot voor proza, een grafiek zonder leesbare waarden, of een afbeelding waarvan de licentie en herkomst onbekend zijn.

Waar te plaatsen

Plaats de afbeelding onmiddellijk na de alinea die introduceert wat de lezer moet inspecteren. De reden komt eerst zodat de lezer weet waar hij zijn aandacht op moet richten. Volg de figuur alleen met interpretatie wanneer de afbeelding bewijs is waarvan het gevolg niet voor de hand ligt. Plaats deze in een procedure na de relevante handeling en vóór de succescoördinatie; splits nooit een zin van zijn kwalificatie of een instructie van zijn waarschuwing.

Een inline afbeelding mag onder een H2 staan alleen wanneer de kop en eerste alinea het doel ervan bepalen. Houd de figuur, het bijschrift en de bronvermelding bij elkaar over responsieve lay-outs en pagina-einden heen.

Plaats deze niet in een alinea, lijstitem, tabelcel, callout, accordeon, aanklikbare kaart of een ander media-element. Plaats geen twee inline afbeeldingen achter elkaar: combineer echte gelijken in een galerij, of voeg de uitleg toe die hun functies onderscheidt. Deze mag niet naast een dichte tabel, video, grafiek of call-to-action staan waar beide objecten om aandacht concurreren. Houd ten minste één betekenisvolle alinea tussen afzonderlijke media-eenheden, tenzij ze één expliciet gedefinieerde vergelijking vormen.

Gebruik standaard de normale contentbreedte en een smallere presentatie voor een klein object of portret. Gebruik een goedgekeurde brede mediacontainer alleen wanneer detail anders niet leesbaar is; creëer nooit horizontaal scrollen op paginaniveau.

Anatomie

1. Figuurgrens: Groepeert het asset, bijschrift en bronvermelding als één eenheid in de documentstroom.
2. Afbeeldingsbron: Verwijst naar een goedgekeurd, bestaand asset in plaats van een externe hotlink of placeholder.
3. Alternatieve tekst: Vervangt de contextuele functie van de afbeelding voor lezers die deze niet kunnen waarnemen; deze is alleen leeg voor decoratie.
4. Intrinsieke afmetingen: Reserveren de juiste beeldverhouding voordat het bestand aankomt en voorkomen lay-outverschuivingen.
5. Responsieve kandidaten: Laat de browser een bestand van het juiste formaat kiezen in plaats van overal de grootste bron te downloaden.
6. Weergegeven formaat: Houdt het relevante detail leesbaar zonder over te lopen of een zwakke bron op te schalen.
7. Bijschrift: Voegt interpretatie, identificatie, datum, schaal of herkomst toe wanneer die informatie elke lezer helpt.
8. Bronvermelding: Registreert maker en bron wanneer licenties of redactioneel beleid dit vereisen.

De bestandsnaam van de afbeelding en de alt-tekst zijn niet uitwisselbaar. Een stabiele bestandsnaam helpt bij asset-onderhoud; contextuele alt-tekst verklaart het doel van de afbeelding in dit specifieke geval. Dezelfde foto kan daarom verschillende alt-tekst hebben wanneer deze verschillende punten ondersteunt, hoewel het hergebruiken van één afbeelding voor niet-gerelateerde punten een waarschuwingssignaal is.

Ontwerpvoorbeelden

Het element ondersteunt drie semantische varianten en twee breedtebehandelingen. Laadgedrag is geen visuele variant.

Informatieve afbeelding, contentbreedte

Dit is de standaard. De afbeelding levert herkenbaar detail of bewijs, gebruikt niet-lege alt-tekst en blijft binnen de leescontainer.

Informatieve afbeelding, breed medium

Gebruik de goedgekeurde brede container alleen wanneer een kaart, gedetailleerde foto of leesbare uitvoer meer horizontale ruimte nodig heeft. De omringende tekst behoudt de betekenis en de mobiele presentatie moet bruikbaar blijven.

Decoratieve afbeelding

Decoratie bevat geen unieke informatie, gebruikt alt="", heeft geen verklarend bijschrift en moet zeldzaam zijn in lange productiecontent. Het mag niet de enige uitdrukking zijn van stemming, status, identiteit of resultaat.

Detailafbeelding met optionele uitbreiding

Gebruik uitbreiding alleen wanneer de normale inline-weergave context biedt, maar fijn detail een grotere weergave vereist. De afbeelding zelf blijft begrijpelijk zonder de link te activeren en de toegankelijke naam van het bedieningselement beschrijft de actie.

Smal viewport-gedrag

Elke variant schaalt binnen de viewport, behoudt de beeldverhouding en houdt het bijschrift vast. Als betekenisvolle tekst onleesbaar wordt, zorg dan voor een mobiele uitsnede of vervang de afbeelding door gestructureerde tekst; knijp-om-te-zoomen forceren is niet de standaardoplossing.

Parameters

Het contract slaat redactionele en leveringsbeslissingen op. Randen, schaduwen, witruimte en breekpuntwaarden behoren tot de renderer.

De directive heeft geen titelveld: een inline afbeelding hoort bij de omringende sectie in plaats van een nieuwe sectie te creëren. De eerste body-alinea wordt toegewezen aan caption; geen eerste kop wordt geaccepteerd. Bronvermelding komt uit vertrouwde asset-metadata wanneer beschikbaar, zodat auteurs niet stilletjes licentie-informatie kunnen wijzigen.

Syntax en codevoorbeelden

De volgende drie notaties geven dezelfde bron, alternatieve tekst, intrinsieke afmetingen, formaat, bijschrift en laadintentie weer. Voorbeeld asset-paden tonen alleen het contract; productiebron moet naar een bestaand bestand verwijzen.

Draagbare Markdown-directive

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width=1600 height=1000 size=content loading=lazy}
The keyed notch allows insertion in only one orientation.
:::

De eerste alinea is het bijschrift. Extra alinea’s, koppen, lijsten, knoppen en geneste media worden afgewezen omdat ze een gerichte figuur zouden veranderen in een algemene contentcontainer.

Hugo shortcode

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width="1600" height="1000" size="content" loading="lazy" >}}
The keyed notch allows insertion in only one orientation.
{{< /inline-image >}}

Er worden uitsluitend benoemde parameters gebruikt. Dit is een draagbare adapterspecificatie, geen claim dat een lokale shortcode geregistreerd is. Zolang de adapter niet bestaat, gebruik dan de gevestigde semantische figuurimplementatie van het publicatiesysteem; voeg nooit een kapotte shortcode-aanroep toe aan productiecontent.

WordPress-blok

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Connector close-up showing the keyed notch aligned with the matching socket ridge"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">The keyed notch allows insertion in only one orientation.</figcaption>
</figure>
<!-- /wp:image -->

Gebruik metadata van de mediabibliotheek, maar beoordeel contextuele alt-tekst voor deze plaatsing. Koppel standaard niet naar de bijlagepagina.

Voorbeelden

Goed: een gerichte afbeelding beantwoordt de visuele vraag

Een installatiehandleiding zegt: “Voordat u stroom inschakelt, lijnt u de gekerfde uitsparing uit met de socketrichel; het forceren van de connector kan de pinnen buigen.” Vervolgens plaatst het deze figuur:

De kerf en richel worden uitgelijnd voordat het vergrendelingslipje kan aangrijpen.

Dit werkt omdat de afbeelding komt nadat de reden om te inspecteren is gegeven, de uitsnede beide bijpassende kenmerken bevat, en het bijschrift de relatie uitlegt in plaats van “connectorafbeelding” te zeggen. De instructie en het gevolg blijven in tekst staan. Intrinsieke afmetingen voorkomen beweging tijdens het laden, en de afbeelding kan lazy-geladen worden omdat deze ruim onder het eerste viewport verschijnt.

Slecht: decoratie onderbreekt zonder uitleg

Een artikel over het configureren van analytics plaatst een full-color stockfoto van een persoon naar kleurrijke grafieken te kijken tussen een stap en de waarschuwing ervan. De alt-tekst zegt “analytics dashboard SEO optimalisatie rapportage data,” de bron is 5000 pixels breed, er zijn geen afmetingen gedeclareerd en het bestand laadt eager halverwege de pagina.

De afbeelding is slecht omdat deze geen configuratietoestand bewijst, een risicovolle actie scheidt van de waarschuwing, trefwoorden in alt-tekst stopt, meer pixels downloadt dan de lay-out kan gebruiken, en de waarschuwing kan verschuiven wanneer de hoogte bekend wordt. Verwijder deze. Als de echte interface een dubbelzinnig bedieningselement bevat, vervang het dan door een gerichte, actuele screenshot en houd de waarschuwing bij de actie.

Schema-markup en toegankelijkheid

Een inline afbeelding creëert standaard geen speciale schema-entiteit. Een betekenisvolle afbeelding kan de image-eigenschap leveren van Article, HowTo, Product, Review of een andere geschikte entiteit. Gebruik ImageObject alleen met een stabiele contentUrl en waarheidsgetrouwe beschikbare metadata zoals bijschrift, afmetingen, maker en licentie. Markeer geen decoratie of onbevestigde rechten.

Goede alt-tekst beschrijft de functie in context, niet elk zichtbaar object. Vraag welke zin de afbeelding zou vervangen als deze niet kon laden. “Connector close-up showing the keyed notch aligned with the matching socket ridge” is nuttig in een installatiehandleiding. “Een zwart en zilver object op een grijze achtergrond” is visueel letterlijk maar functioneel zwak. Vermijd “afbeelding van” en “foto van” tenzij het medium zelf ertoe doet, zoals het onderscheiden van een foto van een simulatie.

Elke <img> heeft een alt-attribuut nodig. Gebruik niet-lege tekst voor informatieve afbeeldingen en alt="" voor decoratie. Het weglaten van het attribuut is niet gelijkwaardig: sommige schermlezers kondigen de bestandsnaam aan. Plaats geen essentieel proza, instructies, citaten of lange datareeksen in pixels. Als zichtbare tekst in de afbeelding ertoe doet, herhaal deze dan in de omringende content.

Gebruik <figure> en <figcaption> wanneer een bijschrift bij de afbeelding hoort. Voeg geen figuurrol handmatig toe. Een uitbreidbare afbeelding heeft een zichtbaar, met toetsenbord bedienbaar bedieningselement nodig met een beschrijvende naam, voorspelbare focusbeweging, Escape-ondersteuning wanneer het een modaal opent, en toegang tot dezelfde alt-tekst en hetzelfde bijschrift op het vergrote formaat. Wikkel niet elke afbeelding in een ongelabelde link naar het bronbestand.

Responsieve levering maakt deel uit van afbeelding SEO en toegankelijkheid omdat het content beschikbaar maakt zonder onnodige vertraging. Gebruik srcset en sizes of een equivalente afbeeldingspijplijn zodat responsief ontwerp een geschikte kandidaat kan selecteren. Behoud de beeldverhouding, stel intrinsieke width en height in en beperk de weergegeven maximale breedte tot de container. Deze afmetingen reserveren ruimte en verminderen Cumulative Layout Shift , de beweging van pagina-inhoud terwijl resources laden.

Lazy loading stelt een resource buiten beeld uit tot de lezer er dichtbij komt. Gebruik loading="lazy" voor afbeeldingen onder het initiële viewport. Laad een afbeelding die waarschijnlijk direct zichtbaar is niet lazy, omdat de vertraging ervoor kan zorgen dat de grootste zichtbare content later aankomt. Gebruik eager loading en fetchpriority="high" alleen wanneer meting en template-positie de afbeelding identificeren als een waarschijnlijk primair asset boven de vouw; meerdere afbeeldingen met hoge prioriteit verslaan het signaal.

Schrijfregels

De tekst rond een inline afbeelding doet het meeste interpretatieve werk, dus beknoptheid in het element betekent niet vaagheid.

• Introduceer de reden vóór de figuur in één nabijgelegen alinea. Gebruik geen coördinaattaal zoals “hieronder” wanneer responsieve of gesyndiceerde lay-outs het asset kunnen verplaatsen.
• Schrijf informatieve alt-tekst voor de functie van de afbeelding in deze exacte context. Streef naar 40–160 tekens; gebruik maximaal 250 alleen wanneer complexiteit dit echt vereist.
• Houd bijschriften op 5–30 woorden en bij voorkeur één zin. Identificeer, interpreteer, dateer, schaal of vermeld de bron van de afbeelding; herhaal niet alleen de alt-tekst.
• Toon één primair onderwerp of relatie. Als de lezer meer dan drie onafhankelijke gebieden moet inspecteren, gebruik dan een geannoteerde screenshot, diagram, tabel of galerij.
• Gebruik Amerikaanse spelling, duidelijke taal en dezelfde terminologie als de omringende sectie. Alternatieve tekst is geen trefwoordveld.
• Houd alle essentiële instructies, waarschuwingen, metingen, prijzen, data en conclusies in HTML-tekst, zelfs wanneer ze ook in de pixels voorkomen.
• Plaats nooit koppen, meerdere alinea’s, lijsten, tabellen, knoppen, formulieren, video, audio of een andere afbeelding in de element-body.
• Gebruik nooit een leeg bijschrift om witruimte te creëren, een verzonnen bronvermelding, een externe hotlink, een niet-gelicentieerd asset, klantgegevens zonder toestemming of een niet-bestaand placeholderpad.
• Rek, vervorm of schaal nooit een afbeelding op om een ontwerpslot te vullen. Snijd alleen bij wanneer de uitsnede het bewijs en de context die de tekst bespreekt, behoudt.

Posttypes die het gebruiken

De postTypes-array in de frontmatter is de canonieke koppeling. Een posttype mag de vereiste aanscherpen, maar verandert het veld of toegankelijkheidscontract van het element niet.

QA-checklist

• Doel: De beoordelaar kan de unieke informatie, het bewijs of de herkenning benoemen die de afbeelding toevoegt.
• Plaatsing: De voorgaande alinea stelt vast wat te inspecteren, en geen waarschuwing, kwalificatie of citaat is gescheiden van de bewering.
• Correct element: Een enkele inline afbeelding is geschikter dan een geannoteerde screenshot, galerij, diagram, tabel of imagebox.
• Validiteit van asset: De bron bestaat, gebruikt een goedgekeurd formaat en root-relatief pad, en heeft geverifieerde rechten en herkomst.
• Privacy: De afbeelding bevat geen niet-goedgekeurde klantgegevens, namen, e-mailadressen, tokens, browserdetails of locatieaanwijzingen.
• Uitsnede en kwaliteit: Het onderwerp blijft leesbaar op weergegeven en mobiele breedtes zonder vervorming, vermijdbare lege ruimte of destructieve compressie.
• Alternatieve tekst: Het alt-attribuut is aanwezig en ofwel contextueel informatief ofwel bewust leeg voor decoratie; het is geen bestandsnaam, bijschriftduplicaat of trefwoordenlijst.
• Bijschrift: Indien aanwezig, voegt het identificatie, interpretatie, datum, schaal of herkomst toe in 5–30 woorden.
• Afmetingen: Intrinsieke breedte en hoogte komen overeen met de bronverhouding en reserveren stabiele lay-outruimte.
• Responsieve levering: Kandidaatformaten komen overeen met realistische weergavebreedtes; de grootste bron wordt niet standaard naar elke viewport gestuurd.
• Laden: Afbeeldingen onder de vouw worden lazy-geladen; initieel zichtbare afbeeldingen worden niet lazy-geladen; hoge fetch-prioriteit is beperkt tot een gemeten primaire kandidaat.
• Mobiel gedrag: De afbeelding past zonder horizontaal scrollen op paginaniveau en het betekenisvolle detail blijft leesbaar zonder geforceerd zoomen.
• Tekst-terugval: Essentiële instructies, waarschuwingen, metingen en conclusies bestaan in paginatekst in plaats van alleen in pixels.
• Gestructureerde data: Eventuele schema-eigenschappen zijn accuraat, ondersteund door zichtbare content en weggelaten voor decoratie.
• Draagbare gelijkwaardigheid: Markdown, Hugo en WordPress behouden dezelfde bron, alt-tekst, afmetingen, bijschrift, bronvermelding en laadintentie.
• Openstaande opnames: Geen niet-bestaand pad wordt weergegeven; elk gevraagd voorbeeld blijft een SCREENSHOT-commentaar zolang screenshotsPending = true.

FAQ

De academy-template geeft de vijf beoordeelde vragen weer die zijn opgeslagen in de [[faq]]-frontmatter van deze pagina. Ze behandelen alternatieve tekst, lazy loading, bijschriften, formaat en de beslissing om een afbeelding te verwijderen die niets toevoegt.