Obrazy w treści: zasady i przykłady

Obraz w treści to pojedynczy obraz umieszczony w strumieniu czytania, aby wyjaśnić lub udowodnić otaczający go punkt. Nie jest to galeria, panel promocyjny ani zastępstwo tekstu. Zastanów się, co czytelnik może zrozumieć lub zweryfikować po jego zobaczeniu, czego otaczające słowa nie dostarczają równie efektywnie.

Wycięty rowek zapobiega wejściu wtyczki do gniazda w nieprawidłowej orientacji.

Powyższy element renderowany znajduje się bezpośrednio po akapicie, który instruuje czytelnika, aby sprawdził orientację wtyczki. Kadr uwidacznia rowek, podpis wyjaśnia jego znaczenie, a kolejna instrukcja może być kontynuowana bez zmuszania czytelnika do dekodowania dużego, niezwiązanego z tematem obrazu.

Dlaczego ten element jest ważny

Czytelnicy przełączają się między skanowaniem a skupioną inspekcją. Dobrze umieszczony obraz przekształca abstrakcyjny opis w rozpoznawalny kształt, pokazuje dowody lub zmniejsza wysiłek potrzebny do wyobrażenia sobie stanu wizualnego. Umiejscowienie sugeruje, że wyjaśnia on pobliki tekst. Gdy ta relacja jest słaba, czytelnicy oglądają go, nie znajdują dodatkowego znaczenia i muszą odzyskać swoje miejsce w tekście.

Odpowiednią zasadą psychologiczną jest sygnalizacja. Kadr, podpis i otaczający tekst kierują uwagę na istotny szczegół. Zdjęcie całej maszyny jest słabe, gdy zdanie dotyczy dwucentymetrowej blokady. Skupiony kadr tej blokady daje czytelnikowi jedno pytanie wizualne do odpowiedzi. Obraz nie potrzebuje strzałek ani osadzonej prozy, gdy samo kadrowanie może uczynić przedmiot oczywistym.

Ekstrahowalność maszynowa to zdolność oprogramowania do identyfikacji jednostki i zachowania jej relacji z otaczającym znaczeniem. Semantyczny element <figure> zawierający <img> i opcjonalny <figcaption> daje robotom indeksującym, technologiom asystującym, narzędziom migracyjnym i systemom AI do wyszukiwania stabilną jednostkę. Tekst alternatywny określa, co obraz wnosi; wymiary opisują jego geometrię; podpis ujawnia interpretację lub pochodzenie poza pikselami.

Maszyny nie mogą potrzebować wizji komputerowej, aby odzyskać istotną instrukcję, liczbę, ostrzeżenie lub wniosek. Jeśli obraz zawiera decydujący pomiar lub etykietę, powtórz tę informację w pobliskim tekście lub użyj strukturalnej tabeli. Zasady pisania elementów kontrolują wspólną składnię dyrektyw, ścieżki źródłowe, mapowanie treści i pierwszeństwo. Ta strona ma pierwszeństwo w kwestiach pól obrazów w treści, wymiarowania, ładowania, podpisu i tekstu alternatywnego.

Kiedy używać

Użyj obrazu w treści, gdy jeden obraz bezpośrednio wspiera jedną pobliską ideę i pozostaje użyteczny przy szerokości kolumny czytania. Odpowiednie zastosowania obejmują pokazanie fizycznego detalu, identyfikację miejsca lub obiektu, przedstawienie prostego stanu przed i po, dostarczenie wizualnego dowodu testowanego warunku lub zademonstrowanie wyglądu wyniku, który nie wymaga adnotacji.

Wykonaj trzy testy przed dodaniem:

