Inline obrázky: Pravidlá a príklady

Inline obrázok je jeden obrázok umiestnený v toku čítania, ktorý objasňuje alebo dokazuje bod bezprostredne okolo neho. Nie je to galéria, propagačný panel ani náhrada textu. Opýtajte sa, čo môže čitateľ po jeho zhliadnutí pochopiť alebo overiť, čo blízke slová neposkytujú tak efektívne.

Vyrezaný zárez zabraňuje vstupu konektora do zásuvky v nesprávnej orientácii.

Vyššie uvedený vykreslený prvok patrí hneď za odsek, ktorý čitateľovi hovorí, aby skontroloval orientáciu konektora. Orezanie robí zárez viditeľným, popis uvádza jeho význam a nasledujúca inštrukcia môže pokračovať bez toho, aby žiadala čitateľa dekódovať veľkú, nesúvisiacu scénu.

Prečo na tomto prvku záleží

Čitatelia striedajú skenovanie a sústredené skúmanie. Dobre umiestnený obrázok premení abstraktný opis na rozpoznateľný tvar, ukáže dôkaz alebo zníži úsilie potrebné na predstavenie si vizuálneho stavu. Umiestnenie naznačuje, že vysvetľuje blízky text. Keď je tento vzťah slabý, čitatelia ho skúmajú, nenachádzajú žiadny dodatočný význam a musia sa vrátiť späť na svoje miesto.

Príslušným psychologickým princípom je signalizácia. Orezanie, popis a okolitý text smerujú pozornosť k detailu, ktorý je dôležitý. Fotografia celého stroja je slabá, keď sa veta týka dvojcentimetrového poistného výstupku. Sústredený záber tohto výstupku dáva čitateľovi jednu vizuálnu otázku na zodpovedanie. Obrázok nepotrebuje šípky ani vložený text, keď samotné orámovanie môže urobiť objekt zrejmým.

Strojová extrahovateľnosť je schopnosť softvéru identifikovať jednotku a zachovať jej vzťah k blízkemu významu. Sémantický prvok <figure> obsahujúci <img> a voliteľný <figcaption> poskytuje crawlerom, asistenčným technológiám, migračným nástrojom a systémom umelej inteligencie na vyhľadávanie stabilnú jednotku. Alternatívny text uvádza, čo obrázok prináša; rozmery opisujú jeho geometriu; popis odhaľuje interpretáciu alebo provenienciu mimo pixelov.

Stroje nesmú potrebovať počítačové videnie na získanie zásadnej inštrukcie, čísla, varovania alebo záveru. Ak obrázok obsahuje rozhodujúce meranie alebo štítok, zopakujte túto informáciu v blízkom texte alebo použite štruktúrovanú tabuľku. Pravidlá písania prvkov riadia syntax spoločných direktív, zdrojové cesty, mapovanie tela a prioritu. Táto stránka má prioritu pre rozhodnutia o poliach inline obrázkov, veľkosti, načítavaní, popise a alternatívnom texte.

Kedy ho použiť

Použite inline obrázok, keď jeden vizuál priamo podporuje jednu blízku myšlienku a obrázok zostáva užitočný v šírke čitateľského stĺpca. Vhodné úlohy zahŕňajú zobrazenie fyzického detailu, identifikáciu miesta alebo objektu, prezentáciu jednoduchého stavu pred a po, poskytnutie vizuálneho dôkazu testovanej podmienky alebo demonštráciu vzhľadu výstupu, ktorý nevyžaduje anotácie.

Pred pridaním vykonajte tri testy:

1. Test prínosu: Pomenujte novú informáciu, dôkaz alebo rozpoznanie, ktoré obrázok poskytuje.
2. Test kontextu: Identifikujte presný odsek, ktorý obrázok podporuje. Ak by si ho mohli nárokovať tri sekcie rovnako, jeho účel je pravdepodobne príliš široký.
3. Test odstránenia: Skryte obrázok. Ak sa nestratí nič zmysluplné, označte ho ako dekoratívny iba vtedy, keď to dizajn skutočne potrebuje; v opačnom prípade ho odstráňte.

Prípady tesne mimo cieľ spôsobujú väčšinu nesprávneho použitia. Použite anotovanú snímku obrazovky, keď čitatelia musia nájsť ovládacie prvky alebo porovnať niekoľko očíslovaných oblastí. Použite diagram, keď obsahom je vzťah, postupnosť alebo systém, nie viditeľný objekt. Použite galériu, keď je potrebné prehliadať viacero rovnocenných obrázkov. Použite porovnávaciu tabuľku, keď rozdiely závisia od opakovaných kritérií. Použite imagebox, keď obrázok a rozsiahle vysvetlenie tvoria samostatnú dvojstĺpcovú jednotku.

