Imagini Inline: Reguli și Exemple

O imagine inline este o singură imagine plasată în fluxul de lectură pentru a clarifica sau demonstra punctul imediat din jurul ei. Nu este o galerie, un panou promoțional sau un substitut pentru text. Întreabă-te ce poate înțelege sau verifica cititorul după ce o vede, pe care cuvintele din apropiere nu îl oferă la fel de eficient.

Decupajul cheiat împiedică conectorul să intre în priză în orientarea greșită.

Elementul redat de mai sus aparține imediat după un paragraf care îi spune cititorului să verifice orientarea conectorului. Decupajul face vizibilă crestătura, legenda enunță semnificația acesteia, iar instrucțiunea următoare poate continua fără a-i cere cititorului să decodeze o scenă mare, fără legătură.

De ce contează acest element

Cititorii alternează între scanare și inspecție focalizată. O imagine bine plasată transformă o descriere abstractă într-o formă recognoscibilă, arată dovezi sau reduce efortul necesar pentru a imagina o stare vizuală. Plasamentul implică faptul că ea explică textul din apropiere. Când această relație este slabă, cititorii o inspectează, nu găsesc niciun sens suplimentar și trebuie să-și recapete locul.

Principiul psihologic relevant este semnalizarea. Decupajul, legenda și textul din jur dirijează atenția către detaliul care contează. O fotografie a unei mașini întregi este slabă atunci când fraza se referă la o ureche de blocare de doi centimetri. Un decupaj focalizat al acelei urechi îi oferă cititorului o singură întrebare vizuală de răspuns. Imaginea nu are nevoie de săgeți sau text încorporat atunci când încadrarea singură poate face subiectul evident.

Extractibilitatea automată este capacitatea software-ului de a identifica o unitate și de a păstra relația acesteia cu sensul din apropiere. Un <figure> semantic care conține un <img> și un <figcaption> opțional oferă crawlerelor, tehnologiei de asistare, instrumentelor de migrare și sistemelor de regăsire AI o unitate stabilă. Textul alternativ enunță ce contribuie imaginea; dimensiunile descriu geometria sa; o legendă expune interpretarea sau proveniența din afara pixelilor.

Mașinile nu trebuie să aibă nevoie de viziune computerizată pentru a recupera o instrucțiune esențială, un număr, un avertisment sau o concluzie. Dacă o imagine conține o măsurătoare sau o etichetă decisivă, repetă acea informație în textul din apropiere sau folosește un tabel structurat. Regulile de redactare a elementelor controlează sintaxa directivelor partajate, căile sursă, maparea corpului și precedența. Această pagină are precedență pentru câmpurile imaginilor inline, dimensionare, încărcare, legendă și decizii privind textul alternativ.

Când să îl folosești

Folosește o imagine inline atunci când un element vizual susține direct o idee din apropiere și imaginea rămâne utilă la lățimea coloanei de lectură. Sarcinile potrivite includ: arătarea unui detaliu fizic, identificarea unui loc sau obiect, prezentarea unei stări simple de dinainte-și-după, oferirea unei dovezi vizuale a unei condiții testate sau demonstrarea aspectului unui rezultat care nu necesită adnotări.

Aplică trei teste înainte de a o adăuga:

1. Testul contribuției: Numește informația nouă, dovada sau recunoașterea pe care o furnizează imaginea.
2. Testul contextului: Identifică paragraful exact pe care îl susține imaginea. Dacă trei secțiuni ar putea să o revendice în mod egal, scopul său este probabil prea larg.
3. Testul eliminării: Ascunde imaginea. Dacă nu se pierde nimic semnificativ, marcheaz-o ca decorativă doar atunci când designul chiar are nevoie de ea; altfel, elimin-o.

Cazurile aproape corecte cauzează cele mai multe utilizări greșite. Folosește o captură de ecran adnotată atunci când cititorii trebuie să localizeze comenzi sau să potrivească mai multe regiuni numerotate. Folosește o diagramă atunci când conținutul este o relație, o secvență sau un sistem, mai degrabă decât un obiect vizibil. Folosește o galerie atunci când mai multe imagini de același nivel trebuie răsfoite. Folosește un tabel comparativ atunci când diferențele depind de criterii repetate. Folosește un imagebox atunci când o imagine și o explicație substanțială formează o unitate autonomă pe două coloane.