1. Test wkładu: Nazwij nową informację, dowód lub rozpoznanie, które obraz dostarcza.
2. Test kontekstu: Zidentyfikuj dokładny akapit, który obraz wspiera. Jeśli trzy sekcje mogłyby go równie dobrze reklamować, jego cel jest prawdopodobnie zbyt szeroki.
3. Test usunięcia: Ukryj obraz. Jeśli nic znaczącego nie zostanie utracone, oznacz go jako dekoracyjny tylko wtedy, gdy projekt naprawdę go potrzebuje; w przeciwnym razie usuń go.

Przypadki bliskie błędu powodują większość niewłaściwych zastosowań. Użyj zrzutu ekranu z adnotacjami, gdy czytelnicy muszą zlokalizować elementy sterujące lub dopasować kilka ponumerowanych obszarów. Użyj diagramu, gdy treść dotyczy relacji, sekwencji lub systemu, a nie widocznego obiektu. Użyj galerii, gdy wiele podobnych obrazów musi być przeglądanych. Użyj tabeli porównawczej, gdy różnice zależą od powtarzających się kryteriów. Użyj imageboksa, gdy obraz i obszerne wyjaśnienie tworzą samodzielną dwukolumnową jednostkę.

Nie wstawiaj generycznego zdjęcia stockowego tylko po to, aby przełamać tekst. Uścisk dłoni nie dowodzi partnerstwa; laptop nie wyjaśnia oprogramowania; żarówka nie rozjaśnia idei. Nie publikuj tekstu jako obrazu, aby zachować typografię. Nie używaj zrzutu ekranu dla prozy, wykresu bez czytelnych wartości ani obrazu, którego licencja i pochodzenie są nieznane.

Gdzie umieścić

Umieść obraz bezpośrednio po akapicie, który wprowadza to, co czytelnik powinien obejrzeć. Najpierw pojawia się powód, aby czytelnik wiedział, na co skierować uwagę. Po elemencie graficznym dodaj interpretację tylko wtedy, gdy obraz jest dowodem, którego konsekwencja nie jest oczywista. W procedurze umieść go po odpowiedniej czynności, a przed sprawdzeniem sukcesu; nigdy nie rozdzielaj zdania od jego uzupełnienia ani instrukcji od ostrzeżenia.

Obraz w treści może znajdować się poniżej H2 tylko wtedy, gdy nagłówek i pierwszy akapit określają jego cel. Zachowaj element graficzny, podpis i źródło razem w responsywnych układach i przy podziałach stron.

Nie umieszczaj go wewnątrz akapitu, elementu listy, komórki tabeli, wyróżnienia, akordeonu, klikalnej karty ani innego elementu medialnego. Nie umieszczaj dwóch obrazów w treści jeden za drugim: połącz prawdziwe odpowiedniki w galerię lub dodaj wyjaśnienie rozróżniające ich role. Nie może znajdować się obok gęstej tabeli, wideo, wykresu ani wezwania do działania, gdzie oba obiekty konkurują o uwagę. Zachowaj co najmniej jeden znaczący akapit pomiędzy oddzielnymi jednostkami medialnymi, chyba że tworzą one jedną wyraźnie zdefiniowaną jednostkę porównawczą.

Domyślnie używaj normalnej szerokości treści, a węższej prezentacji dla małych obiektów lub portretów. Używaj zatwierdzonego szerokiego kontenera medialnego tylko wtedy, gdy szczegół nie może być odczytany w inny sposób; nigdy nie twórz poziomego przewijania na poziomie strony.

Anatomia

