Inline-billeder: Regler og eksempler

Et inline-billede er et enkelt billede placeret i læseflowet for at tydeliggøre eller bevise det punkt, der er umiddelbart omkring det. Det er ikke et galleri, en reklameblok eller en erstatning for tekst. Spørg, hvad læseren kan forstå eller verificere efter at have set det, som nærliggende ord ikke leverer lige så effektivt.

Den kileformede not forhindrer stikket i at gå ind i soklen i den forkerte orientering.

Det gengivne element ovenfor hører til umiddelbart efter et afsnit, der fortæller læseren at tjekke stikkets orientering. Beskæringen gør noten synlig, billedteksten angiver dens betydning, og den følgende instruktion kan fortsætte uden at bede læseren om at afkode en stor, uafhængig scene.

Hvorfor dette element er vigtigt

Læsere veksler mellem scanning og fokuseret inspektion. Et velplaceret billede gør en abstrakt beskrivelse til en genkendelig form, viser beviser eller reducerer indsatsen, der kræves for at forestille sig en visuel tilstand. Placering antyder, at det forklarer nærliggende tekst. Når den relation er svag, inspicerer læsere det, finder ingen yderligere betydning og må genfinde deres plads i teksten.

Det relevante psykologiske princip er signalering. Beskæring, billedtekst og omgivende tekst leder opmærksomheden mod den detalje, der betyder noget. Et fotografi af en hel maskine er svagt, når sætningen handler om en to centimeter lang låsetap. En fokuseret beskæring af den tap giver læseren ét visuelt spørgsmål at besvare. Billedet har ikke brug for pile eller indlejret prosa, når indramning alene kan gøre motivet tydeligt.

Maskinekstraherbarhed er evnen hos software til at identificere en enhed og bevare dens relation til nærliggende betydning. En semantisk <figure> indeholdende et <img> og valgfrit <figcaption> giver crawlere, hjælpeteknologi, migreringsværktøjer og AI-genfindingssystemer en stabil enhed. Alternativ tekst angiver, hvad billedet bidrager med; dimensioner beskriver dets geometri; en billedtekst eksponerer fortolkning eller oprindelse uden for pixels.

Masker må ikke have brug for computersyn for at gendanne en essentiel instruktion, et tal, en advarsel eller en konklusion. Hvis et billede indeholder en afgørende måling eller et mærkat, gentag da den information i nærliggende tekst eller brug en struktureret tabel. Skrivereglerne for elementer styrer den fælles direktivsyntaks, kilde-stier, brødtekstmapping og forrang. Denne side har forrang for inline-billedefelter, størrelse, indlæsning, billedtekst og alternativ-tekst-beslutninger.

Hvornår skal det bruges

Brug et inline-billede, når ét visuelt element direkte understøtter én nærliggende idé, og billedet forbliver brugbart i læsespal tens bredde. Passende opgaver inkluderer at vise en fysisk detalje, identificere et sted eller objekt, præsentere en simpel før-eller-efter-tilstand, give visuelt bevis for en testet tilstand eller demonstrere udseendet af et output, der ikke kræver annotationer.

Kør tre tests, før du tilføjer det:

1. Bidragstest: Navngiv den nye information, det bevis eller den genkendelse, billedet leverer.
2. Konteksttest: Identificer det præcise afsnit, billedet understøtter. Hvis tre sektioner lige så godt kunne hævde det, er dets formål sandsynligvis for bredt.
3. Fjernelsestest: Skjul billedet. Hvis intet meningsfuldt går tabt, marker det da kun som dekorativt, når designet virkelig har brug for det; fjern det ellers.

Næsten-korrekte tilfælde forårsager de fleste fejlbrug. Brug en annoteret skærmdump, når læsere skal finde kontroller eller matche flere nummererede områder. Brug et diagram, når indholdet er en relation, sekvens eller et system snarere end et synligt objekt. Brug et galleri, når flere sideordnede billeder skal gennemses. Brug en sammenligningstabel, når forskelle afhænger af gentagne kriterier. Brug en imagebox, når et billede og en væsentlig forklaring udgør en selvstændig to-spaltet enhed.