Nu insera o fotografie generică de stoc doar pentru a fragmenta textul. O strângere de mână nu dovedește un parteneriat; un laptop nu explică un software; un bec nu face o idee mai clară. Nu publica text ca imagine pentru a păstra tipografia. Nu folosi o captură de ecran pentru proză, un grafic fără valori lizibile sau o imagine a cărei licență și proveniență sunt necunoscute.

Unde să îl plasezi

Plasează imaginea imediat după paragraful care introduce ceea ce cititorul ar trebui să inspecteze. Motivul vine primul, astfel încât cititorul să știe încotro să-și îndrepte atenția. Urmează figura cu interpretare doar atunci când imaginea este o dovadă a cărei consecință nu este evidentă. Într-o procedură, plaseaz-o după acțiunea relevantă și înainte de verificarea succesului; nu despărți niciodată o frază de calificarea sa sau o instrucțiune de avertismentul său.

O imagine inline poate sta sub un H2 doar atunci când titlul și primul paragraf îi stabilesc scopul. Păstrează figura, legenda și creditul împreună în layout-uri responsive și la întreruperi de pagină.

Nu o plasa în interiorul unui paragraf, element de listă, celulă de tabel, callout, acordeon, card clickabil sau alt element media. Nu pune două imagini inline una după alta: combină elementele cu adevărat similare într-o galerie sau adaugă explicația care diferențiază rolurile lor. Nu poate sta lângă un tabel dens, un videoclip, un grafic sau un îndemn la acțiune, unde ambele obiecte concurează pentru atenție. Păstrează cel puțin un paragraf semnificativ între unitățile media separate, cu excepția cazului în care acestea formează o comparație definită în mod explicit.

Folosește lățimea normală a conținutului în mod implicit și o prezentare mai îngustă pentru un obiect mic sau portret. Folosește un container media lat aprobat doar atunci când detaliul nu poate fi citit altfel; nu crea niciodată derulare orizontală la nivel de pagină.

Anatomie

1. Limita figurii: Grupează materialul, legenda și creditul ca o singură unitate în fluxul documentului.
2. Sursa imaginii: Se rezolvă la un material aprobat, existent, nu la un hotlink de la distanță sau un substituent.
3. Text alternativ: Înlocuiește funcția contextuală a imaginii pentru cititorii care nu o pot percepe; este gol doar pentru decorare.
4. Dimensiuni intrinseci: Rezervă raportul de aspect corect înainte ca fișierul să sosească și previn mișcările de layout.
5. Candidați responsive: Permit browserului să aleagă un fișier de dimensiune adecvată, în loc să descarce cea mai mare sursă peste tot.
6. Dimensiune redată: Menține detaliul relevant lizibil fără a depăși limita sau a scala în sus o sursă slabă.
7. Legendă: Adaugă interpretare, identificare, dată, scară sau proveniență atunci când această informație ajută fiecare cititor.
8. Credit: Înregistrează creatorul și sursa atunci când politica de licențiere sau editorială o cere.

Numele fișierului imagine și textul alternativ nu sunt interschimbabile. Un nume de fișier stabil ajută la întreținerea materialelor; textul alternativ contextual explică scopul imaginii în această apariție. Aceeași fotografie poate avea, prin urmare, text alternativ diferit atunci când susține puncte diferite, deși reutilizarea aceleiași imagini pentru puncte fără legătură este un semnal de alarmă.

Exemple de design

Elementul suportă trei variante semantice și două tratamente de lățime. Comportamentul de încărcare nu este o variantă vizuală.

Imagine informativă, lățime de conținut

Aceasta este valoarea implicită. Imaginea contribuie cu un detaliu sau o dovadă recognoscibilă, folosește text alternativ ne-gol și rămâne în interiorul containerului de lectură.

Imagine informativă, media lat

