Inline obrázky: Pravidla a příklady

Inline obrázek je jednotlivý obrázek umístěný do čtecího toku, který má objasnit nebo dokázat bod, který je bezprostředně kolem něj. Není to galerie, propagační panel ani náhrada textu. Zeptejte se, co může čtenář po jeho zhlédnutí pochopit nebo ověřit, co okolní slova neposkytují tak efektivně.

Klínová drážka brání konektoru vstoupit do zdířky v nesprávné orientaci.

Vykreslený prvek výše patří hned za odstavec, který čtenáři říká, aby zkontroloval orientaci konektoru. Ořez zpřístupňuje drážku, popisek uvádí její význam a následující instrukce může pokračovat, aniž by čtenář musel dekódovat velkou, nesouvisející scénu.

Proč na tomto prvku záleží

Čtenáři střídají skenování a soustředěné zkoumání. Dobře umístěný obrázek promění abstraktní popis v rozpoznatelný tvar, ukáže důkaz nebo sníží úsilí potřebné k představení vizuálního stavu. Umístění naznačuje, že vysvětluje okolní text. Když je tento vztah slabý, čtenáři jej zkoumají, nenacházejí žádný další význam a musí se vrátit na své místo.

Relevantním psychologickým principem je signalizace. Ořez, popisek a okolní text směřují pozornost k detailu, na kterém záleží. Fotografie celého stroje je slabá, když se věta týká dvoucentimetrového zajišťovacího výstupku. Soustředěný ořez tohoto výstupku dává čtenáři jednu vizuální otázku k zodpovězení. Obrázek nepotřebuje šipky ani vloženou prózu, pokud samotné orámování může učinit předmět zřejmým.

Strojová extrahovatelnost je schopnost softwaru identifikovat jednotku a zachovat její vztah k okolnímu významu. Sémantický prvek <figure> obsahující <img> a volitelný <figcaption> poskytuje crawlerům, asistenční technologii, migračním nástrojům a systémům AI vyhledávání stabilní jednotku. Alternativní text uvádí, co obrázek přináší; rozměry popisují jeho geometrii; popisek odhaluje interpretaci nebo původ mimo samotné pixely.

Stroje nesmí potřebovat počítačové vidění k získání zásadní instrukce, čísla, varování nebo závěru. Pokud obrázek obsahuje rozhodující měření nebo štítek, zopakujte tuto informaci v okolním textu nebo použijte strukturovanou tabulku. Pravidla pro psaní prvků řídí společnou direktivní syntaxi, zdrojové cesty, mapování těla a prioritu. Tato stránka má prioritu pro rozhodování o polích inline obrázků, velikosti, načítání, popisku a alternativním textu.

Kdy to použít

Použijte inline obrázek, když jeden vizuál přímo podporuje jednu blízkou myšlenku a obrázek zůstává užitečný v šířce čtecího sloupce. Vhodné úkoly zahrnují zobrazení fyzického detailu, identifikaci místa nebo předmětu, prezentaci jednoduchého stavu před a po, poskytnutí vizuálního důkazu testované podmínky nebo demonstraci vzhledu výstupu, který nevyžaduje anotace.

Před přidáním proveďte tři testy:

1. Test přínosu: Pojmenujte novou informaci, důkaz nebo rozpoznání, které obrázek poskytuje.
2. Test kontextu: Určete přesný odstavec, který obrázek podporuje. Pokud by si jej mohly stejně nárokovat tři sekce, jeho účel je pravděpodobně příliš široký.
3. Test odstranění: Skryjte obrázek. Pokud není ztraceno nic smysluplného, označte jej jako dekorativní pouze tehdy, když to design skutečně potřebuje; jinak jej odstraňte.

Nejvíce chyb způsobují hraniční případy. Použijte anotovaný snímek obrazovky, když čtenáři musí najít ovládací prvky nebo porovnat několik očíslovaných oblastí. Použijte diagram, když je obsahem vztah, posloupnost nebo systém, nikoli viditelný předmět. Použijte galerii, když je třeba procházet více podobných obrázků. Použijte srovnávací tabulku, když rozdíly závisí na opakujících se kritériích. Použijte imagebox, když obrázek a rozsáhlé vysvětlení tvoří samostatnou dvousloupcovou jednotku.

