Innebygde bilder: Regler og eksempler

Et innebygd bilde er et enkeltbilde plassert inne i leseflyten for å tydeliggjøre eller bevise poenget rundt det. Det er ikke et galleri, en reklameflate eller en erstatning for tekst. Spør hva leseren kan forstå eller bekrefte etter å ha sett det, som nærliggende ord ikke gir like effektivt.

Det utformede hakket hindrer kontakten i å settes inn i sokkel i feil retning.

Det gjengitte elementet over hører hjemme rett etter et avsnitt som ber leseren sjekke kontaktens retning. Beskjæringen gjør hakket synlig, bildeteksten angir betydningen, og den følgende instruksjonen kan fortsette uten å be leseren om å tolke en stor, urelatert scene.

Hvorfor dette elementet er viktig

Lesere veksler mellom skumlesing og fokusert inspeksjon. Et godt plassert bilde gjør en abstrakt beskrivelse til en gjenkjennelig form, viser bevis, eller reduserer innsatsen som trengs for å forestille seg en visuell tilstand. Plassering innebærer at det forklarer nærliggende tekst. Når forholdet er svakt, undersøker leserne det, finner ingen ekstra mening, og må finne tilbake til der de var.

Det relevante psykologiske prinsippet er signalering. Beskjæring, bildetekst og omkringliggende tekst retter oppmerksomheten mot detaljen som betyr noe. Et fotografi av en hel maskin er svakt når setningen handler om en to centimeter stor låsefane. En fokusert beskjæring av den fanen gir leseren ett visuelt spørsmål å besvare. Bildet trenger ikke piler eller innebygd prosa når innramming alene kan gjøre motivet tydelig.

Maskinuttrekkbarhet er evnen programvare har til å identifisere en enhet og bevare forholdet til nærliggende mening. En semantisk <figure> som inneholder et <img> og valgfri <figcaption> gir søkeroboter, hjelpeteknologi, migreringsverktøy og KI-baserte gjenfinningssystemer en stabil enhet. Alternativ tekst angir hva bildet bidrar med; dimensjoner beskriver geometrien; en bildetekst avdekker tolkning eller opprinnelse utenfor pikslene.

Maskiner må ikke trenge datasyn for å gjenopprette en essensiell instruksjon, et tall, en advarsel eller en konklusjon. Hvis et bilde inneholder en avgjørende måling eller etikett, gjenta den informasjonen i nærliggende tekst eller bruk en strukturert tabell. Skrivereglene for elementer styrer den delte direktivsyntaksen, kildebaner, kroppskartlegging og prioritet. Denne siden har forrang for beslutninger om innebygde bilder, størrelse, innlasting, bildetekst og alternativ tekst.

Når du skal bruke det

Bruk et innebygd bilde når ett visuelt element direkte støtter én nærliggende idé, og bildet forblir nyttig i lesekolonnens bredde. Passende oppgaver inkluderer å vise en fysisk detalj, identifisere et sted eller objekt, presentere en enkel før-eller-etter-tilstand, gi visuelt bevis på en testet tilstand, eller demonstrere utseendet til et resultat som ikke krever merknader.

Kjør tre tester før du legger det til:

1. Bidragstest: Nevn den nye informasjonen, beviset eller gjenkjennelsen bildet gir.
2. Konteksttest: Identifiser det nøyaktige avsnittet bildet støtter. Hvis tre seksjoner like gjerne kunne kreve det, er formålet trolig for bredt.
3. Fjerningstest: Skjul bildet. Hvis ingenting meningsfylt går tapt, merk det som dekorativt kun når designet faktisk trenger det; fjern det ellers.

De fleste feilbruk skyldes nesten-riktige tilfeller. Bruk en merket skjermdump når lesere må finne kontroller eller matche flere nummererte områder. Bruk et diagram når innholdet er et forhold, en sekvens eller et system snarere enn et synlig objekt. Bruk et galleri når flere likeverdige bilder må kunne blas gjennom. Bruk en sammenligningstabell når forskjeller avhenger av gjentatte kriterier. Bruk en imagebox når et bilde og en omfattende forklaring utgjør en selvstendig to-spaltet enhet.