Nevkladajte generickú stock fotografiu len na prerušenie textu. Podanie ruky nedokazuje partnerstvo; notebook nevysvetľuje softvér; žiarovka neurobí myšlienku jasnejšou. Nepublikujte text ako obrázok na zachovanie typografie. Nepoužívajte snímku obrazovky pre prózu, graf bez čitateľných hodnôt ani obrázok, ktorého licencia a proveniencia sú neznáme.

Kam ho umiestniť

Umiestnite obrázok hneď za odsek, ktorý uvádza, čo by mal čitateľ preskúmať. Dôvod prichádza prvý, aby čitateľ vedel, kam smerovať pozornosť. Nasledujte obrázok interpretáciou len vtedy, keď je obrázok dôkazom, ktorého dôsledok nie je zrejmý. V postupe ho umiestnite po príslušnej akcii a pred kontrolou úspechu; nikdy neoddeľujte vetu od jej kvalifikácie ani inštrukciu od jej varovania.

Inline obrázok môže byť umiestnený pod H2 len vtedy, keď nadpis a prvý odsek stanovujú jeho účel. Udržujte obrázok, popis a uvedenie zdroja pohromade v responzívnych rozloženiach a na zalomeniach stránky.

Neumiestňujte ho do odseku, položky zoznamu, bunky tabuľky, calloutu, accordeonu, klikateľnej karty ani iného mediálneho prvku. Nedávajte dva inline obrázky tesne za seba: skutočné rovnocenné obrázky skombinujte do galérie alebo pridajte vysvetlenie, ktoré odlišuje ich úlohy. Nesmie byť umiestnený vedľa hustej tabuľky, videa, grafu alebo výzvy na akciu, kde oba objekty súťažia o pozornosť. Zachovajte aspoň jeden zmysluplný odsek medzi samostatnými mediálnymi jednotkami, pokiaľ netvoria jednu explicitne definovanú komparáciu.

Štandardne používajte normálnu šírku obsahu a užšiu prezentáciu pre malý objekt alebo portrét. Použite schválený široký mediálny kontajner len vtedy, keď detail inak nie je čitateľný; nikdy nevytvárajte horizontálne posúvanie na úrovni stránky.

Anatómia

1. Hranica obrázku: Zoskupuje asset, popis a uvedenie zdroja ako jednu jednotku v toku dokumentu.
2. Zdroj obrázka: Odkazuje na schválený, existujúci asset, nie na vzdialený hotlink alebo placeholder.
3. Alternatívny text: Nahrádza kontextovú funkciu obrázka pre čitateľov, ktorí ho nemôžu vnímať; je prázdny len pre dekoráciu.
4. Vnútorné rozmery: Rezervujú správny pomer strán pred príchodom súboru a zabraňujú pohybu rozloženia.
5. Responzívne kandidáty: Umožňujú prehliadaču vybrať súbor vhodnej veľkosti namiesto sťahovania najväčšieho zdroja všade.
6. Vykreslená veľkosť: Udržuje relevantný detail čitateľný bez pretečenia alebo zväčšovania slabého zdroja.
7. Popis: Pridáva interpretáciu, identifikáciu, dátum, mierku alebo provenienciu, keď tieto informácie pomáhajú každému čitateľovi.
8. Uvedenie zdroja: Zaznamenáva tvorcu a zdroj, keď to vyžaduje licencia alebo redakčná politika.

Názov súboru obrázka a alternatívny text nie sú zameniteľné. Stabilný názov súboru pomáha údržbe assetov; kontextový alternatívny text vysvetľuje účel obrázka v tomto výskyte. Rovnaká fotografia preto môže mať rôzny alternatívny text, keď podporuje rôzne body, hoci opätovné použitie jedného obrázka na nesúvisiace body je varovným signálom.

Príklady dizajnu

Prvok podporuje tri sémantické varianty a dve šírkové úpravy. Správanie načítavania nie je vizuálny variant.

Informatívny obrázok, šírka obsahu

Toto je predvolené nastavenie. Obrázok prináša rozpoznateľný detail alebo dôkaz, používa neprázdny alternatívny text a zostáva v rámci čitateľského kontajnera.

Informatívny obrázok, široké médium