Folosește containerul lat aprobat doar atunci când o hartă, o fotografie detaliată sau un rezultat lizibil are nevoie de mai mult spațiu orizontal. Textul din jur deține în continuare sensul, iar prezentarea pe mobil trebuie să rămână utilizabilă.

Imagine decorativă

Decorarea nu poartă informații unice, folosește alt="", nu are legendă explicativă și ar trebui să fie rară în conținutul editorial de lungă durată. Nu trebuie să fie singura exprimare a stării de spirit, statutului, identității sau rezultatului.

Imagine de detaliu cu expandare opțională

Folosește expandarea doar atunci când redarea normală inline stabilește contextul, dar detaliul fin necesită o vedere mai mare. Imaginea în sine rămâne inteligibilă fără a activa linkul, iar numele accesibil al comenzii descrie acțiunea.

Comportament pe fereastră de vizualizare îngustă

Fiecare variantă se scalează în jos în fereastra de vizualizare, păstrează raportul de aspect și menține legenda atașată. Dacă textul semnificativ devine ilizibil, furnizează un decupaj pentru mobil sau înlocuiește imaginea cu text structurat; forțarea zoom-ului prin ciupire nu este soluția implicită.

Parametri

Contractul stochează deciziile editoriale și de livrare. Bordurile, umbrele, spațierea și valorile punctelor de întrerupere aparțin motorului de randare.

Directiva nu are un câmp de titlu: o imagine inline aparține secțiunii din jur, mai degrabă decât să creeze o secțiune nouă. Primul său paragraf din corp se mapează la caption; nu se acceptă niciun prim titlu. Creditul provine din metadatele de încredere ale materialului atunci când este disponibil, împiedicând autorii să modifice în tăcere informațiile de licențiere.

Sintaxă și exemple de cod

Următoarele trei notații mapează aceeași sursă, text alternativ, dimensiuni intrinseci, dimensiune, legendă și intenție de încărcare. Căile materialelor din exemple demonstrează doar contractul; sursa de producție trebuie să se rezolve la un fișier existent.

Directivă portabilă Markdown

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

Primul paragraf este legenda. Paragrafe suplimentare, titluri, liste, butoane și medii imbricate sunt respinse deoarece ar transforma o figură focalizată într-un container general de conținut.

Shortcode Hugo

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

Parametrii numiți sunt utilizați exclusiv. Aceasta este o specificație de adaptor portabil, nu o afirmație că un shortcode local este înregistrat. Până când adaptorul există, folosește implementarea de figură semantică stabilită a sistemului de publicare; nu adăuga niciodată un apel de shortcode defect în conținutul de producție.

Bloc WordPress

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

Folosește metadatele bibliotecii media, dar revizuiește textul alternativ contextual pentru acest plasament. Nu lega către pagina de atașament în mod implicit.

Exemple

Bun: o imagine focalizată răspunde la întrebarea vizuală

Un ghid de instalare spune: „Înainte de a aplica tensiunea, aliniază crestătura cheiată cu muchia prizei; forțarea conectorului poate îndoi pinii.” Apoi plasează această figură:

Crestătura și muchia se aliniază înainte ca urechea de blocare să se poată angrena.

Acest exemplu funcționează deoarece imaginea apare după motivul de a o inspecta, decupajul conține ambele caracteristici potrivite, iar legenda explică relația, în loc să spună „imagine conector”. Instrucțiunea și consecința rămân în text. Dimensiunile intrinseci previn mișcarea în timpul încărcării, iar imaginea poate fi încărcată cu întârziere deoarece apare mult sub prima fereastră de vizualizare.

Rău: decorarea întrerupe fără a explica

Un articol despre configurarea analiticii inserează o fotografie de stoc pe lățimea întreagă a unei persoane care se uită la grafice colorate între un pas și avertismentul său. Textul său alternativ spune „analytics dashboard SEO optimization reporting data”, sursa are 5000 de pixeli lățime, nu sunt declarate dimensiuni, iar fișierul se încarcă eager la jumătatea paginii.

