Softonic

Generator obrazów Markdown

Krok 1 / 3
Dalej

Składnia obrazu w Markdown, ![alt](src "title"), łatwo o pomyłkę: można pominąć nawias, zapomnieć o tekście alternatywnym albo pomylić ją ze składnią linku, a wtedy dokument wyświetli uszkodzony symbol zastępczy. Ten generator przyjmuje adres URL obrazu, tekst alternatywny, opcjonalny tytuł oraz opcjonalny cel linku, a następnie tworzy zarówno wbudowaną, jak i referencyjną wersję kodu Markdown, abyś mógł wkleić tę, która pasuje do Twojego dokumentu.

Jak wygenerować składnię obrazu Markdown

  1. 1

    Wklej adres URL obrazu

    Bezwzględny adres URL (https://...) lub ścieżka względna (/images/hero.png).

  2. 2

    Napisz tekst alternatywny

    Co przedstawia obraz, w jednym zdaniu. Wymagane ze względu na dostępność.

  3. 3

    Dodaj tytuł (opcjonalnie)

    Wyświetlany po najechaniu kursorem w większości mechanizmów renderujących.

  4. 4

    Otocz linkiem (opcjonalnie)

    Podaj adres URL, aby obraz stał się klikalny.

  5. 5

    Skopiuj fragment

    Otrzymasz wynik wbudowany `![alt](src)` lub w stylu referencyjnym `![alt][ref]`.

Cztery warianty składni

Wbudowany, bez tytułu:

![Zdjęcie główne produktu](/images/hero.png)

Wbudowany, z tytułem:

![Zdjęcie główne](/images/hero.png "Zdjęcie główne wykonane w październiku 2026")

Obraz klikalny (obraz otoczony linkiem):

[![Zdjęcie główne](/images/hero.png)](https://example.com/buy)

Styl referencyjny (utrzymuje długie adresy URL poza akapitem):

![Zdjęcie główne][hero]

[hero]: /images/hero.png "Zdjęcie główne wykonane w październiku 2026"

Tekst alternatywny ma znaczenie

  • Dostępność. Czytniki ekranu odczytują tekst alternatywny; pusty tekst alternatywny sprawia, że obraz jest praktycznie niewidoczny dla osoby z niepełnosprawnością wzroku.
  • SEO. Wyszukiwarki korzystają z tekstu alternatywnego, aby zrozumieć treść obrazu. Jego brak szkodzi ruchowi z wyszukiwarki grafiki.
  • Płynna degradacja. Jeśli obraz się nie załaduje, użytkownicy zobaczą tekst alternatywny.

Dobry i zły tekst alternatywny

Zamysł Dobry tekst alternatywny Zły tekst alternatywny
Zdjęcie produktu „Czerwony ceramiczny kubek na drewnianym biurku, ucho po lewej stronie“ „Obraz kubka“
Zrzut ekranu „Strona logowania z polami e-mail, hasło oraz przyciskami SSO“ „screenshot.png“
Dekoracyjny "" (pusty tekst alternatywny dla czystej dekoracji) „obraz dekoracyjny“
Infografika „Wykres słupkowy: przychody wzrosły z 1 mln zł w 2023 roku do 3 mln zł w 2026 roku“ „wykres słupkowy“

Pułapki

  • Nie zaczynaj tekstu alternatywnego od „Obraz przedstawiający“, czytniki ekranu już zapowiadają, że jest to obraz.
  • Ścieżki bezwzględne a względne. Ścieżki względne przestają działać, gdy dokument jest renderowany poza swoim folderem (np. w podglądzie na GitHubie). W razie wątpliwości używaj ścieżek bezwzględnych.
  • Spacje w adresach URL wymagają kodowania: %20 zamiast spacji, w przeciwnym razie obraz się nie załaduje.

Najczęściej zadawane pytania

Nie w czystym Markdown. Większość mechanizmów renderujących (GFM, Docusaurus, MkDocs) korzysta w tym celu z surowego kodu HTML, <img src="..." width="400" alt="...">. Niektóre dialekty obsługują ![alt](url =400x), ale nie jest to powszechne.

Alt to tekst odczytywany przez czytniki ekranu i wyświetlany, gdy obraz się nie załaduje. Tytuł to dymek pojawiający się po najechaniu kursorem, zwykle opcjonalny i ignorowany na urządzeniach dotykowych.

Gdy obraz pojawia się wielokrotnie lub gdy adres URL jest długi i zaśmieca akapit. Styl referencyjny utrzymuje czytelność tekstu i sprawia, że zmiana adresu URL wymaga tylko jednej edycji.

Tak, zagnieżdżenie obrazu w linku ([![alt](img)](url)) to standardowy CommonMark. Wynik renderowania to hiperłącze otaczające element <img>.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach