Imagebox: Pravidlá a príklady informačného bloku s obrázkom

Imagebox spája jeden obrázok s jedným cieleným vysvetlením, aby ich čitatelia vnímali ako jednu redakčnú jednotku. Obrázok môže prinášať dôkaz, ktorý text interpretuje, alebo môže ilustrovať myšlienku, ktorú text úplne vysvetľuje. Autor musí deklarovať, ktorú úlohu plní, pretože táto voľba riadi text, alternatívny text, popis, štruktúrované dáta a to, či prvok funguje aj bez zraku.

Toto je variant obrázka ako obsahu: viditeľný dátum a stav sú dôkazom, zatiaľ čo susediaci text interpretuje ich vzťah. Ak by bol obrázok len dekoratívnym kalendárom, text by musel celú pointu o aktuálnosti sprostredkovať samostatne a obrázok by používal prázdny alternatívny text.

Prečo na tomto prvku záleží

Čitatelia nespracúvajú obrázok a vzdialený odsek automaticky ako jednu myšlienku. Keď sa obrázok objaví bez explicitného textového vzťahu, musia sa sami rozhodnúť, čo skúmať, prečo je to dôležité a či to podporuje okolité tvrdenie. Imagebox túto neistotu znižuje tým, že umiestni jeden vizuálny prvok a jedno vysvetlenie do jasne vymedzeného priestoru. Nadpis pomenúva pointu; obrázok ju ukazuje; text hovorí čitateľovi, čo si má všimnúť alebo pochopiť.

Psychologickým prínosom je spoločná pozornosť: dizajn smeruje pozornosť na vizuálny objekt, zatiaľ čo text stanovuje jeho relevantiu. Výrez grafu môže naznačovať nárast, volatilitu alebo dátumovú hranicu; susediaci text vyberá relevantné čítanie.

Strojová extrahovatelnosť je schopnosť softvéru izolovať obsahovú jednotku bez straty vzťahu medzi jej časťami. Sémantický imagebox sprístupňuje obrázok, prístupný popis, popisok, nadpis, vysvetlenie a deklarovanú úlohu obrázka v jednom kontajneri. Text musí naďalej obsahovať tvrdenie: počítačové videnie nesmie byť jedinou cestou k číslu, inštrukcii, obmedzeniu alebo záveru.

Pravidlá písania prvkov upravujú spoločnú direktívnu syntax, mapovanie tela, cesty a prioritu. Táto stránka má prioritu tam, kde definuje špecifický rozdiel imagebox medzi obsahom a ilustráciou, jeho povolené polia a limit jedného obrázka.

Kedy ho použiť

Použite imagebox, keď jeden obrázok a jedno vysvetlenie majú priamy, nevyhnutný vzťah a ani jeden si nezaslúži samostatnú sekciu. Silné prípady zahŕňajú cielený výrez rozhrania spárovaný s interpretáciou, detail produktu spárovaný s vysvetlením, prečo ovplyvňuje vhodnosť, fotografiu procesu spárovanú s pravidlom kontroly kvality, alebo jednoduchú koncepčnú ilustráciu spárovanú so stručným vysvetlením.

Najprv rozhodnite, či je obrázok obsah alebo ilustrácia:

• Obrázok ako obsah: čitateľ musí preskúmať obrázok, aby overil tvrdenie, identifikoval funkciu, porovnal stav alebo pochopil vizuálny fakt. Text pomenúva relevantný detail a vysvetľuje jeho význam. Alternatívny text je zmysluplný a popisok je zvyčajne prítomný.
• Ilustračný obrázok: obrázok posilňuje tón, zapamätateľnosť alebo porozumenie, ale susediaci text poskytuje úplné tvrdenie. Odstránenie obrázka robí blok menej pútavým, nie menej presným. Alternatívny text je prázdny, pokiaľ ilustrácia sama o sebe neprináša dodatočné informácie.

Použite test odstránenia. Ak zlyhaný požiadavok na obrázok odstráni dôkaz alebo spôsobí, že vysvetlenie je neúplné, deklarujte role=content. Ak odstráni iba vizuálne posilnenie, deklarujte role=illustration.

Časté sú hraničné prípady:

• Použite samostatný obrázok, keď vizuál potrebuje plnú šírku čítania a text ho len identifikuje.
• Použite anotovanú snímku obrazovky , keď čitatelia musia lokalizovať viacero oblastí rozhrania.
• Použite tabuľku na opakované porovnávacie kritériá, diagram pre systém alebo postupnosť a galériu pre rovnocenné obrázky.
• Použite bežnú prózu, keď vizuál iba opakuje vetu.

