Infogade bilder: Regler och exempel

En infogad bild är en enskild bild placerad i läsflödet för att förtydliga eller bevisa poängen omedelbart runt den. Det är inget galleri, ingen reklampanel och ingen ersättning för text. Fråga vad läsaren kan förstå eller verifiera efter att ha sett den som närliggande ord inte ger lika effektivt.

Det nyckelformade hacket hindrar kontakten från att föras in i uttaget i fel riktning.

Det renderade elementet ovan hör hemma direkt efter ett stycke som uppmanar läsaren att kontrollera kontaktens riktning. Beskärningen gör hacket synligt, bildtexten anger dess betydelse, och följande instruktion kan fortsätta utan att be läsaren att avkoda en stor, orelaterad scen.

Varför detta element är viktigt

Läsare växlar mellan att skanna och fokuserad granskning. En välplacerad bild förvandlar en abstrakt beskrivning till en igenkännbar form, visar bevis eller minskar ansträngningen som krävs för att föreställa sig ett visuellt tillstånd. Placeringen signalerar att den förklarar närliggande text. När den relationen är svag undersöker läsare bilden, finner ingen ytterligare mening och måste återfå sin plats.

Den relevanta psykologiska principen är signalering. Beskärning, bildtext och omgivande text riktar uppmärksamheten mot den detalj som är viktig. Ett fotografi av en hel maskin är svagt när meningen handlar om en två centimeter lång låsflärp. En fokuserad beskärning av den flärpen ger läsaren en visuell fråga att besvara. Bilden behöver inga pilar eller inbäddad text när inramningen ensam kan göra motivet uppenbart.

Maskinextraherbarhet är förmågan hos programvara att identifiera en enhet och bevara dess relation till närliggande mening. En semantisk <figure> som innehåller en <img> och en valfri <figcaption> ger sökrobotar, hjälpmedelsteknik, migreringsverktyg och AI-hämtningssystem en stabil enhet. Alternativ text anger vad bilden bidrar med; dimensioner beskriver dess geometri; en bildtext exponerar tolkning eller ursprung utanför pixlarna.

Maskiner får inte behöva datorseende för att återhämta en väsentlig instruktion, siffra, varning eller slutsats. Om en bild innehåller en avgörande mätning eller etikett, upprepa den informationen i närliggande text eller använd en strukturerad tabell. Skrivreglerna för element styr den delade direktivsyntaxen, källsökvägarna, kroppsmappningen och prioritetsordningen. Denna sida har företräde för beslut om infogade bilders fält, storlek, laddning, bildtext och alternativ text.

När det ska användas

Använd en infogad bild när en bild direkt stöder en närliggande idé och bilden förblir användbar vid läsningens kolumnbredd. Lämpliga uppgifter inkluderar att visa en fysisk detalj, identifiera en plats eller ett objekt, presentera ett enkelt före-och-efter-tillstånd, ge visuellt bevis på ett testat villkor, eller visa utseendet på en utdata som inte kräver annoteringar.

Kör tre tester innan du lägger till den:

1. Bidragstest: Namnge den nya information, bevis eller igenkänning som bilden tillför.
2. Kontexttest: Identifiera det exakta stycke som bilden stöder. Om tre avsnitt lika gärna kunde göra anspråk på den är dess syfte troligen för brett.
3. Borttagningstest: Dölj bilden. Om inget meningsfullt förloras, markera den endast som dekorativ om designen verkligen kräver det; ta annars bort den.

Nära-miss-fall orsakar de flesta missbruk. Använd en annoterad skärmdump när läsare måste hitta kontroller eller matcha flera numrerade områden. Använd ett diagram när innehållet är en relation, sekvens eller ett system snarare än ett synligt objekt. Använd ett galleri när flera jämförbara bilder måste bläddras igenom. Använd en jämförelsetabell när skillnader beror på upprepade kriterier. Använd en bildruta när en bild och en omfattande förklaring utgör en självständig tvåkolumnsenhet.

Sätt inte in ett generiskt stockfoto enbart för att bryta upp text. En handskakning bevisar inte ett partnerskap; en bärbar dator förklarar inte programvara; en glödlampa gör inte en idé tydligare. Publicera inte text som en bild för att bevara typografi. Använd inte en skärmdump för prosa, ett diagram utan läsbara värden eller en bild vars licens och ursprung är okända.

Var det ska placeras

Placera bilden omedelbart efter det stycke som introducerar vad läsaren bör inspektera. Anledningen kommer först så att läsaren vet var uppmärksamheten ska riktas. Följ figuren med tolkning endast när bilden är bevis vars konsekvens inte är uppenbar. I en procedur, placera den efter den relevanta åtgärden och före framgångskontrollen; dela aldrig en mening från dess kvalifikation eller en instruktion från dess varning.