Ikke sett inn et generisk arkivfoto bare for å bryte opp teksten. Et håndtrykk beviser ikke et partnerskap; en bærbar datamaskin forklarer ikke programvare; en lyspære gjør ikke en idé tydeligere. Ikke publiser tekst som bilde for å bevare typografi. Ikke bruk en skjermdump for prosa, et diagram uten lesbare verdier, eller et bilde med ukjent lisens og opprinnelse.

Hvor du skal plassere det

Plasser bildet umiddelbart etter avsnittet som introduserer hva leseren bør undersøke. Grunnen kommer først slik at leseren vet hvor oppmerksomheten skal rettes. Følg figuren med tolkning kun når bildet er bevis hvis konsekvens ikke er åpenbar. I en prosedyre, plasser det etter den relevante handlingen og før suksessjekken; splitt aldri en setning fra sin kvalifikasjon eller en instruksjon fra sin advarsel.

Et innebygd bilde kan plasseres under en H2 bare når overskriften og første avsnitt etablerer formålet. Hold figuren, bildeteksten og krediteringen samlet på tvers av responsive oppsett og sideskift.

Ikke plasser det inni et avsnitt, listeelement, tabellcelle, utheving, accordion, klikkbart kort eller et annet medieelement. Ikke sett to innebygde bilder rett etter hverandre: slå sammen likeverdige bilder til et galleri, eller legg til forklaringen som skiller deres roller. Det må ikke plasseres ved siden av en tett tabell, video, diagram eller handlingsknapp der begge objektene konkurrerer om oppmerksomheten. Hold minst ett meningsfylt avsnitt mellom separate medieenheter med mindre de utgjør én eksplisitt definert sammenligning.

Bruk normal innholdsbredde som standard og en smalere presentasjon for et lite objekt eller stående format. Bruk en godkjent bred mediebeholder bare når detaljer ikke kan leses ellers; skap aldri horisontal rulling på sidenivå.

Anatomi

1. Figurramme: Grupperer aktivet, bildetekst og kreditering som én enhet i dokumentflyten.
2. Bildekilde: Peker til et godkjent, eksisterende aktiv snarere enn en ekstern hotlink eller plassholder.
3. Alternativ tekst: Erstatter bildets kontekstuelle funksjon for lesere som ikke kan oppfatte det; den er kun tom for dekorasjon.
4. Intrinsiske dimensjoner: Reserverer riktig sideforhold før filen ankommer og forhindrer layoutbevegelse.
5. Responsive kandidater: Lar nettleseren velge en fil i passende størrelse i stedet for å laste ned den største kilden overalt.
6. Gjengitt størrelse: Holder relevant detalj lesbar uten å flyte over eller skalere opp en svak kilde.
7. Bildetekst: Legger til tolkning, identifikasjon, dato, målestokk eller opprinnelse når den informasjonen hjelper alle lesere.
8. Kreditering: Registrerer skaper og kilde når lisensiering eller redaksjonell policy krever det.

Bildets filnavn og alternative tekst kan ikke byttes om. Et stabilt filnavn hjelper aktivvedlikehold; kontekstuell alternativ tekst forklarer bildets formål i denne forekomsten. Det samme fotografiet kan derfor ha forskjellig alternativ tekst når det støtter ulike poenger, selv om gjenbruk av ett bilde for urelaterte poenger er et faresignal.

Designeksempler

Elementet støtter tre semantiske varianter og to breddebehandlinger. Innlastingsatferd er ikke en visuell variant.

Informativt bilde, innholdsbredde

Dette er standarden. Bildet bidrar med gjenkjennelig detalj eller bevis, bruker ikke-tom alternativ tekst, og holder seg innenfor lesebeholderen.

Informativt bilde, bred mediebredde

Bruk den godkjente brede beholderen bare når et kart, detaljert fotografi eller lesbart resultat trenger mer horisontal plass. Den omkringliggende teksten eier fortsatt meningen, og mobilpresentasjonen må forbli brukbar.