Imaginea este rea deoarece nu dovedește nicio stare de configurare, separă o acțiune riscantă de avertismentul său, înghesuie cuvinte-cheie în textul alternativ, descarcă mai mulți pixeli decât poate folosi layout-ul și poate deplasa avertismentul atunci când înălțimea sa devine cunoscută. Elimin-o. Dacă interfața reală conține o comandă ambiguă, înlocuiește-o cu o captură de ecran focalizată, actuală, și păstrează avertismentul atașat acțiunii.

Marcare schema și accesibilitate

O imagine inline nu creează nicio entitate schema specială în mod implicit. O imagine semnificativă poate furniza proprietatea image a lui Article, HowTo, Product, Review sau a unei alte entități adecvate. Folosește ImageObject doar cu un contentUrl stabil și metadate disponibile veridice, cum ar fi legenda, dimensiunile, creatorul și licența. Nu marca schema pentru decorare sau drepturi neverificate.

Un text alternativ bun descrie funcția în context, nu fiecare obiect vizibil. Întreabă ce frază ar înlocui imaginea dacă aceasta nu s-ar încărca. „Connector close-up showing the keyed notch aligned with the matching socket ridge” este util într-un ghid de instalare. „Un obiect negru și argintiu pe un fundal gri” este literal din punct de vedere vizual, dar slab din punct de vedere funcțional. Evită „imagine a” și „fotografie a” cu excepția cazului în care mediul în sine contează, cum ar fi distingerea unei fotografii de o simulare.

Fiecare <img> are nevoie de un atribut alt. Folosește text ne-gol pentru imaginile informative și alt="" pentru decorare. Omisiunea atributului nu este echivalentă: unele cititoare de ecran anunță numele fișierului. Nu pune proză esențială, instrucțiuni, citări sau serii lungi de date în interiorul pixelilor. Dacă textul vizibil din imagine contează, repetă-l în conținutul din jur.

Folosește <figure> și <figcaption> atunci când o legendă aparține imaginii. Nu adăuga un rol de figură manual. O imagine expandabilă are nevoie de o comandă vizibilă, operabilă prin tastatură, cu un nume descriptiv, mișcare focală predictibilă, suport Escape când deschide un modal și acces la același text alternativ și legendă la dimensiunea mărită. Nu înfășura fiecare imagine într-un link neetichetat către fișierul sursă.

Livrarea responsive face parte din SEO-ul pentru imagini și accesibilitate, deoarece face conținutul disponibil fără întârziere inutilă. Folosește srcset și sizes sau un pipeline de imagini echivalent, astfel încât designul responsive să poată selecta un candidat potrivit. Păstrează raportul de aspect, setează width și height intrinseci și limitează lățimea maximă redată la containerul său. Aceste dimensiuni rezervă spațiu și reduc Cumulative Layout Shift , mișcarea conținutului paginii în timp ce resursele se încarcă.

Încărcarea lentă amână o resursă din afara ecranului până când cititorul se apropie de ea. Folosește loading="lazy" pentru imaginile aflate sub fereastra de vizualizare inițială. Nu încărca cu întârziere o imagine care va apărea probabil imediat, deoarece întârzierea poate face ca cel mai mare conținut vizibil să sosească mai târziu. Folosește încărcare eager și fetchpriority="high" doar atunci când măsurarea și poziția în șablon identifică imaginea ca un probabil material primar de deasupra pliului; mai multe imagini cu prioritate ridicată anulează semnalul.

Reguli de redactare

Textul din jurul unei imagini inline face cea mai mare parte a muncii de interpretare, așa că concizia în element nu înseamnă vagitate.