En infogad bild kan placeras under en H2 endast när rubriken och första stycket etablerar dess syfte. Håll figuren, bildtexten och kreditinformationen samlade över responsiva layouter och sidbrytningar.

Placera den inte inuti ett stycke, listobjekt, tabellcell, utrop, accordion, klickbart kort eller ett annat mediaelement. Sätt inte två infogade bilder direkt efter varandra: kombinera verkliga jämlikar i ett galleri, eller lägg till förklaringen som särskiljer deras funktioner. Den får inte placeras bredvid en kompakt tabell, video, diagram eller uppmaning till handling där båda objekten konkurrerar om uppmärksamheten. Håll minst ett meningsfullt stycke mellan separata mediaenheter om de inte utgör en explicit definierad jämförelse.

Använd normal innehållsbredd som standard och en smalare presentation för ett litet objekt eller porträtt. Använd en godkänd bredmediabehållare endast när detaljer inte kan läsas på annat sätt; skapa aldrig horisontell rullning på sidnivå.

Anatomi

1. Figurgräns: Grupperar tillgången, bildtexten och kreditinformationen som en enhet i dokumentflödet.
2. Bildkälla: Pekar på en godkänd, befintlig tillgång snarare än en extern hotlink eller platshållare.
3. Alternativ text: Ersätter bildens kontextuella funktion för läsare som inte kan uppfatta den; den är tom endast för dekoration.
4. Inneboende dimensioner: Reserverar rätt bildförhållande innan filen anländer och förhindrar layoutrörelse.
5. Responsiva kandidater: Låter webbläsaren välja en lämpligt stor fil istället för att ladda ner den största källan överallt.
6. Renderad storlek: Håller relevant detalj läsbar utan att svämma över eller skala upp en svag källa.
7. Bildtext: Lägger till tolkning, identifiering, datum, skala eller ursprung när den informationen hjälper varje läsare.
8. Kredit: Dokumenterar skapare och källa när licensiering eller redaktionell policy kräver det.

Bildfilnamnet och alt-texten är inte utbytbara. Ett stabilt filnamn hjälper till med tillgångsunderhåll; kontextuell alt-text förklarar bildens syfte i denna förekomst. Samma fotografi kan därför ha olika alt-text när det stöder olika punkter, även om återanvändning av en bild för orelaterade punkter är en varningssignal.

Designexempel

Elementet stöder tre semantiska varianter och två breddbehandlingar. Laddningsbeteende är inte en visuell variant.

Informativa bilder, innehållsbredd

Detta är standard. Bilden bidrar med igenkännbar detalj eller bevis, använder icke-tom alt-text och håller sig inom läskontainern.

Informativa bilder, bred media

Använd den godkända breda kontainern endast när en karta, detaljerat fotografi eller läsbar utdata behöver mer horisontellt utrymme. Den omgivande texten äger fortfarande meningen, och mobilpresentationen måste förbli användbar.

Dekorativ bild

Dekoration bär ingen unik information, använder alt="", har ingen förklarande bildtext och bör vara sällsynt i långa produktionsartiklar. Den får inte vara det enda uttrycket för stämning, status, identitet eller resultat.

Detaljbild med valfri expansion

Använd expansion endast när den normala infogade återgivningen etablerar sammanhang men fina detaljer kräver en större vy. Bilden i sig är fortfarande begriplig utan att aktivera länken, och kontrollens tillgängliga namn beskriver åtgärden.

Beteende i smal visningsport

Varje variant skalas ned inom visningsporten, bevarar bildförhållandet och håller bildtexten kopplad. Om meningsfull text blir oläslig, tillhandahåll en mobil beskärning eller ersätt bilden med strukturerad text; att tvinga fram nyp-för-att-zooma är inte standardlösningen.

Parametrar

Kontraktet lagrar redaktionella och leveransbeslut. Kanter, skuggor, avstånd och brytpunktsvärden tillhör renderaren.

Direktivet har inget titelfält: en infogad bild tillhör den omgivande sektionen snarare än att skapa en ny sektion. Dess första kroppsstycke mappas till caption; ingen första rubrik accepteras. Kredit kommer från betrodd tillgångsmetadata när tillgänglig, vilket förhindrar att författare tyst ändrar licensinformation.

Syntax och kodexempel

Följande tre notationer mappar samma källa, alternativ text, inneboende dimensioner, storlek, bildtext och laddningsintention. Exempel på tillgångssökvägar demonstrerar endast kontraktet; produktionskällan måste peka på en befintlig 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örsta stycket är bildtexten. Ytterligare stycken, rubriker, listor, knappar och inkapslade media avvisas eftersom de skulle förvandla en fokuserad figur till en allmän innehållsbehållare.

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