Dekorativt bilde

Dekorasjon bærer ingen unik informasjon, bruker alt="", har ingen forklarende bildetekst, og bør være sjelden i langformat produksjonsinnhold. Det må ikke være det eneste uttrykket for stemning, status, identitet eller resultat.

Detaljbilde med valgfri utvidelse

Bruk utvidelse bare når den vanlige innebygde gjengivelsen etablerer kontekst, men fine detaljer krever en større visning. Bildet i seg selv forblir forståelig uten å aktivere lenken, og kontrollens tilgjengelige navn beskriver handlingen.

Smal visningsflate-atferd

Hver variant skaleres ned innenfor visningsflaten, bevarer sideforholdet og holder bildeteksten tilknyttet. Hvis meningsfull tekst blir uleselig, tilby et mobilbeskåret bilde eller erstatt bildet med strukturert tekst; å tvinge klyp-og-zoom er ikke standardløsningen.

Parametre

Kontrakten lagrer redaksjonelle og leveringsmessige beslutninger. Rammer, skygger, avstand og brytepunktsverdier tilhører gjengiveren.

Direktivet har intittelfelt: et innebygd bilde tilhører den omkringliggende seksjonen heller enn å opprette en ny seksjon. Dets første kroppsavsnitt kartlegges til caption; ingen første overskrift aksepteres. Kreditering kommer fra pålitelig aktiv-metadata når tilgjengelig, noe som hindrer forfattere i å stille endre lisensinformasjon.

Syntaks og kodeeksempler

De følgende tre notasjonene kartlegger samme kilde, alternative tekst, intrinsiske dimensjoner, størrelse, bildetekst og innlastingsintensjon. Eksempelaktiv-stier demonstrerer kun kontrakten; produksjonskilden må peke 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.
:::

Første avsnitt er bildeteksten. Ytterligere avsnitt, overskrifter, lister, knapper og nestede medier avvises fordi de ville gjort en fokusert figur om til en generell innholdsbeholder.

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

Navngitte parametre brukes eksklusivt. Dette er en bærbar adapter-spesifikasjon, ikke en påstand om at en lokal shortcode er registrert. Inntil adapteren finnes, bruk publiseringssystemets etablerte semantiske figurimplementering; legg aldri til et ødelagt shortcode-kall i produksjonsinnhold.

WordPress-blokk

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

Bruk mediebibliotekets metadata, men vurder kontekstuell alternativ tekst for denne plasseringen. Ikke lenk til vedleggssiden som standard.

Eksempler

Bra: et fokusert bilde svarer på det visuelle spørsmålet

En installasjonsveiledning sier: «Før du tilkobler strøm, juster det utformede hakket med sokkellisten; å tvinge kontakten kan bøye pinnene.» Den plasserer så denne figuren:

Hakket og listen justeres før låsefane kan gripe inn.

Dette fungerer fordi bildet kommer etter grunnen til å inspisere det, beskjæringen inneholder begge samsvarende funksjoner, og bildeteksten forklarer forholdet snarere enn å si «bilde av kontakt». Instruksjonen og konsekvensen forblir i tekst. Intrinsiske dimensjoner forhindrer bevegelse under innlasting, og bildet kan lastes inn med lat innlasting fordi det vises godt under den første visningsflaten.

Dårlig: dekorasjon avbryter uten forklaring

En artikkel om konfigurering av analyseverktøy setter inn et bredt arkivfoto av en person som ser på fargerike diagrammer mellom et steg og dets advarsel. Den alternative teksten sier «analytics dashboard SEO optimization reporting data», kilden er 5000 piksler bred, ingen dimensjoner er oppgitt, og filen lastes inn umiddelbart halvveis ned på siden.