1. Granica elementu graficznego: Grupuje zasób, podpis i źródło jako jedną jednostkę w przepływie dokumentu.
2. Źródło obrazu: Odnosi się do zatwierdzonego, istniejącego zasobu, a nie zdalnego linku lub placeholderu.
3. Tekst alternatywny: Zastępuje kontekstową funkcję obrazu dla czytelników, którzy nie mogą go dostrzec; jest pusty tylko dla dekoracji.
4. Naturalne wymiary: Rezerwują prawidłowe proporcje przed dostarczeniem pliku i zapobiegają przesuwaniu układu.
5. Kandydaci responsywni: Pozwalają przeglądarce wybrać plik o odpowiednim rozmiarze, zamiast pobierać największe źródło wszędzie.
6. Rozmiar renderowany: Utrzymuje czytelność istotnych szczegółów bez przepełniania lub skalowania w górę słabego źródła.
7. Podpis: Dodaje interpretację, identyfikację, datę, skalę lub źródło, gdy te informacje pomagają każdemu czytelnikowi.
8. Źródło: Odnotowuje twórcę i źródło, gdy wymaga tego licencja lub polityka redakcyjna.

Nazwa pliku i tekst alternatywny nie są wymienne. Stabilna nazwa pliku pomaga w utrzymaniu zasobów; kontekstowy tekst alternatywny wyjaśnia cel obrazu w tym konkretnym wystąpieniu. To samo zdjęcie może zatem mieć różny tekst alternatywny, gdy wspiera różne punkty, choć ponowne użycie jednego obrazu dla niezwiązanych ze sobą punktów jest sygnałem ostrzegawczym.

Przykłady projektowe

Element wspiera trzy warianty semantyczne i dwa podejścia do szerokości. Zachowanie ładowania nie jest wariantem wizualnym.

Obraz informacyjny, szerokość treści

To ustawienie domyślne. Obraz wnosi rozpoznawalny szczegół lub dowód, używa niepustego tekstu alternatywnego i pozostaje w kontenerze czytania.

Obraz informacyjny, szeroki media

Użyj zatwierdzonego szerokiego kontenera tylko wtedy, gdy mapa, szczegółowe zdjęcie lub czytelny wynik potrzebuje więcej miejsca poziomego. Otaczający tekst nadal nadaje znaczenie, a prezentacja mobilna musi pozostać użyteczna.

Obraz dekoracyjny

Dekoracja nie niesie unikalnych informacji, używa alt="", nie ma wyjaśniającego podpisu i powinna być rzadka w długich treściach produkcyjnych. Nie może być jedynym wyrazem nastroju, statusu, tożsamości ani rezultatu.

Obraz szczegółowy z opcjonalnym powiększeniem

Użyj powiększenia tylko wtedy, gdy normalne renderowanie w treści ustanawia kontekst, ale drobny szczegół wymaga większego widoku. Obraz pozostaje zrozumiały bez aktywowania linku, a dostępna nazwa elementu sterującego opisuje działanie.

Zachowanie na wąskim ekranie

Każdy wariant skaluje się w dół w obrębie okna widoku, zachowuje proporcje i utrzymuje podpis. Jeśli znaczący tekst staje się nieczytelny, zapewnij mobilny kadr lub zastąp obraz ustrukturyzowanym tekstem; wymuszanie powiększania palcami nie jest domyślnym rozwiązaniem.

Parametry

Kontrakt przechowuje decyzje redakcyjne i dotyczące dostarczania. Obramowania, cienie, odstępy i wartości punktów granicznych należą do renderera.

Dyrektywa nie ma pola tytułu: obraz w treści należy do otaczającej sekcji, zamiast tworzyć nową sekcję. Jego pierwszy akapit treści mapuje się na caption; nie jest akceptowany pierwszy nagłówek. Źródło pochodzi z zaufanych metadanych zasobu, gdy są dostępne, uniemożliwiając autorom cichą zmianę informacji licencyjnych.

Składnia i przykłady kodu

Poniższe trzy notacje mapują to samo źródło, tekst alternatywny, naturalne wymiary, rozmiar, podpis i intencję ładowania. Przykładowe ścieżki zasobów demonstrują jedynie kontrakt; źródło produkcyjne musi wskazywać na istniejący plik.

Przenośna dyrektywa 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}
Wycięty rowek pozwala na włożenie tylko w jednej orientacji.
:::