Namngivna parametrar används uteslutande. Detta är en bärbar adapter-specifikation, inte ett påstående om att en lokal shortcode är registrerad. Tills adaptern finns, använd publiceringssystemets etablerade semantiska figur-implementering; lägg aldrig till ett trasigt shortcode-anrop i produktionsinnehåll.

WordPress-block

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

Använd media-bibliotekets metadata men granska kontextuell alt-text för denna placering. Länka inte till bilagssidan som standard.

Exempel

Bra: en fokuserad bild besvarar den visuella frågan

En installationsguide säger: “Innan du ansluter ström, rikta in det nyckelformade hacket med uttagets kant; att tvinga in kontakten kan böja stiften.” Den placerar sedan denna figur:

Hacket och kanten riktas in innan låsflärpen kan greppa.

Detta fungerar eftersom bilden kommer efter anledningen att inspektera den, beskärningen innehåller båda matchande egenskaperna, och bildtexten förklarar relationen snarare än att säga “kontaktbild”. Instruktionen och konsekvensen finns kvar i text. Inneboende dimensioner förhindrar rörelse under laddning, och bilden kan laddas lat eftersom den visas långt under den första visningsporten.

Dålig: dekoration avbryter utan att förklara

En artikel om att konfigurera analysverktyg sätter in ett helbredds stockfoto av en person som tittar på färgglada diagram mellan ett steg och dess varning. Dess alt-text säger “analytics dashboard SEO optimization reporting data”, källan är 5000 pixlar bred, inga dimensioner deklareras, och filen laddas med ivrig laddning halvvägs ner på sidan.

Bilden är dålig eftersom den inte bevisar något konfigurationstillstånd, separerar en riskfylld åtgärd från dess varning, stoppar nyckelord i alt-texten, laddar ner fler pixlar än layouten kan använda, och kan flytta varningen när dess höjd blir känd. Ta bort den. Om det verkliga gränssnittet innehåller en tvetydig kontroll, ersätt den med en fokuserad, aktuell skärmdump och håll varningen kopplad till åtgärden.

Schema-markup och tillgänglighet

En infogad bild skapar ingen särskild schema-entitet som standard. En meningsfull bild kan tillhandahålla egenskapen image för Article, HowTo, Product, Review eller en annan lämplig entitet. Använd ImageObject endast med en stabil contentUrl och sanningsenlig tillgänglig metadata såsom bildtext, dimensioner, skapare och licens. Markera inte upp dekoration eller overifierade rättigheter.

Bra alt-text beskriver funktion i kontext, inte varje synligt objekt. Fråga vilken mening som skulle ersätta bilden om den inte laddades. “Connector close-up showing the keyed notch aligned with the matching socket ridge” är användbar i en installationsguide. “Ett svart och silverfärgat föremål på en grå bakgrund” är visuellt bokstavlig men funktionellt svag. Undvik “bild av” och “foto av” om inte mediet i sig är viktigt, som att skilja ett fotografi från en simulering.

Varje <img> behöver ett alt-attribut. Använd icke-tom text för informativa bilder och alt="" för dekoration. Att utelämna attributet är inte likvärdigt: vissa skärmläsare meddelar filnamnet. Lägg inte väsentlig prosa, instruktioner, citat eller långa dataserier inuti pixlar. Om synlig text i bilden är viktig, upprepa den i det omgivande innehållet.

Använd <figure> och <figcaption> när en bildtext hör till bilden. Lägg inte till en figurroll manuellt. En expanderbar bild behöver en synlig, tangentbordshanterbar kontroll med ett beskrivande namn, förutsägbar fokusförflyttning, Escape-stöd när den öppnar en modal, och tillgång till samma alt-text och bildtext i den förstorade storleken. Slå inte in varje bild i en omärkt länk till källfilen.

Responsiv leverans är en del av bild-SEO och tillgänglighet eftersom det gör innehåll tillgängligt utan onödig fördröjning. Använd srcset och sizes eller en motsvarande bildpipeline så att responsiv design kan välja en lämplig kandidat. Bevara bildförhållandet, ange inneboende width och height, och begränsa den renderade maxbredden till dess behållare. Dessa dimensioner reserverar utrymme och minskar Cumulative Layout Shift , rörelsen av sidinnehåll medan resurser laddas.

Lat laddning skjuter upp en resurs utanför skärmen tills läsaren närmar sig den. Använd loading="lazy" för bilder nedanför den första visningsporten. Använd inte lat laddning för en bild som sannolikt visas omedelbart, eftersom fördröjningen kan göra att det största synliga innehållet anländer senare. Använd ivrig laddning och fetchpriority="high" endast när mätning och mallposition identifierar bilden som en trolig primär tillgång ovanför fold; flera högprioritetsbilder motverkar signalen.

