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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator OpenAPI

Wklej dokument OpenAPI lub Swagger w JSON albo YAML i sprawdź jego podstawową strukturę: pole wersji, obiekt info i paths, z czytelnymi błędami i ostrzeżeniami.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Kreator diagramów ERD

Utwórz lokalnie diagram encja-relacja z maksymalnie 12 encjami, polami, relacjami i licznościami. Eksportuj Mermaid, SVG, PNG lub JSON.

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