Nepoužívajte imagebox na to, aby slabá sekcia vyzerala dizajnovo. Skladová fotografia ľudí ukazujúcich na notebook nevysvetľuje „spoluprácu“ a generický robot nerobí tvrdenie o umelej inteligencii konkrétnejším. Ak by sa obrázok dal nahradiť nesúvisiacim obrázkom bez zmeny textu, dvojica nemá redakčnú zmluvu.

Kde ho umiestniť

Umiestnite imagebox hneď za odsek, ktorý uvádza tvrdenie alebo koncept, ktorý rozvíja. V postupe ho umiestnite za akciu a pred kontrolu úspechu, aby vizuálny dôkaz neprerušoval inštrukciu.

Môže byť umiestnený priamo pod H2 iba vtedy, keď je jeho interný nadpis konkrétnejší. Citáciu alebo kvalifikáciu ponechajte vedľa tvrdenia, ktoré obmedzuje; nikdy nevkladajte imagebox medzi ne.

Nesmie byť umiestnený priamo vedľa iného imageboxu, galérie, obrázka v plnej šírke, videa, tabuľky alebo dvojstĺpcového infoboxu. Vložte interpretáciu medzi vizuálne kontajnery, skombinujte skutočne rovnocenné prvky alebo vytvorte samostatné podsekcie.

Neumiestňujte ho do odrážky, kroku, výzvy, bunky tabuľky, akordeónu alebo klikateľnej karty. Nevkladajte výzvu na akciu do bloku ani medzi jeho obrázok a vysvetlenie.

Na počítači sa obrázok môže zobraziť pred textom alebo za ním. Na mobile zachovajte predvídateľné poradie v zdrojovom kóde, klávesnici a čítačke obrazovky; nespoliehajte sa na protichodné preskupenie pomocou CSS.

Anatómia

Anatómia je definovaná významom, nie farbou, tieňom alebo šírkou stĺpca.

1. Kontajner: Zoskupuje presne jeden obrázok a jedno vysvetlenie ako jednu redakčnú jednotku.
2. Obrázok: Zobrazuje dôkaz alebo poskytuje ilustráciu podľa deklarovanej úlohy.
3. Alternatívny text: Komunikuje relevantný vizuálny účel pre obrázok ako obsah; pri nadbytočnej dekoratívnej ilustrácii je prázdny.
4. Popisok: Identifikuje, čo obrázok ako obsah zobrazuje, a poskytuje základný kontext ako stav, dátum alebo mierku.
5. Nadpis: Uvádza poznatok alebo tému, nie názov súboru ani generický štítok ako „Príklad“.
6. Vysvetlenie: Hovorí čitateľovi, čo si má všimnúť, prečo je to dôležité a akékoľvek obmedzenie interpretácie.
7. Uvedenie autorstva: Uvádza tvorcu alebo zdroj, keď to vyžadujú práva, proveniencia alebo redakčná politika.
8. Poradie čítania: Zachováva súvislý vzťah obrázka a textu, keď sa dva stĺpce zlúčia do jedného.

Vysvetlenie sa musí odvolávať na tému priamo, nie pomocou súradníc ako „obrázok vľavo“. Pozícia sa mení naprieč zlomami, prekladmi a syndikáciou. „Zastaraný stav a dátum aktualizácie identifikujú cieľ kontroly“ zostáva pravdivé všade.

Príklady dizajnu

Dizajnový systém podporuje štyri kombinácie úlohy a pozície. Žiadna z nich nemení požiadavky na obsah.

Obrázok ako obsah, obrázok na začiatku

Použite tento predvolený variant, keď by čitatelia mali preskúmať dôkaz pred jeho interpretáciou.

Obrázok ako obsah, obrázok na konci

Použite tento variant, keď vysvetlenie musí vytvoriť rámec pred dôkazom.

Ilustrácia, obrázok na začiatku

Použite tento variant, keď konceptuálny vizuál zlepšuje rozpoznanie, zatiaľ čo text nesie plný význam.

Ilustrácia, obrázok na konci

Použite tento variant, keď je vysvetlenie primárne a ilustrácia pôsobí ako vizuálna bodka.

Správanie na úzkych obrazovkách

Každý variant sa zmení na jeden stĺpec bez horizontálneho posúvania alebo orezania meniaceho význam. Popisok zostáva pripojený k svojmu obrázku.

Parametre

Obsahová zmluva oddeľuje redakčný význam od prezentácie. Pomery šírok, medzery, okraje, pozadie, zaoblenie, tiene a zlomy patria do vykresľovacieho systému.

src publikujte až po existencii aktíva. Nevyhotovená snímka používa komentár so snímkou a screenshotsPending = true. role nemá predvolenú hodnotu, pretože tiché považovanie dôkazu za dekoráciu spôsobuje zlyhanie prístupnosti.