Bildet er dårlig fordi det beviser ingen konfigurasjonstilstand, skiller en risikabel handling fra advarselen, stapper søkeord inn i alternativ tekst, laster ned flere piksler enn oppsettet kan bruke, og kan flytte på advarselen når høyden blir kjent. Fjern det. Hvis det virkelige grensesnittet inneholder en tvetydig kontroll, erstatt det med et fokusert, tidsriktig skjermbilde og hold advarselen knyttet til handlingen.

Skjemamarkering og tilgjengelighet

Et innebygd bilde oppretter ingen spesiell skjemaenhet som standard. Et meningsfylt bilde kan levere image-egenskapen til Article, HowTo, Product, Review eller en annen passende enhet. Bruk ImageObject kun med en stabil contentUrl og sannferdig tilgjengelig metadata som bildetekst, dimensjoner, skaper og lisens. Ikke marker dekorasjon eller uverifiserte rettigheter.

God alternativ tekst beskriver funksjon i kontekst, ikke ethvert synlig objekt. Spør hvilken setning som ville erstatte bildet hvis det ikke klarte å lastes. «Connector close-up showing the keyed notch aligned with the matching socket ridge» er nyttig i en installasjonsveiledning. «A black and silver object on a gray background» er visuelt bokstavelig, men funksjonelt svakt. Unngå «bilde av» og «foto av» med mindre mediet i seg selv er viktig, som å skille et fotografi fra en simulering.

Hvert <img> trenger et alt-attributt. Bruk ikke-tom tekst for informative bilder og alt="" for dekorasjon. Å utelate attributtet er ikke ekvivalent: noen skjermlesere kunngjør filnavnet. Ikke legg essensiell prosa, instruksjoner, sitater eller lange dataserier inni piksler. Hvis synlig tekst i bildet betyr noe, gjenta den i det omkringliggende innholdet.

Bruk <figure> og <figcaption> når en bildetekst tilhører bildet. Ikke legg til en figurolle manuelt. Et utvidbart bilde trenger en synlig, tastaturnavigerbar kontroll med et beskrivende navn, forutsigbar fokusbevegelse, Escape-støtte når det åpner en modal, og tilgang til samme alternative tekst og bildetekst i forstørret størrelse. Ikke pakk hvert bilde inn i en umerket lenke til kildefilen.

Responsiv levering er en del av bilde-SEO og tilgjengelighet fordi det gjør innhold tilgjengelig uten unødvendig forsinkelse. Bruk srcset og sizes eller en tilsvarende bilde-pipeline slik at responsivt design kan velge en passende kandidat. Bevar sideforholdet, sett intrinsisk width og height, og begrens den gjengitte maksimale bredden til beholderen. Disse dimensjonene reserverer plass og reduserer kumulativ layoutforskyvning , bevegelsen av sideinnhold mens ressurser lastes inn.

Lat innlasting utsetter en ressurs utenfor skjermen til leseren nærmer seg den. Bruk loading="lazy" for bilder under den første visningsflaten. Ikke bruk lat innlasting på et bilde som sannsynligvis vises umiddelbart, fordi forsinkelsen kan gjøre at det største synlige innholdet kommer senere. Bruk umiddelbar innlasting og fetchpriority="high" bare når måling og malplassering identifiserer bildet som et sannsynlig primært aktiv over folden; flere bilder med høy prioritet svekker signalet.

Skriveregler

Teksten rundt et innebygd bilde gjør det meste av det tolkende arbeidet, så korthet i elementet betyr ikke uklarhet.