Indsæt ikke et generisk stockfotografi blot for at bryde teksten. Et håndtryk beviser ikke et partnerskab; en bærbar computer forklarer ikke software; en pære gør ikke en idé klarere. Publicér ikke tekst som et billede for at bevare typografien. Brug ikke en skærmdump til prosa, et diagram uden læselige værdier eller et billede, hvis licens og oprindelse er ukendt.

Hvor skal det placeres

Placer billedet umiddelbart efter det afsnit, der introducerer, hvad læseren bør inspicere. Årsagen kommer først, så læseren ved, hvor opmærksomheden skal rettes. Følg figuren med fortolkning kun, når billedet er bevis, hvis konsekvens ikke er indlysende. I en procedure placeres det efter den relevante handling og før successkontrollen; del aldrig en sætning fra dens kvalifikation eller en instruktion fra dens advarsel.

Et inline-billede må sidde under en H2 kun, når overskriften og første afsnit etablerer dets formål. Hold figuren, billedteksten og kredit sammen på tværs af responsive layouts og sideskift.

Placer det ikke inde i et afsnit, listeelement, tabelcelle, callout, accordion, klikbart kort eller et andet medieelement. Sæt ikke to inline-billeder efter hinanden: kombiner ægte sideordnede billeder i et galleri, eller tilføj den forklaring, der adskiller deres funktioner. Det må ikke sidde ved siden af en tæt tabel, video, diagram eller call-to-action, hvor begge objekter konkurrerer om opmærksomheden. Hold mindst ét meningsfuldt afsnit mellem separate medieenheder, medmindre de udgør én eksplicit defineret sammenligning.

Brug normal indholdsbredde som standard og en smallere præsentation til et lille objekt eller portræt. Brug en godkendt bred-medie-beholder kun, når detaljer ellers ikke kan læses; skab aldrig horisontal scrolling på sideniveau.

Anatomi

1. Figur-grænse: Grupperer asset, billedtekst og kredit som én enhed i dokumentflowet.
2. Billedkilde: Henviser til et godkendt, eksisterende asset snarere end et eksternt hotlink eller pladsholder.
3. Alternativ tekst: Erstatter billedets kontekstuelle funktion for læsere, der ikke kan opfatte det; den er kun tom for dekoration.
4. Indre dimensioner: Reserverer det korrekte aspektforhold, før filen ankommer, og forhindrer layoutforskydning.
5. Responsive kandidater: Lad browseren vælge en passende filstørrelse i stedet for at downloade den største kilde overalt.
6. Gengiven størrelse: Holder den relevante detalje læselig uden at flyde over eller opskalere en svag kilde.
7. Billedtekst: Tilføjer fortolkning, identifikation, dato, skala eller oprindelse, når den information hjælper alle læsere.
8. Kredit: Registrerer skaber og kilde, når licens eller redaktionel politik kræver det.

Billedets filnavn og alternativ tekst kan ikke erstattes med hinanden. Et stabilt filnavn hjælper med asset-vedligeholdelse; kontekstuel alternativ tekst forklarer billedets formål i denne forekomst. Det samme fotografi kan derfor have forskellig alternativ tekst, når det understøtter forskellige pointer, selvom genbrug af ét billede til uafhængige pointer er et advarselstegn.

Designeksempler

Elementet understøtter tre semantiske varianter og to breddebehandlinger. Indlæsningsadfærd er ikke en visuel variant.

Informativt billede, indholdsbredde

Dette er standarden. Billedet bidrager med genkendelige detaljer eller beviser, bruger ikke-tom alternativ tekst og holder sig inden for læsebeholderen.

Informativt billede, bredt medie