Prvý nadpis tela sa stáva title; všetko za ním sa stáva content. Telo povoľuje odseky, zvýraznenie, vložený kód a jeden kontextuálny odkaz. Zakazuje zoznamy, vnorené nadpisy, tabuľky, médiá, tlačidlá, formuláre, citácie, akordeóny a komponenty.

Syntax a príklady kódu

Všetky tri zápisy zachovávajú rovnakú úlohu, obrázok, nadpis, vysvetlenie, popisok, uvedenie autorstva a poradie čítania. Ide o prenosné adaptérové zmluvy; neznamená to, že už existuje registrovaná lokálna skratka alebo blok.

Prenosná Markdown direktíva

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

Ukážková cesta demonštruje iba syntax. Produkčná validácia ju musí zamietnuť, kým toto aktívum neexistuje.

Hugo skratka

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

Adaptér používa iba pomenované parametre. Kým nie je zaregistrovaný, použite sémantický <figure> za ktorým nasleduje próza. Adaptér overuje aktívum a zachováva mapovanie tela direktívy.

WordPress blok

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress by mal sprístupniť jedno pole pre médiá a obmedzenú textovú oblasť. Ak nie sú k dispozícii, použite natívne bloky Obrázok, Nadpis a Odsek; zachovajte význam aj bez vedľajšieho rozloženia.

Príklady

Dobrý príklad: obrázok je dôkaz

Toto funguje, pretože obrázok dokazuje dva fyzické detaily a text vysvetľuje ich prevádzkové dôsledky. Nadpis uvádza poznatok, popisok identifikuje viditeľný dôkaz a vysvetlenie zostáva konkrétne bez snahy inventarizovať celú fotografiu.

Zlý príklad: generická dekorácia prezentovaná ako dôkaz

Pracujte inteligentnejšie s prehľadnými dátami Obrázok: generická osoba usmievajúca sa na notebook vedľa farebných grafov. Naša inovatívna platforma premieňa dáta na použiteľné poznatky, aby každý tím mohol odomykať lepšie rozhodnutia a dosahovať viac.

Toto zlyháva, pretože ani jedna polovica neprináša overiteľné informácie. Obrázok by mohol inzerovať akýkoľvek softvérový produkt, zatiaľ čo text obsahuje široké výsledky bez mechanizmu, detailu rozhrania, obmedzenia alebo príkladu. Dvojica vytvára vizuálnu výraznosť, ale žiadny význam, ktorý by čitateľ alebo stroj mohli extrahovať. Nahraďte ho cieleným stavom produktu a vysvetlením jedného rozhodnutia, ktoré podporuje, alebo odstráňte imagebox a napíšte tvrdenie ako bežnú prózu s dôkazmi.

Značkovanie schémou a prístupnosť

Imagebox nemá vyhradený typ Schema.org. Jeho text zostáva súčasťou entity obklopujúcej stránky. Obrázok ako obsah môže byť ImageObject, ak má stabilné contentUrl, presný popisok, rozmery a požadované metadáta o autorstve alebo licencii. Dekoratívne ilustrácie nepotrebujú samostatnú entitu.

Schéma na úrovni stránky môže odkazovať na rovnaký reprezentatívny obrázok. Fotografia detailu produktu môže napájať vlastnosť image viditeľného produktu, ale výrez grafu sa nestáva Dataset a snímka obrazovky sa nestáva SoftwareApplication.

Použite jeden <figure> a <figcaption> plus označenú vysvetľujúcu oblasť. Nastavte intrinsické width a height; responzívny výstup nesmie horizontálne posúvať ani orezať pomenovaný detail.

Alternatívny text pomenúva relevantný predmet, stav a rozhodujúci detail obrázka ako obsahu. Nezačínajte „obrázok“, neduplikujte popisok ani nevkladajte kľúčové slová. Nadbytočné ilustrácie používajú alt=""; vynechanie atribútu môže odhaliť názov súboru.

Nespoliehajte sa len na pozíciu, farbu alebo pixely. Zopakujte rozhodujúce čísla, štítky, varovania a závery v texte. Zabezpečte, aby boli odkazy dosiahnuteľné klávesnicou, nikdy nerobte z celého poľa jeden odkaz, zachovajte poradie v zdroji a testujte pri 200% zväčšení.

Pravidlá písania

Napíšte vysvetlenie pred výberom obrázka, potom vyberte najužší výrez, ktorý zachováva potrebný kontext.