Skrivregler

Texten runt en infogad bild gör det mesta av det tolkningsarbetet, så korthet i elementet betyder inte vaghet.

• Introducera anledningen före figuren i ett närliggande stycke. Använd inte koordinatspråk som “nedan” när responsiva eller syndikerade layouter kan flytta tillgången.
• Skriv informativ alt-text för bildens funktion i denna exakta kontext. Sikta på 40–160 tecken; använd upp till 250 endast när komplexitet verkligen kräver det.
• Håll bildtexter till 5–30 ord och en mening när möjligt. Identifiera, tolka, datera, skala eller kreditera bilden; upprepa inte bara alt-texten.
• Visa ett primärt motiv eller en primär relation. Om läsaren måste inspektera fler än tre oberoende områden, använd en annoterad skärmdump, diagram, tabell eller galleri.
• Använd amerikansk stavning, enkelt språk och samma terminologi som den omgivande sektionen. Alternativ text är inte ett nyckelordsfält.
• Håll alla väsentliga instruktioner, varningar, mätningar, priser, datum och slutsatser i HTML-text, även när de också förekommer i pixlarna.
• Placera aldrig rubriker, flera stycken, listor, tabeller, knappar, formulär, video, ljud eller en annan bild inuti elementets kropp.
• Använd aldrig en tom bildtext för att skapa avstånd, en påhittad kredit, en extern hotlink, en olicensierad tillgång, kunddata utan tillstånd eller en obefintlig platshållarsökväg.
• Sträck, förvräng eller skala aldrig upp en bild för att fylla en designplats. Beskär endast när beskärningen bevarar beviset och sammanhanget som texten diskuterar.

Inläggstyper som använder det

Arrayen postTypes i frontmatter är den kanoniska kopplingen. En inläggstyp kan snäva av kravet, men den ändrar inte elementets fält- eller tillgänglighetskontrakt.

QA-checklista

• Syfte: Granskaren kan ange den unika information, bevis eller igenkänning som bilden tillför.
• Placering: Det föregående stycket etablerar vad som ska inspekteras, och ingen varning, kvalifikation eller källa har separerats från sitt påstående.
• Rätt element: En enskild infogad bild är mer lämplig än en annoterad skärmdump, galleri, diagram, tabell eller bildruta.
• Tillgångens giltighet: Källan finns, använder ett godkänt format och rotrelativ sökväg, och har verifierade rättigheter och ursprung.
• Integritet: Bilden innehåller inga ej godkända kunddata, namn, e-postadresser, tokens, webbläsarinformation eller platsledtrådar.
• Beskärning och kvalitet: Motivet förblir läsbart vid renderad och mobil bredd utan förvrängning, undvikbart tomt utrymme eller destruktiv komprimering.
• Alternativ text: Attributet alt är närvarande och antingen kontextuellt informativt eller avsiktligt tomt för dekoration; det är inte ett filnamn, bildtextduplikat eller nyckelordslista.
• Bildtext: När den finns, tillför den identifiering, tolkning, datum, skala eller ursprung på 5–30 ord.
• Dimensioner: Inneboende bredd och höjd matchar källans bildförhållande och reserverar stabilt layoututrymme.
• Responsiv leverans: Kandidatstorlekar matchar realistiska skärmbredder; den största källan skickas inte till varje visningsport som standard.
• Laddning: Bilder nedanför fold laddas med lat laddning; initialt synliga bilder gör inte det; hög hämtningsprioritet är begränsad till en uppmätt primär kandidat.
• Mobilt beteende: Bilden passar utan horisontell rullning på sidnivå, och dess meningsfulla detalj förblir läsbar utan forcerad zoom.
• Textfallback: Väsentliga instruktioner, varningar, mätningar och slutsatser finns i sidtext snarare än endast i pixlar.
• Strukturerad data: Alla schema-egenskaper är korrekta, stödda av synligt innehåll och utelämnade för dekoration.
• Bärbar paritet: Markdown, Hugo och WordPress bevarar samma källa, alt-text, dimensioner, bildtext, kredit och laddningsintention.
• Väntande skärmdumpar: Ingen obefintlig sökväg renderas; varje efterfrågat exempel förblir en SCREENSHOT-kommentar medan screenshotsPending = true.

FAQ

Academy-mallen renderar de fem granskade frågorna som lagras i denna sidas [[faq]]-frontmatter. De täcker alternativ text, lat laddning, bildtexter, storlek och beslutet att ta bort en bild som inte tillför något.