Nevkládejte generickou stock fotografii pouze za účelem rozdělení textu. Podání ruky nedokazuje partnerství; notebook nevysvětluje software; žárovka neudělá myšlenku jasnější. Nezveřejňujte text jako obrázek kvůli zachování typografie. Nepoužívejte snímek obrazovky pro prózu, graf bez čitelných hodnot ani obrázek, jehož licence a původ jsou neznámé.

Kam to umístit

Umístěte obrázek hned za odstavec, který uvádí, co by měl čtenář zkoumat. Důvod přichází první, aby čtenář věděl, kam směřovat pozornost. Následujte obrázek interpretací pouze tehdy, když je obrázek důkazem, jehož důsledek není zřejmý. V postupu jej umístěte za příslušnou akci a před kontrolu úspěchu; nikdy neoddělujte větu od jejího upřesnění ani instrukci od jejího varování.

Inline obrázek může být umístěn pod nadpis H2 pouze tehdy, když nadpis a první odstavec stanoví jeho účel. Udržujte obrázek, popisek a uvedení autora pohromadě napříč responzivními rozvrženími a zalomením stránek.

Neumísťujte jej dovnitř odstavce, položky seznamu, buňky tabulky, zvýrazněného bloku, akordeonu, klikatelné karty ani jiného mediálního prvku. Nedávejte dva inline obrázky za sebou: spojte skutečné související obrázky do galerie nebo přidejte vysvětlení, které odlišuje jejich úkoly. Nesmí být umístěn vedle husté tabulky, videa, grafu ani výzvy k akci, kde oba objekty soutěží o pozornost. Mezi samostatnými mediálními jednotkami ponechte alespoň jeden smysluplný odstavec, pokud netvoří jednu explicitně definovanou komparaci.

Standardně používejte běžnou šířku obsahu a užší prezentaci pro malý předmět nebo portrét. Použijte schválený široký mediální kontejner pouze tehdy, když detail nelze jinak přečíst; nikdy nevytvářejte horizontální posouvání na úrovni stránky.

Anatomie

1. Hranice obrázku: Seskupuje prostředek, popisek a uvedení autora jako jednu jednotku v toku dokumentu.
2. Zdroj obrázku: Odkazuje na schválený, existující prostředek, nikoli na vzdálený odkaz nebo zástupný symbol.
3. Alternativní text: Nahrazuje kontextovou funkci obrázku pro čtenáře, kteří jej nemohou vnímat; je prázdný pouze pro dekoraci.
4. Vnitřní rozměry: Rezervují správný poměr stran před načtením souboru a zabraňují pohybu rozvržení.
5. Responzivní varianty: Umožňují prohlížeči vybrat soubor odpovídající velikosti, místo stahování největšího zdroje všude.
6. Vykreslená velikost: Udržuje relevantní detail čitelný bez přetékání nebo zvětšování slabého zdroje.
7. Popisek: Přidává interpretaci, identifikaci, datum, měřítko nebo původ, když tato informace pomáhá všem čtenářům.
8. Uvedení autora: Zaznamenává tvůrce a zdroj, když to vyžaduje licence nebo redakční politika.

Název souboru obrázku a alternativní text nejsou zaměnitelné. Stabilní název souboru pomáhá správě prostředků; kontextový alternativní text vysvětluje účel obrázku v tomto výskytu. Stejná fotografie může mít proto různý alternativní text, když podporuje různé body, i když použití jednoho obrázku pro nesouvisející body je varovným signálem.

Příklady designu

Prvek podporuje tři sémantické varianty a dvě úpravy šířky. Chování načítání není vizuální varianta.

Informační obrázek, šířka obsahu

Toto je výchozí nastavení. Obrázek přináší rozpoznatelný detail nebo důkaz, používá neprázdný alternativní text a zůstává v čtecím kontejneru.

Informační obrázek, široký mediální kontejner

Použijte schválený široký kontejner pouze tehdy, když mapa, detailní fotografie nebo čitelný výstup potřebuje více horizontálního prostoru. Okolní text stále nese význam a mobilní prezentace musí zůstat použitelná.