Použite schválený široký kontajner len vtedy, keď mapa, detailná fotografia alebo čitateľný výstup potrebuje viac horizontálneho priestoru. Okolitý text stále vlastní význam a mobilná prezentácia musí zostať použiteľná.

Dekoratívny obrázok

Dekorácia nenesie žiadnu jedinečnú informáciu, používa alt="", nemá vysvetľujúci popis a mala by byť vzácnosťou v dlhých produkčných textoch. Nesmie byť jediným vyjadrením nálady, stavu, identity alebo výsledku.

Detailný obrázok s voliteľným rozšírením

Rozšírenie použite len vtedy, keď normálne inline zobrazenie poskytuje kontext, ale jemný detail vyžaduje väčší pohľad. Samotný obrázok zostáva zrozumiteľný bez aktivovania odkazu a prístupný názov ovládacieho prvku opisuje akciu.

Správanie v úzkom zobrazovacom okne

Každý variant sa zmenšuje v rámci zobrazovacieho okna, zachováva pomer strán a ponecháva popis pripojený. Ak sa zmysluplný text stane nečitateľným, poskytnite mobilný orez alebo nahraďte obrázok štruktúrovaným textom; vynucovanie pinch-to-zoom nie je predvoleným riešením.

Parametre

Kontrakt ukladá redakčné a doručovacie rozhodnutia. Okraje, tiene, medzery a breakpointové hodnoty patria do renderovacieho systému.

Direktíva nemá pole názvu: inline obrázok patrí do okolitej sekcie, nie vytvára novú sekciu. Jeho prvý odsek tela sa mapuje na caption; neakceptuje sa žiadny prvý nadpis. Uvedenie zdroja pochádza z dôveryhodných metadát assetu, ak je k dispozícii, čo bráni autorom v tichej zmene licenčných informácií.

Syntax a príklady kódu

Nasledujúce tri zápisy mapujú rovnaký zdroj, alternatívny text, vnútorné rozmery, veľkosť, popis a zámer načítavania. Uvedené cesty assetov demonštrujú iba kontrakt; produkčný zdroj musí odkazovať na existujúci súbor.

Prenosná Markdown direktíva

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

Prvý odsek je popis. Ďalšie odseky, nadpisy, zoznamy, tlačidlá a vnorené médiá sú zamietnuté, pretože by zmenili zameraný obrázok na všeobecný obsahový kontajner.

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

Používajú sa výhradne pomenované parametre. Toto je prenosná špecifikácia adaptéra, nie tvrdenie, že lokálny shortcode je zaregistrovaný. Kým adaptér neexistuje, použite zavedenú sémantickú implementáciu figure v publikačnom systéme; nikdy nepridávajte do produkčného obsahu nefunkčné volanie 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">The keyed notch allows insertion in only one orientation.</figcaption>
</figure>
<!-- /wp:image -->

Použite metadáta knižnice médií, ale skontrolujte kontextový alternatívny text pre toto umiestnenie. Neodkazujte na stránku prílohy ako predvolené nastavenie.

Príklady

Dobrý: zameraný obrázok odpovedá na vizuálnu otázku

Inštalačná príručka hovorí: „Pred pripojením napájania zarovnajte vyrezaný zárez s hrebeňom zásuvky; násilné zasunutie konektora môže ohnúť kolíky.“ Potom umiestni tento obrázok:

Zárez a hrebeň sa zarovnajú predtým, ako sa poistný výstupok môže zaistiť.

Toto funguje, pretože obrázok prichádza po dôvode na jeho preskúmanie, orezanie obsahuje oba zodpovedajúce prvky a popis vysvetľuje vzťah namiesto toho, aby hovoril „obrázok konektora“. Inštrukcia a dôsledok zostávajú v texte. Vnútorné rozmery zabraňujú pohybu počas načítavania a obrázok môže byť lenivo načítaný, pretože sa objavuje hlboko pod prvým zobrazovacím oknom.

Zlý: dekorácia prerušuje bez vysvetlenia

Článok o konfigurácii analytiky vloží celošírkovú stock fotografiu človeka pozerajúceho sa na farebné grafy medzi krok a jeho varovanie. Jeho alternatívny text hovorí „analytics dashboard SEO optimization reporting data“, zdroj je široký 5000 pixelov, nie sú deklarované žiadne rozmery a súbor sa načítava eager (okamžite) v polovici stránky.