Pierwszy akapit to podpis. Dodatkowe akapity, nagłówki, listy, przyciski i zagnieżdżone media są odrzucane, ponieważ zamieniłyby skupiony element graficzny w ogólny kontener treści.

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" >}}
Wycięty rowek pozwala na włożenie tylko w jednej orientacji.
{{< /inline-image >}}

Używane są wyłącznie nazwane parametry. Jest to specyfikacja przenośnego adaptera, a nie stwierdzenie, że lokalny shortcode jest zarejestrowany. Dopóki adapter nie istnieje, używaj ustalonej semantycznej implementacji elementu graficznego systemu publikacji; nigdy nie dodawaj uszkodzonego wywołania shortcode do treści produkcyjnej.

Blok 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">Wycięty rowek pozwala na włożenie tylko w jednej orientacji.</figcaption>
</figure>
<!-- /wp:image -->

Korzystaj z metadanych biblioteki mediów, ale zweryfikuj kontekstowy tekst alternatywny dla tego umiejscowienia. Domyślnie nie linkuj do strony załącznika.

Przykłady

Dobrze: skupiony obraz odpowiada na pytanie wizualne

Instrukcja montażu mówi: „Przed podłączeniem zasilania wyrównaj wycięty rowek z wypustką gniazda; wymuszanie wtyczki może wygiąć piny.” Następnie umieszcza ten element graficzny:

Rowek i wypustka wyrównują się, zanim blokada będzie mogła się zaskoczyć.

To działa, ponieważ obraz pojawia się po powodzie do jego obejrzenia, kadr zawiera oba pasujące elementy, a podpis wyjaśnia relację, zamiast mówić „obraz wtyczki.” Instrukcja i konsekwencja pozostają w tekście. Naturalne wymiary zapobiegają przesunięciu podczas ładowania, a obraz może być leniwie ładowany, ponieważ pojawia się dobrze poniżej pierwszego widoku.

Źle: dekoracja przerywa bez wyjaśnienia

Artykuł o konfigurowaniu analityki wstawia pełnoekranowe zdjęcie stockowe osoby patrzącej na kolorowe wykresy pomiędzy krokiem a jego ostrzeżeniem. Jego tekst alternatywny mówi „pulpit analityczny optymalizacja SEO dane raportowania,” źródło ma 5000 pikseli szerokości, nie zadeklarowano żadnych wymiarów, a plik ładuje się eagerly w połowie strony.

Obraz jest zły, ponieważ nie dowodzi żadnego stanu konfiguracji, oddziela ryzykowną czynność od jej ostrzeżenia, upycha słowa kluczowe w tekście alternatywnym, pobiera więcej pikseli, niż układ może wykorzystać, i może przesunąć ostrzeżenie, gdy jego wysokość stanie się znana. Usuń go. Jeśli rzeczywisty interfejs zawiera niejednoznaczny element sterujący, zastąp go skupionym, aktualnym zrzutem ekranu i zachowaj ostrzeżenie przy czynności.

Znaczniki schematu i dostępność

Obraz w treści domyślnie nie tworzy specjalnej encji schematu. Znaczący obraz może dostarczać właściwość image encji Article, HowTo, Product, Review lub innej odpowiedniej encji. Używaj ImageObject tylko ze stabilnym contentUrl i prawdziwymi dostępnymi metadanymi, takimi jak podpis, wymiary, twórca i licencja. Nie oznaczaj dekoracji ani niezweryfikowanych praw.

Dobry tekst alternatywny opisuje funkcję w kontekście, a nie każdy widoczny obiekt. Zastanów się, jakie zdanie zastąpiłoby obraz, gdyby nie mógł się załadować. „Connector close-up showing the keyed notch aligned with the matching socket ridge” jest przydatne w instrukcji montażu. „A black and silver object on a gray background” jest wizualnie dosłowne, ale funkcjonalnie słabe. Unikaj „obraz” i „zdjęcie”, chyba że sam nośnik ma znaczenie, na przykład odróżnianie zdjęcia od symulacji.