Dekorativní obrázek

Dekorace nenese žádnou jedinečnou informaci, používá alt="", nemá vysvětlující popisek a měla by být v dlouhých produkčních obsazích vzácná. Nesmí být jediným vyjádřením nálady, stavu, identity nebo výsledku.

Detailní obrázek s volitelným rozšířením

Rozšíření používejte pouze tehdy, když běžné inline zobrazení poskytuje kontext, ale jemný detail vyžaduje větší pohled. Samotný obrázek zůstává srozumitelný bez aktivace odkazu a přístupný název ovládacího prvku popisuje akci.

Chování v úzkém viewportu

Každá varianta se zmenšuje v rámci viewportu, zachovává poměr stran a ponechává popisek přichycený. Pokud se smysluplný text stane nečitelným, poskytněte mobilní ořez nebo nahraďte obrázek strukturovaným textem; vynucování pinch-to-zoom není výchozím řešením.

Parametry

Kontrakt ukládá redakční a doručovací rozhodnutí. Okraje, stíny, mezery a hodnoty zlomových bodů patří do vykreslovacího modulu.

Direktiva nemá pole titulku: inline obrázek patří do okolní sekce, místo aby vytvářel novou sekci. Jeho první odstavec těla se mapuje na caption; není akceptován žádný první nadpis. Uvedení autora pochází z důvěryhodných metadat prostředku, pokud je k dispozici, což autorům brání v tiché změně licenčních informací.

Syntaxe a příklady kódu

Následující tři zápisy mapují stejný zdroj, alternativní text, vnitřní rozměry, velikost, popisek a záměr načítání. Uvedené cesty k prostředkům demonstrují pouze kontrakt; produkční zdroj musí odkazovat na existující soubor.

Přenosná Markdown direktiva

:::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}
Klínová drážka umožňuje zasunutí pouze v jedné orientaci.
:::

První odstavec je popisek. Další odstavce, nadpisy, seznamy, tlačítka a vnořená média jsou odmítnuty, protože by změnily soustředěný obrázek na obecný kontejner obsahu.

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" >}}
Klínová drážka umožňuje zasunutí pouze v jedné orientaci.
{{< /inline-image >}}

Jsou použity výhradně pojmenované parametry. Toto je specifikace přenosného adaptéru, nikoli tvrzení, že je lokální shortcode zaregistrován. Dokud adaptér neexistuje, použijte zavedenou sémantickou implementaci prvku <figure> publikačního systému; nikdy nepřidávejte do produkčního obsahu nefunkční volání shortcodu.

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">Klínová drážka umožňuje zasunutí pouze v jedné orientaci.</figcaption>
</figure>
<!-- /wp:image -->

Použijte metadata z mediální knihovny, ale zkontrolujte kontextový alternativní text pro toto konkrétní umístění. Standardně neodkazujte na stránku přílohy.

Příklady

Dobře: soustředěný obrázek odpovídá na vizuální otázku

Průvodce instalací říká: „Před přivedením napájení vyrovnejte klínovou drážku s výstupkem zdířky; násilné zasouvání konektoru může ohnout piny.“ Poté umístí tento obrázek:

Drážka a výstupek se vyrovnají, než může zajišťovací výstupek zapadnout.

Toto funguje, protože obrázek přichází po důvodu k jeho prozkoumání, ořez obsahuje oba odpovídající prvky a popisek vysvětluje vztah, místo aby říkal „obrázek konektoru“. Instrukce a důsledek zůstávají v textu. Vnitřní rozměry zabraňují pohybu během načítání a obrázek lze líně načítat, protože se objevuje hluboko pod prvním viewportem.

Špatně: dekorace přerušuje, aniž by vysvětlovala

Článek o konfiguraci analytiky vkládá celošířkovou stock fotografii osoby prohlížející si barevné grafy mezi krok a jeho varování. Její alternativní text říká „analytics dashboard SEO optimization reporting data“, zdroj je široký 5000 pixelů, nejsou deklarovány žádné rozměry a soubor se eagerly načítá v polovině stránky.