Brug den godkendte brede beholder kun, når et kort, detaljeret fotografi eller læsbart output har brug for mere horisontal plads. Den omgivende tekst ejer stadig betydningen, og mobilpræsentationen skal forblive brugbar.

Dekorativt billede

Dekoration bærer ingen unik information, bruger alt="", har ingen forklarende billedtekst og bør være sjælden i langt produktionindhold. Det må ikke være det eneste udtryk for stemning, status, identitet eller resultat.

Detaljebillede med valgfri udvidelse

Brug udvidelse kun, når den normale inline-gengivelse etablerer kontekst, men fine detaljer kræver en større visning. Selve billedet forbliver forståeligt uden at aktivere linket, og kontrollens tilgængelige navn beskriver handlingen.

Smal viewport-adfærd

Hver variant skaleres ned inden for viewporten, bevarer aspektforholdet og holder billedteksten tilknyttet. Hvis meningsfuld tekst bliver ulæselig, skal du levere en mobilbeskæring eller erstatte billedet med struktureret tekst; at tvinge knib-og-zoom er ikke standardløsningen.

Parametre

Kontrakten lagrer redaktionelle og leveringsmæssige beslutninger. Kanter, skygger, afstande og breakpoint-værdier tilhører renderingsprogrammet.

Direktivet har intet titelfelt: et inline-billede hører til den omgivende sektion snarere end at oprette en ny sektion. Dets første brødtekstafsnit mappes til caption; ingen førstegradsoverskrift accepteres. Kredit kommer fra betroet asset-metadata, når tilgængeligt, hvilket forhindrer forfattere i stille at ændre licensinformation.

Syntaks og kodeeksempler

De følgende tre notationer mappes til samme kilde, alternative tekst, indre dimensioner, størrelse, billedtekst og indlæsningshensigt. Eksempel-asset-stier demonstrerer kun kontrakten; produktionskilde skal henvise til en eksisterende fil.

Bærbar Markdown-direktiv

:::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.
:::

Det første afsnit er billedteksten. Yderligere afsnit, overskrifter, lister, knapper og indlejrede medier afvises, fordi de ville forvandle en fokuseret figur til en generel indholdsbeholder.

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 >}}

Navngivne parametre bruges udelukkende. Dette er en bærbar adapterspecifikation, ikke en påstand om, at en lokal shortcode er registreret. Indtil adapteren eksisterer, brug udgivelsessystemets etablerede semantiske figur-implementering; tilføj aldrig et ødelagt shortcode-kald til produktionindhold.

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 -->

Brug medie-biblioteksmetadata, men gennemgå kontekstuel alternativ tekst for denne placering. Link ikke til vedhæftningssiden som standard.

Eksempler

Godt: et fokuseret billede besvarer det visuelle spørgsmål

En installationsvejledning siger: “Før strøm tilsluttes, juster den kileformede not med soklens rille; at tvinge stikket kan bøje benene.” Den placerer derefter denne figur:

Noten og rillen justeres, før låsetappen kan gå i indgreb.

Dette virker, fordi billedet ankommer efter grunden til at inspicere det, beskæringen indeholder begge matchende træk, og billedteksten forklarer relationen i stedet for at sige “stikbillede”. Instruktionen og konsekvensen forbliver i tekst. Indre dimensioner forhindrer forskydning under indlæsning, og billedet kan lazy-loades, fordi det vises langt under det første viewport.

Dårligt: dekoration afbryder uden at forklare

En artikel om konfiguration af analyseindsætter et fuldbredt stockfotografi af en person, der kigger på farverige diagrammer, mellem et trin og dets advarsel. Dens alternativ tekst siger “analytics dashboard SEO optimization reporting data”, kilden er 5000 pixels bred, ingen dimensioner er angivet, og filen indlæses eager halvvejs nede på siden.

Billedet er dårligt, fordi det beviser ingen konfigurationstilstand, adskiller en risikabel handling fra dens advarsel, propper søgeord ind i alternativ tekst, downloader flere pixels end layoutet kan bruge, og kan flytte advarslen, når dets højde bliver kendt. Fjern det. Hvis den rigtige grænseflade indeholder en tvetydig kontrol, erstattes den med et fokuseret, aktuelt skærmbillede, og advarslen holdes knyttet til handlingen.

Skema-markup og tilgængelighed

Et inline-billede opretter ingen særlig skema-entitet som standard. Et meningsfuldt billede kan levere image-egenskaben for Article, HowTo, Product, Review eller en anden passende entitet. Brug ImageObject kun med en stabil contentUrl og sandfærdige tilgængelige metadata såsom billedtekst, dimensioner, skaber og licens. Markér ikke dekoration eller ubekræftede rettigheder.

God alternativ tekst beskriver funktion i kontekst, ikke alle synlige objekter. Spørg, hvilken sætning der ville erstatte billedet, hvis det ikke kunne indlæses. “Connector close-up showing the keyed notch aligned with the matching socket ridge” er nyttig i en installationsvejledning. “A black and silver object on a gray background” er visuelt bogstavelig men funktionelt svag. Undgå “billede af” og “foto af”, medmindre mediet i sig selv betyder noget, såsom at skelne et fotografi fra en simulering.

Hvert <img> har brug for en alt-attribut. Brug ikke-tom tekst til informative billeder og alt="" til dekoration. At udelade attributten er ikke det samme: nogle skærmlæsere annoncerer filnavnet. Placer ikke væsentlig prosa, instruktioner, citater eller lange dataserier inde i pixels. Hvis synlig tekst i billedet betyder noget, gentag den i det omgivende indhold.

Brug <figure> og <figcaption>, når en billedtekst hører til billedet. Tilføj ikke en figur-rolle manuelt. Et udvideligt billede har brug for en synlig, tastaturbetjenbar kontrol med et beskrivende navn, forudsigelig fokusbevægelse, Escape-understøttelse, når det åbner en modal, og adgang til samme alternativ tekst og billedtekst i den forstørrede størrelse. Indpak ikke hvert billede i et umærket link til kildefilen.

Responsiv levering er en del af billed-SEO og tilgængelighed, fordi det gør indhold tilgængeligt uden unødig forsinkelse. Brug srcset og sizes eller en tilsvarende billedpipeline, så responsivt design kan vælge en passende kandidat. Bevar aspektforhold, angiv indre width og height, og begræns den gengivne maksimumsbredde til dens beholder. Disse dimensioner reserverer plads og reducerer Cumulative Layout Shift , forskydningen af sideindhold mens ressourcer indlæses.

Lazy loading udskyder en ressource uden for skærmen, indtil læseren nærmer sig den. Brug loading="lazy" til billeder under det indledende viewport. Lazy-load ikke et billede, der sandsynligvis vises med det samme, fordi forsinkelsen kan få det største synlige indhold til at ankomme senere. Brug eager loading og fetchpriority="high" kun, når måling og skabelonposition identificerer billedet som et sandsynligt primært asset over folden; flere højprioritetsbilleder neutraliserer signalet.

Skriveregler

Skriften omkring et inline-billede udfører størstedelen af det fortolkende arbejde, så kortfattethed i elementet betyder ikke vaghed.