• Introdu motivul înaintea figurii, într-un paragraf din apropiere. Nu folosi un limbaj de coordonare precum „mai jos” atunci când layout-urile responsive sau sindicalizate pot muta materialul.
• Scrie text alternativ informativ pentru funcția imaginii în acest context exact. Țintește 40–160 de caractere; folosește până la 250 doar atunci când complexitatea o cere cu adevărat.
• Păstrează legendele la 5–30 de cuvinte și, când este posibil, o singură frază. Identifică, interpretează, datează, scala sau creditează imaginea; nu repeta pur și simplu textul alternativ.
• Arată un singur subiect sau relație principală. Dacă cititorul trebuie să inspecteze mai mult de trei zone independente, folosește o captură de ecran adnotată, o diagramă, un tabel sau o galerie.
• Folosește ortografie americană, limbaj simplu și aceeași terminologie ca secțiunea din jur. Textul alternativ nu este un câmp de cuvinte-cheie.
• Păstrează toate instrucțiunile esențiale, avertismentele, măsurătorile, prețurile, datele și concluziile în text HTML, chiar și atunci când apar și în pixeli.
• Nu plasa niciodată titluri, paragrafe multiple, liste, tabele, butoane, formulare, videoclipuri, audio sau o altă imagine în interiorul corpului elementului.
• Nu folosi niciodată o legendă goală pentru a crea spațiere, un credit inventat, un hotlink de la distanță, un material fără licență, date ale clienților fără permisiune sau o cale de substituent inexistentă.
• Nu întinde, distorsiona sau scala niciodată în sus o imagine pentru a umple un slot de design. Decupează doar atunci când decupajul păstrează dovada și contextul discutate de text.

Tipuri de postări care îl folosesc

Matricea postTypes din front matter este joncțiunea canonică. Un tip de postare poate restrânge cerința, dar nu modifică contractul de câmp sau de accesibilitate al elementului.

Lista de verificare QA

• Scop: Recenzentul poate enunța informația unică, dovada sau recunoașterea pe care o adaugă imaginea.
• Plasament: Paragraful precedent stabilește ce să inspecteze și niciun avertisment, calificare sau citare nu a fost separat de afirmația sa.
• Element corect: O singură imagine inline este mai potrivită decât o captură de ecran adnotată, o galerie, o diagramă, un tabel sau un imagebox.
• Validitatea materialului: Sursa există, folosește un format aprobat și o cale relativă la rădăcină și are drepturi și proveniență verificate.
• Confidențialitate: Imaginea nu conține date neaprobate ale clienților, nume, adrese de e-mail, tokenuri, detalii despre browser sau indicii de localizare.
• Decupaj și calitate: Subiectul rămâne lizibil la lățimile redate și pe mobil, fără distorsiuni, spațiu gol evitabil sau compresie distructivă.
• Text alternativ: Atributul alt este prezent și fie informativ contextual, fie intenționat gol pentru decorare; nu este un nume de fișier, o duplicare a legendei sau o listă de cuvinte-cheie.
• Legendă: Când este prezentă, adaugă identificare, interpretare, dată, scară sau proveniență în 5–30 de cuvinte.
• Dimensiuni: Lățimea și înălțimea intrinseci corespund raportului sursei și rezervă spațiu de layout stabil.
• Livrare responsive: Dimensiunile candidate corespund lățimilor realiste de afișare; cea mai mare sursă nu este trimisă în mod implicit fiecărei ferestre de vizualizare.
• Încărcare: Imaginile de sub pliul paginii sunt încărcate cu întârziere (lazy); imaginile vizibile inițial nu sunt; prioritatea ridicată de preluare este limitată la un candidat principal măsurat.
• Comportament pe mobil: Imaginea se potrivește fără derulare orizontală la nivel de pagină, iar detaliul său semnificativ rămâne lizibil fără zoom forțat.
• Text de rezervă: Instrucțiunile esențiale, avertismentele, măsurătorile și concluziile există în textul paginii, nu doar în pixeli.
• Date structurate: Orice proprietăți schema sunt precise, susținute de conținut vizibil și omise pentru decorare.
• Paritate portabilă: Markdown, Hugo și WordPress păstrează aceeași sursă, text alternativ, dimensiuni, legendă, credit și intenție de încărcare.
• Capturi în așteptare: Nicio cale inexistentă nu se redă; fiecare exemplu solicitat rămâne un comentariu SCREENSHOT în timp ce screenshotsPending = true.

FAQ

Șablonul academy redă cele cinci întrebări revizuite stocate în front matter-ul [[faq]] al acestei pagini. Acestea acoperă textul alternativ, încărcarea lentă, legendele, dimensionarea și decizia de a elimina o imagine care nu adaugă nimic.