Obrázek je špatný, protože nedokazuje žádný konfigurační stav, odděluje rizikovou akci od jejího varování, nacpává klíčová slova do alternativního textu, stahuje více pixelů, než rozvržení dokáže využít, a může posunout varování, když je jeho výška známa. Odstraňte jej. Pokud skutečné rozhraní obsahuje nejednoznačný ovládací prvek, nahraďte jej soustředěným, aktuálním snímkem obrazovky a ponechte varování připojené k akci.

Schema markup a přístupnost

Inline obrázek standardně nevytváří žádnou speciální schema entitu. Smysluplný obrázek může poskytnout vlastnost image entit Article, HowTo, Product, Review nebo jiné vhodné entity. Použijte ImageObject pouze se stabilním contentUrl a pravdivými dostupnými metadaty, jako je popisek, rozměry, tvůrce a licence. Neoznačujte dekoraci ani neověřená práva.

Kvalitní alternativní text popisuje funkci v kontextu, nikoli každý viditelný předmět. Zeptejte se, jaká věta by nahradila obrázek, kdyby se nenačetl. „Detail konektoru s klínovou drážkou vyrovnanou s výstupkem zdířky“ je užitečný v průvodci instalací. „Černý a stříbrný předmět na šedém pozadí“ je vizuálně doslovný, ale funkčně slabý. Vyhněte se „obrázek“ a „fotografie“, pokud na médiu samotném nezáleží, například při rozlišení fotografie od simulace.

Každý <img> potřebuje atribut alt. Použijte neprázdný text pro informační obrázky a alt="" pro dekoraci. Vynechání atributu není ekvivalentní: některé čtečky obrazovky oznamují název souboru. Nevkládejte zásadní prózu, instrukce, citace ani dlouhé datové řady do pixelů. Pokud viditelný text v obrázku záleží, zopakujte jej v okolním obsahu.

Použijte <figure> a <figcaption>, když popisek patří k obrázku. Ručně nepřidávejte roli figure. Rozbalitelný obrázek potřebuje viditelný, klávesnicí ovladatelný ovládací prvek s popisným názvem, předvídatelným pohybem fokusu, podporou Escape při otevření modálu a přístupem ke stejnému alternativnímu textu a popisku ve zvětšené velikosti. Neobalujte každý obrázek neoznačeným odkazem na zdrojový soubor.

Responzivní doručování je součástí SEO obrázků a přístupnosti, protože zpřístupňuje obsah bez zbytečného zpoždění. Použijte srcset a sizes nebo ekvivalentní obrazovou pipeline, aby responzivní design mohl vybrat vhodnou variantu. Zachovejte poměr stran, nastavte vnitřní width a height a omezte maximální vykreslenou šířku na její kontejner. Tyto rozměry rezervují místo a snižují Cumulative Layout Shift , pohyb obsahu stránky během načítání zdrojů.

Líné načítání odkládá zdroj mimo obrazovku, dokud se k němu čtenář nepřiblíží. Použijte loading="lazy" pro obrázky pod počátečním viewportem. Nelíně načítajte obrázek, který se pravděpodobně objeví okamžitě, protože zpoždění může způsobit, že největší viditelný obsah dorazí později. Použijte eager načítání a fetchpriority="high" pouze tehdy, když měření a pozice šablony identifikují obrázek jako pravděpodobný primární prostředek nad záhybem; více obrázků s vysokou prioritou signalizaci narušuje.

Pravidla psaní

Text kolem inline obrázku odvádí většinu interpretační práce, takže stručnost v prvku neznamená vágnost.