• Introduser grunnen før figuren i ett nærliggende avsnitt. Ikke bruk koordinatspråk som «nedenfor» når responsive eller syndikerte oppsett kan flytte aktivet.
• Skriv informativ alternativ tekst for bildets funksjon i denne nøyaktige konteksten. Mål 40–160 tegn; bruk opptil 250 kun når kompleksitet faktisk krever det.
• Hold bildetekster på 5–30 ord og én setning når mulig. Identifiser, tolk, dater, skaler eller krediter bildet; ikke bare gjenta den alternative teksten.
• Vis ett primært motiv eller forhold. Hvis leseren må inspisere mer enn tre uavhengige områder, bruk en merket skjermdump, diagram, tabell eller galleri.
• Bruk norsk språk (bokmål), klart språk og samme terminologi som den omkringliggende seksjonen. Alternativ tekst er ikke et nøkkelordfelt.
• Hold alle essensielle instruksjoner, advarsler, målinger, priser, datoer og konklusjoner i HTML-tekst, selv når de også vises i pikslene.
• Plasser aldri overskrifter, flere avsnitt, lister, tabeller, knapper, skjemaer, video, lyd eller et annet bilde inni elementets brødtekst.
• Bruk aldri en tom bildetekst for å skape mellomrom, en oppdiktet kreditering, en ekstern hotlink, et ulisensiert aktiv, kundedata uten tillatelse, eller en ikke-eksisterende plassholder-bane.
• Strekk, forveng eller skaler aldri opp et bilde for å fylle en designluke. Beskjær bare når beskjæringen bevarer beviset og konteksten teksten diskuterer.

Innholdstyper som bruker det

postTypes-arrayen i frontmatter er den kanoniske sammenkoblingen. En innholdstype kan innsnevre kravet, men endrer ikke elementets felt- eller tilgjengelighetskontrakt.

QA-sjekkliste

• Formål: Anmelderen kan oppgi den unike informasjonen, bevisene eller gjenkjennelsen bildet tilfører.
• Plassering: Det foregående avsnittet etablerer hva som skal inspiseres, og ingen advarsel, kvalifikasjon eller sitat er skilt fra påstanden.
• Riktig element: Et enkelt innebygd bilde er mer passende enn en merket skjermdump, galleri, diagram, tabell eller imagebox.
• Aktivets gyldighet: Kilden eksisterer, bruker et godkjent format og rotrelativ bane, og har verifiserte rettigheter og opprinnelse.
• Personvern: Bildet inneholder ingen uautoriserte kundedata, navn, e-postadresser, tokens, nettleserdetaljer eller stedsindikasjoner.
• Beskjæring og kvalitet: Motivet forblir lesbart i gjengitt og mobil bredde uten forvrengning, unngåelig tomrom eller destruktiv komprimering.
• Alternativ tekst: alt-attributtet er til stede og enten kontekstuelt informativt eller bevisst tomt for dekorasjon; det er ikke et filnavn, en duplikat av bildetekst eller en nøkkelordliste.
• Bildetekst: Når til stede, tilfører den identifikasjon, tolkning, dato, målestokk eller opprinnelse på 5–30 ord.
• Dimensjoner: Intrinsisk bredde og høyde samsvarer med kildeforholdet og reserverer stabil layoutplass.
• Responsiv levering: Kandidatstørrelser samsvarer med realistiske skjermbredder; den største kilden sendes ikke til alle visningsflater som standard.
• Innlasting: Bilder under folden lastes inn med lat innlasting; bilder som er synlige ved første visning lastes ikke med lat innlasting; høy henteprioritet begrenses til en målt primærkandidat.
• Mobilatferd: Bildet passer uten horisontal rulling på sidenivå, og meningsfulle detaljer forblir lesbare uten tvungen zoom.
• Tekst-fallback: Essensielle instruksjoner, advarsler, målinger og konklusjoner finnes i sidetekst snarere enn kun i piksler.
• Strukturerte data: Eventuelle skjemaegenskaper er nøyaktige, støttet av synlig innhold, og utelatt for dekorasjon.
• Bærbar paritet: Markdown, Hugo og WordPress bevarer samme kilde, alternative tekst, dimensjoner, bildetekst, kreditering og innlastingsintensjon.
• Ventende opptak: Ingen ikke-eksisterende bane gjengis; hvert forespurte eksempel forblir en SCREENSHOT-kommentar mens screenshotsPending = true.

FAQ

Academy-malen gjengir de fem gjennomgåtte spørsmålene som er lagret i denne sidens [[faq]]-frontmatter. De dekker alternativ tekst, lat innlasting, bildetekster, størrelse og beslutningen om å fjerne et bilde som ikke tilfører noe.