Każdy <img> potrzebuje atrybutu alt. Używaj niepustego tekstu dla obrazów informacyjnych i alt="" dla dekoracji. Pominięcie atrybutu nie jest równoznaczne: niektóre czytniki ekranu odczytują nazwę pliku. Nie umieszczaj istotnej prozy, instrukcji, cytatów ani długich serii danych w pikselach. Jeśli widoczny tekst na obrazie ma znaczenie, powtórz go w otaczającej treści.

Używaj <figure> i <figcaption>, gdy podpis należy do obrazu. Nie dodawaj ręcznie roli figure. Rozwijany obraz potrzebuje widocznego, obsługiwanego klawiaturą elementu sterującego z opisową nazwą, przewidywalnym ruchem fokusu, obsługą Escape po otwarciu modala i dostępem do tego samego tekstu alternatywnego i podpisu w powiększonym rozmiarze. Nie opakowuj każdego obrazu w nieoznaczony link do pliku źródłowego.

Responsywne dostarczanie jest częścią SEO obrazów i dostępności, ponieważ udostępnia treści bez niepotrzebnego opóźnienia. Używaj srcset i sizes lub równoważnego potoku obrazów, aby responsywny projekt mógł wybrać odpowiedniego kandydata. Zachowaj proporcje, ustaw naturalne width i height oraz ogranicz maksymalną wyświetlaną szerokość do jej kontenera. Te wymiary rezerwują miejsce i redukują Cumulative Layout Shift , czyli przesuwanie treści strony podczas ładowania zasobów.

Leniwe ładowanie odkłada zasób spoza ekranu do momentu, gdy czytelnik się do niego zbliży. Używaj loading="lazy" dla obrazów poniżej początkowego obszaru widoku. Nie ładuj leniwie obrazu, który prawdopodobnie pojawi się natychmiast, ponieważ opóźnienie może spowodować późniejsze dotarcie największej widocznej treści. Używaj eager loading i fetchpriority="high" tylko wtedy, gdy pomiar i pozycja w szablonie identyfikują obraz jako prawdopodobny główny zasób nad widocznym obszarem; wiele obrazów z wysokim priorytetem niweluje sygnał.

Zasady pisania

Pisanie wokół obrazu w treści wykonuje większość pracy interpretacyjnej, więc zwięzłość w elemencie nie oznacza niejasności.

• Wprowadź powód przed elementem graficznym w jednym pobliskim akapicie. Nie używaj języka współrzędnych, takiego jak „poniżej”, gdy responsywne lub syndykowane układy mogą przenieść zasób.
• Napisz informacyjny tekst alternatywny dla funkcji obrazu w tym dokładnym kontekście. Celuj w 40–160 znaków; używaj do 250 tylko wtedy, gdy złożoność naprawdę tego wymaga.
• Ogranicz podpisy do 5–30 słów i, gdy to możliwe, jednego zdania. Identyfikuj, interpretuj, datuj, skaluj lub podawaj źródło obrazu; nie powtarzaj po prostu tekstu alternatywnego.
• Pokaż jeden główny temat lub relację. Jeśli czytelnik musi obejrzeć więcej niż trzy niezależne obszary, użyj zrzutu ekranu z adnotacjami, diagramu, tabeli lub galerii.
• Używaj amerykańskiej pisowni, prostego języka i tej samej terminologii co otaczająca sekcja. Tekst alternatywny nie jest polem słów kluczowych.
• Zachowaj wszystkie istotne instrukcje, ostrzeżenia, pomiary, ceny, daty i wnioski w tekście HTML, nawet jeśli pojawiają się również w pikselach.
• Nigdy nie umieszczaj nagłówków, wielu akapitów, list, tabel, przycisków, formularzy, wideo, audio ani innego obrazu wewnątrz treści elementu.
• Nigdy nie używaj pustego podpisu do tworzenia odstępów, fikcyjnego źródła, zdalnego linku, nielicencjonowanego zasobu, danych klienta bez pozwolenia ani nieistniejącej ścieżki placeholderu.
• Nigdy nie rozciągaj, nie zniekształcaj ani nie skaluj w górę obrazu, aby wypełnić miejsce w projekcie. Kadruj tylko wtedy, gdy kadr zachowuje dowody i kontekst, o których mówi tekst.