Obrázok je zlý, pretože nedokazuje žiadny konfiguračný stav, oddeľuje rizikovú akciu od jej varovania, napcháva kľúčové slová do alternatívneho textu, sťahuje viac pixelov, než rozloženie dokáže využiť, a môže posunúť varovanie, keď je jeho výška známa. Odstráňte ho. Ak skutočné rozhranie obsahuje nejednoznačný ovládací prvok, nahraďte ho zameranou, aktuálnou snímkou obrazovky a ponechajte varovanie pripojené k akcii.

Štruktúrované dáta a prístupnosť

Inline obrázok štandardne nevytvára žiadnu špeciálnu schému entít. Zmysluplný obrázok môže poskytnúť vlastnosť image pre Article, HowTo, Product, Review alebo inú vhodnú entitu. Použite ImageObject len so stabilným contentUrl a pravdivými dostupnými metadátami, ako sú popis, rozmery, tvorca a licencia. Neoznačujte dekoráciu ani neoverené práva.

Dobrý alternatívny text opisuje funkciu v kontexte, nie každý viditeľný objekt. Opýtajte sa, aká veta by nahradila obrázok, keby sa nenačítal. „Connector close-up showing the keyed notch aligned with the matching socket ridge“ je užitočné v inštalačnej príručke. „A black and silver object on a gray background“ je vizuálne doslovné, ale funkčne slabé. Vyhnite sa „image of“ a „photo of“, pokiaľ na samotnom médiu nezáleží, napríklad pri rozlišovaní fotografie od simulácie.

Každý <img> potrebuje atribút alt. Použite neprázdny text pre informatívne obrázky a alt="" pre dekoráciu. Vynechanie atribútu nie je ekvivalentné: niektoré čítačky obrazovky oznámia názov súboru. Nevkladajte podstatnú prózu, inštrukcie, citácie ani dlhé dátové série do pixelov. Ak viditeľný text v obrázku záleží, zopakujte ho v okolitom obsahu.

Použite <figure> a <figcaption>, keď popis patrí k obrázku. Nepridávajte manuálne rolu figure. Rozšíriteľný obrázok potrebuje viditeľný, klávesnicou ovládateľný ovládací prvok s popisným názvom, predvídateľným pohybom fokusu, podporou Escape pri otvorení modálneho okna a prístupom k rovnakému alternatívnemu textu a popisu pri zväčšenej veľkosti. Nezabaľujte každý obrázok do neoznačeného odkazu na zdrojový súbor.

Responzívne doručenie je súčasťou SEO obrázkov a prístupnosti, pretože sprístupňuje obsah bez zbytočného oneskorenia. Použite srcset a sizes alebo ekvivalentný obrázkový pipeline, aby responzívny dizajn mohol vybrať vhodného kandidáta. Zachovajte pomer strán, nastavte vnútorné width a height a obmedzte maximálnu vykreslenú šírku na jej kontajner. Tieto rozmery rezervujú miesto a znižujú Cumulatívny posun rozloženia , pohyb obsahu stránky počas načítavania zdrojov.

Lenivé načítavanie odkladá zdroj mimo obrazovky, kým sa k nemu čitateľ nepriblíži. Použite loading="lazy" pre obrázky pod prvotným zobrazovacím oknom. Nenačítavajte lenivo obrázok, ktorý sa pravdepodobne objaví okamžite, pretože oneskorenie môže spôsobiť neskorší príchod najväčšieho viditeľného obsahu. Použite eager načítavanie a fetchpriority="high" len vtedy, keď meranie a pozícia šablóny identifikujú obrázok ako pravdepodobný primárny asset nad záhybom; viacero obrázkov s vysokou prioritou ruší signál.

Pravidlá písania

Text okolo inline obrázka vykonáva väčšinu interpretačnej práce, takže stručnosť v prvku neznamená vágnosť.