• Uveďte důvod před obrázkem v jednom blízkém odstavci. Nepoužívejte souřadnicový jazyk jako „níže“, když responzivní nebo syndikovaná rozvržení mohou prostředek přesunout.
• Napište informativní alternativní text pro funkci obrázku v tomto přesném kontextu. Cílte na 40–160 znaků; použijte až 250 pouze tehdy, když to složitost skutečně vyžaduje.
• Udržujte popisky na 5–30 slovech a pokud možno v jedné větě. Identifikujte, interpretujte, datujte, škálujte nebo uveďte autora obrázku; neopakujte pouze alternativní text.
• Zobrazte jeden primární předmět nebo vztah. Pokud musí čtenář zkoumat více než tři nezávislé oblasti, použijte anotovaný snímek obrazovky, diagram, tabulku nebo galerii.
• Používejte americký pravopis, prostý jazyk a stejnou terminologii jako okolní sekce. Alternativní text není pole pro klíčová slova.
• Uchovávejte všechny zásadní instrukce, varování, měření, ceny, data a závěry v HTML textu, i když se také objevují v pixelech.
• Nikdy nevkládejte nadpisy, více odstavců, seznamy, tabulky, tlačítka, formuláře, video, audio ani jiný obrázek do těla prvku.
• Nikdy nepoužívejte prázdný popisek k vytvoření mezer, smyšlené uvedení autora, vzdálený odkaz, nelicencovaný prostředek, zákaznická data bez povolení ani neexistující zástupnou cestu.
• Nikdy natahujte, deformujte ani nezvětšujte obrázek, aby zaplnil designové místo. Ořezávejte pouze tehdy, když ořez zachovává důkaz a kontext, o kterém text hovoří.

Typy příspěvků, které jej používají

Pole postTypes v front matter je kanonickým propojením. Typ příspěvku může zpřísnit požadavek, ale nemění pole prvku ani kontrakt přístupnosti.

Kontrolní seznam QA

• Účel: Recenzent dokáže uvést jedinečnou informaci, důkaz nebo rozpoznání, které obrázek přidává.
• Umístění: Předcházející odstavec stanoví, co zkoumat, a žádné varování, upřesnění nebo citace nebyly odděleny od svého tvrzení.
• Správný prvek: Jednotlivý inline obrázek je vhodnější než anotovaný snímek obrazovky, galerie, diagram, tabulka nebo imagebox.
• Platnost prostředku: Zdroj existuje, používá schválený formát a cestu relativní ke kořenu a má ověřená práva a původ.
• Soukromí: Obrázek neobsahuje neschválená zákaznická data, jména, e-mailové adresy, tokeny, detaily prohlížeče ani informace o poloze.
• Ořez a kvalita: Předmět zůstává čitelný ve vykreslené i mobilní šířce bez deformace, zbytečného prázdného místa nebo destruktivní komprese.
• Alternativní text: Atribut alt je přítomen a je buď kontextově informativní, nebo záměrně prázdný pro dekoraci; není to název souboru, duplikát popisku ani seznam klíčových slov.
• Popisek: Pokud je přítomen, přidává identifikaci, interpretaci, datum, měřítko nebo původ v rozsahu 5–30 slov.
• Rozměry: Vnitřní šířka a výška odpovídají poměru stran zdroje a rezervují stabilní prostor v rozvržení.
• Responzivní doručování: Velikosti variant odpovídají realistickým šířkám displeje; největší zdroj není standardně odesílán do každého viewportu.
• Načítání: Obrázky pod záhybem jsou líně načítány; počátečně viditelné obrázky nejsou; vysoká priorita načítání je omezena na změřeného primárního kandidáta.
• Chování na mobilu: Obrázek se vejde bez horizontálního posouvání na úrovni stránky a jeho smysluplný detail zůstává čitelný bez vynuceného zoomu.
• Textová náhrada: Zásadní instrukce, varování, měření a závěry existují v textu stránky, nikoli pouze v pixelech.
• Strukturovaná data: Všechny schema vlastnosti jsou přesné, podpořené viditelným obsahem a u dekorace vynechány.
• Přenosná parita: Markdown, Hugo a WordPress zachovávají stejný zdroj, alternativní text, rozměry, popisek, uvedení autora a záměr načítání.
• Čekající snímky: Žádná neexistující cesta se nevykresluje; každý požadovaný příklad zůstává jako komentář SCREENSHOT, dokud je screenshotsPending = true.

FAQ

Akademická šablona vykresluje pět recenzovaných otázek uložených v poli [[faq]] front matter této stránky. Pokrývají alternativní text, líné načítání, popisky, velikost a rozhodnutí odstranit obrázek, který nic nepřidává.