• Introducér grunden før figuren i ét nærliggende afsnit. Brug ikke koordinatsprog som “nedenfor”, når responsive eller syndikerede layouts kan flytte asset’et.
• Skriv informativ alternativ tekst for billedets funktion i denne præcise kontekst. Mål 40–160 tegn; brug op til 250 kun, når kompleksitet virkelig kræver det.
• Hold billedtekster på 5–30 ord og én sætning, når det er muligt. Identificer, fortolk, datér, skaler eller kreditér billedet; gentag ikke blot den alternative tekst.
• Vis ét primært emne eller relation. Hvis læseren skal inspicere mere end tre uafhængige områder, brug da en annoteret skærmdump, diagram, tabel eller galleri.
• Brug amerikansk stavning, klart sprog og samme terminologi som den omgivende sektion. Alternativ tekst er ikke et søgeordsfelt.
• Hold alle essentielle instruktioner, advarsler, målinger, priser, datoer og konklusioner i HTML-tekst, selv når de også forekommer i pixels.
• Placer aldrig overskrifter, flere afsnit, lister, tabeller, knapper, formularer, video, lyd eller et andet billede inde i elementets brødtekst.
• Brug aldrig en tom billedtekst til at skabe mellemrum, en opfundet kredit, et eksternt hotlink, et ikke-licenseret asset, kundedata uden tilladelse eller en ikke-eksisterende pladsholder-sti.
• Stræk, forvrid eller opskaler aldrig et billede for at fylde en designplads. Beskær kun, når beskæringen bevarer det bevis og den kontekst, teksten diskuterer.

Indlægstyper, der bruger det

postTypes-arrayet i frontmatter er den kanoniske sammenkobling. En indlægstype kan indsnævre kravet, men ændrer ikke elementets felt- eller tilgængelighedskontrakt.

QA-tjekliste

• Formål: Anmelderen kan angive den unikke information, det bevis eller den genkendelse, billedet tilføjer.
• Placering: Det foregående afsnit etablerer, hvad der skal inspiceres, og ingen advarsel, kvalifikation eller kildeangivelse er blevet adskilt fra sin påstand.
• Korrekt element: Et enkelt inline-billede er mere passende end en annoteret skærmdump, galleri, diagram, tabel eller imagebox.
• Asset-gyldighed: Kilden findes, bruger et godkendt format og rodrelativ sti, og har verificerede rettigheder og oprindelse.
• Privatliv: Billedet indeholder ingen uautoriserede kundedata, navne, e-mailadresser, tokens, browserdetaljer eller stedangivelser.
• Beskæring og kvalitet: Motivet forbliver læseligt ved gengiven og mobil bredde uden forvrængning, undgåelig tom plads eller destruktiv komprimering.
• Alternativ tekst: alt-attributten er til stede og enten kontekstuelt informativ eller bevidst tom for dekoration; den er ikke et filnavn, en dublet af billedteksten eller en søgeordsliste.
• Billedtekst: Når den er til stede, tilføjer den identifikation, fortolkning, dato, skala eller oprindelse på 5–30 ord.
• Dimensioner: Indre bredde og højde matcher kildeforholdet og reserverer stabilt layoutplads.
• Responsiv levering: Kandidatstørrelser matcher realistiske skærmbredder; den største kilde sendes ikke til alle viewports som standard.
• Indlæsning: Billeder under folden lazy-loades; indledningsvis synlige billeder gør ikke; høj fetch-prioritet er begrænset til en målt primær kandidat.
• Mobiladfærd: Billedet passer uden horisontal scrolling på sideniveau, og dets meningsfulde detalje forbliver læselig uden tvungen zoom.
• Tekst-fallback: Essentielle instruktioner, advarsler, målinger og konklusioner findes i sidetekst snarere end kun i pixels.
• Strukturerede data: Eventuelle skema-egenskaber er nøjagtige, understøttet af synligt indhold og udeladt for dekoration.
• Bærbar paritet: Markdown, Hugo og WordPress bevarer samme kilde, alternative tekst, dimensioner, billedtekst, kredit og indlæsningshensigt.
• Afventende optagelser: Ingen ikke-eksisterende sti renderes; hvert anmodet eksempel forbliver en SCREENSHOT-kommentar, mens screenshotsPending = true.

FAQ

Akademi-skabelonen renderer de fem gennemgåede spørgsmål gemt i denne sides [[faq]]-frontmatter. De dækker alternativ tekst, lazy loading, billedtekster, størrelse og beslutningen om at fjerne et billede, der intet tilføjer.