• Napíšte nadpis o 3–10 slovách, ktorý uvádza poznatok, tému alebo vzťah. Vyhnite sa „Obrázok“, „Prehľad“, „Dozvedieť sa viac“ a „Pozrieť v akcii“.
• Udržujte vysvetľujúci text na 40–140 slovách v jednom alebo dvoch odsekoch. Prvok podporuje jednu pointu, nie miniatúrny článok.
• Udržujte popisky na 5–25 slovách. Identifikujte, čo je zobrazené a kontext potrebný na jeho interpretáciu; úvahy umiestnite do tela.
• Použite 40–180 znakov pre zmysluplný alternatívny text s tvrdým maximom 250 znakov. Uprednostnite presnosť pred naplnením rozsahu.
• Zahrňte presne jeden obrázok a najviac jeden kontextuálny textový odkaz. Odkazujte len vtedy, keď cieľ materiálne prehlbuje vysvetlenie.
• Použite jeden hlas a jeden čas v celom nadpise, popisku a tele. Uprednostnite konkrétne podstatné mená a slovesá pred propagačnými prídavnými menami.
• Uveďte obmedzenie vedľa interpretácie, keď obrázok zobrazuje iba jeden stav, dátum, výrez, zariadenie alebo príklad.

Nikdy dovnútra nedávajte zoznam, tabuľku, referenciu, cenu, formulár, médiá, súbor na stiahnutie, tlačidlo, viackrokovú inštrukciu, vyhlásenie alebo výzvu na akciu. Nepoužívajte dva obrázky, nevkladajte základný text do pixelov, nevystavujte zákaznícke dáta ani nezverejňujte dielo s neznámymi právami.

Vyhnite sa písaniu „ako môžete vidieť“. Čitateľ nemusí obrázok vidieť a aj vidiaci čitateľ potrebuje vedieť, aké pozorovanie je dôležité. Uveďte to priamo: „Poistná záložka je v jednej rovine, keď je konektor úplne zasunutý.“

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

Riadky nižšie sú riadené frontmatter položkou postTypes. „Použitie“ opisuje vhodnú úlohu, nie požiadavku vnútiť imagebox do každej stránky.

Kontrolný zoznam QA

Pred publikovaním overte celý prvok:

• Obrázok a vysvetlenie tvoria jednu pointu a patria do jednej redakčnej jednotky.
• role je explicitne content alebo illustration, vybrané pomocou testu odstránenia.
• Zdrojový súbor existuje, je schválený a nepoužíva žiadne súkromné údaje, neznáme práva ani náhradné aktívum.
• Nadpis uvádza poznatok v 3–10 slovách a telo ho vysvetľuje v 40–140 slovách.
• Obrázok ako obsah má zmysluplný alternatívny text a stručný popisok; nadbytočná ilustrácia používa prázdny alt text.
• Text uvádza každé rozhodujúce číslo, štítok, inštrukciu, varovanie a záver, ktoré sa nemôžu spoliehať na zrak.
• Popisok identifikuje obrázok bez duplikovania tela alebo alternatívneho textu.
• Akýkoľvek požadovaný odkaz na tvorcu, zdroj, licenciu alebo autorstvo je presný a viditeľný.
• Blok obsahuje jeden obrázok, jedno vysvetlenie a najviac jeden kontextuálny textový odkaz.
• Neobsahuje vnorený zoznam, tabuľku, médiá, tlačidlo, formulár, výzvu na akciu ani interaktívnu kartu.
• Nenahrádza lepšiu anotovanú snímku obrazovky, porovnanie, diagram, galériu alebo obrázok v plnej šírke.
• Rozloženie na počítači aj mobile zachováva sémantické poradie v zdroji, pripojenie popisku a poradie na klávesnici.
• Zmysluplný výrez prežije responzívne zmeny veľkosti, 200% zväčšenie a zlyhanie načítania obrázka.
• Šírka a výška rezervujú miesto, zatiaľ čo lenivé načítanie nezdržuje obrázok nad záhybom.
• Štruktúrované dáta, ak sú emitované, zodpovedajú viditeľnému obsahu a nepopisujú dekoráciu ako samostatnú entitu.
• Mapovania v prenosnom Markdown, Hugo a WordPress zachovávajú rovnakú úlohu, polia a význam.

FAQ

Akademická šablóna vykresľuje päť recenzovaných otázok uložených v [[faq]] frontmatter tejto stránky. Pokrývajú test obsahu verzus ilustrácie, dekoratívny alternatívny text, rozsah popisu, výzvy na akciu a schému ImageObject.

Imagebox je úspešný, keď čitateľ vie okamžite odpovedať na dve otázky: „Čo tento obrázok prináša?“ a „Prečo je to tu dôležité?“ Ak je niektorá odpoveď nejasná, posilnite vzťah alebo odstráňte blok.