Typy postów, które go używają

Tablica postTypes w frontmatterze jest kanonicznym połączeniem. Typ posta może zawężać wymaganie, ale nie zmienia kontraktu dotyczącego pól elementu ani dostępności.

Lista kontrolna QA

• Cel: Osoba recenzująca może określić unikalną informację, dowód lub rozpoznanie, które obraz dodaje.
• Umiejscowienie: Poprzedzający akapit ustanawia, co należy obejrzeć, a żadne ostrzeżenie, uzupełnienie ani cytat nie zostały oddzielone od swojego twierdzenia.
• Prawidłowy element: Pojedynczy obraz w treści jest bardziej odpowiedni niż zrzut ekranu z adnotacjami, galeria, diagram, tabela lub imagebox.
• Poprawność zasobu: Źródło istnieje, używa zatwierdzonego formatu i ścieżki względem katalogu głównego oraz ma zweryfikowane prawa i pochodzenie.
• Prywatność: Obraz nie zawiera niezatwierdzonych danych klienta, nazwisk, adresów e-mail, tokenów, szczegółów przeglądarki ani wskazówek lokalizacyjnych.
• Kadr i jakość: Temat pozostaje czytelny przy renderowanej i mobilnej szerokości bez zniekształceń, zbędnej pustej przestrzeni ani destrukcyjnej kompresji.
• Tekst alternatywny: Atrybut alt jest obecny i albo kontekstowo informacyjny, albo celowo pusty dla dekoracji; nie jest nazwą pliku, duplikatem podpisu ani listą słów kluczowych.
• Podpis: Gdy jest obecny, dodaje identyfikację, interpretację, datę, skalę lub źródło w 5–30 słowach.
• Wymiary: Naturalna szerokość i wysokość odpowiadają proporcjom źródła i rezerwują stabilne miejsce w układzie.
• Responsywne dostarczanie: Rozmiary kandydatów odpowiadają realistycznym szerokościom wyświetlania; największe źródło nie jest domyślnie wysyłane do każdego widoku.
• Ładowanie: Obrazy poniżej widoku są ładowane leniwie; początkowo widoczne obrazy nie są; wysoki priorytet pobierania jest ograniczony do zmierzonego głównego kandydata.
• Zachowanie na urządzeniach mobilnych: Obraz mieści się bez poziomego przewijania na poziomie strony, a jego znaczące szczegóły pozostają czytelne bez wymuszonego powiększania.
• Tekst awaryjny: Istotne instrukcje, ostrzeżenia, pomiary i wnioski istnieją w tekście strony, a nie tylko w pikselach.
• Dane strukturalne: Wszystkie właściwości schematu są dokładne, poparte widoczną treścią i pominięte dla dekoracji.
• Przenośna zgodność: Markdown, Hugo i WordPress zachowują to samo źródło, tekst alternatywny, wymiary, podpis, źródło i intencję ładowania.
• Oczekujące zrzuty: Żadna nieistniejąca ścieżka nie jest renderowana; każdy wymagany przykład pozostaje komentarzem SCREENSHOT, podczas gdy screenshotsPending = true.

FAQ

Szablon academy renderuje pięć przeanalizowanych pytań przechowywanych w [[faq]] frontmatter tej strony. Obejmują one tekst alternatywny, leniwe ładowanie, podpisy, wymiary i decyzję o usunięciu obrazu, który nic nie wnosi.