• Uveďte dôvod pred obrázkom v jednom blízkom odseku. Nepoužívajte súradnicový jazyk ako „nižšie“, keď responzívne alebo syndikované rozloženia môžu asset presunúť.
• Napíšte informatívny alternatívny text pre funkciu obrázka v tomto presnom kontexte. Cieľ 40–160 znakov; použite až 250 len vtedy, keď to komplexita skutočne vyžaduje.
• Popisy udržujte na 5–30 slovách a pokiaľ možno v jednej vete. Identifikujte, interpretujte, datujte, uveďte mierku alebo zdroj obrázka; neopakujte len alternatívny text.
• Ukážte jeden primárny subjekt alebo vzťah. Ak čitateľ musí preskúmať viac ako tri nezávislé oblasti, použite anotovanú snímku obrazovky, diagram, tabuľku alebo galériu.
• Používajte americkú angličtinu v pôvodných kódoch (alternatívny text, popisy), jednoduchý jazyk a rovnakú terminológiu ako okolitá sekcia. Alternatívny text nie je pole pre kľúčové slová.
• Všetky podstatné inštrukcie, varovania, merania, ceny, dátumy a závery ponechajte v HTML texte, aj keď sa tiež nachádzajú v pixeloch.
• Nikdy neumiestňujte nadpisy, viacero odsekov, zoznamy, tabuľky, tlačidlá, formuláre, video, audio ani iný obrázok do tela prvku.
• Nikdy nepoužívajte prázdny popis na vytvorenie medzery, vymyslené uvedenie zdroja, vzdialený hotlink, nelicencovaný asset, zákaznícke údaje bez povolenia ani neexistujúcu placeholder cestu.
• Nikdy nenaťahujte, nedeformujte ani nezväčšujte obrázok, aby vyplnil dizajnový priestor. Orežte len vtedy, keď orezanie zachováva dôkaz a kontext, o ktorom text hovorí.

Typy príspevkov, ktoré ho používajú

Pole postTypes v frontmatter je kanonické prepojenie. Typ príspevku môže zúžiť požiadavku, ale nemení kontrakt polí alebo prístupnosti prvku.

Kontrolný zoznam QA

• Účel: Recenzent vie uviesť jedinečnú informáciu, dôkaz alebo rozpoznanie, ktoré obrázok pridáva.
• Umiestnenie: Predchádzajúci odsek stanovuje, čo preskúmať, a žiadne varovanie, kvalifikácia ani citácia nie sú oddelené od svojho tvrdenia.
• Správny prvok: Jeden inline obrázok je vhodnejší ako anotovaná snímka obrazovky, galéria, diagram, tabuľka alebo imagebox.
• Platnosť assetu: Zdroj existuje, používa schválený formát a cestu relatívnu ku koreňu a má overené práva a provenienciu.
• Súkromie: Obrázok neobsahuje neschválené zákaznícke údaje, mená, e-mailové adresy, tokeny, detaily prehliadača ani lokalizačné stopy.
• Orezanie a kvalita: Subjekt zostáva čitateľný pri vykreslenej a mobilnej šírke bez deformácie, vyhnuteľného prázdneho miesta alebo deštruktívnej kompresie.
• Alternatívny text: Atribút alt je prítomný a buď kontextovo informatívny, alebo zámerne prázdny pre dekoráciu; nie je to názov súboru, duplikát popisu ani zoznam kľúčových slov.
• Popis: Keď je prítomný, pridáva identifikáciu, interpretáciu, dátum, mierku alebo provenienciu v 5–30 slovách.
• Rozmery: Vnútorná šírka a výška zodpovedajú pomeru strán zdroja a rezervujú stabilný priestor rozloženia.
• Responzívne doručenie: Veľkosti kandidátov zodpovedajú realistickým šírkam zobrazenia; najväčší zdroj sa štandardne neposiela do každého zobrazovacieho okna.
• Načítavanie: Obrázky pod záhybom sú lenivo načítané; prvotne viditeľné obrázky nie sú; vysoká priorita načítania je obmedzená na nameraného primárneho kandidáta.
• Mobilné správanie: Obrázok sa zmestí bez horizontálneho posúvania na úrovni stránky a jeho zmysluplný detail zostáva čitateľný bez vynúteného priblíženia.
• Textová náhrada: Podstatné inštrukcie, varovania, merania a závery existujú v texte stránky, nie len v pixeloch.
• Štruktúrované dáta: Všetky vlastnosti schémy sú presné, podporené viditeľným obsahom a vynechané pre dekoráciu.
• Prenosná parita: Markdown, Hugo a WordPress zachovávajú rovnaký zdroj, alternatívny text, rozmery, popis, uvedenie zdroja a zámer načítavania.
• Čakajúce snímky: Žiadna neexistujúca cesta sa nevykreslí; každý požadovaný príklad zostáva komentárom SCREENSHOT, kým screenshotsPending = true.

FAQ

Akadémia vykresľuje päť recenzovaných otázok uložených v [[faq]] frontmatter tejto stránky. Týkajú sa alternatívneho textu, lenivého načítavania, popisov, veľkosti a rozhodnutia odstrániť obrázok, ktorý nič nepridáva.