Softonic

Pembuat Gambar Markdown

Langkah 1 / 3
Berikutnya

Sintaks gambar Markdown, ![alt](src "title"), mudah keliru: terlewat satu kurung, lupa teks alternatif, atau tertukar dengan sintaks tautan sehingga dokumen Anda menampilkan placeholder yang rusak. Pembuat ini menerima URL gambar, teks alternatif, judul opsional, dan tujuan tautan opsional, lalu menghasilkan Markdown gaya inline maupun referensi sehingga Anda dapat menempelkan yang paling cocok untuk dokumen Anda.

Cara membuat sintaks gambar Markdown

  1. 1

    Tempel URL gambar

    URL absolut (https://...) atau jalur relatif (/images/hero.png).

  2. 2

    Tulis teks alternatif

    Apa yang ditampilkan gambar, dalam satu kalimat. Wajib demi aksesibilitas.

  3. 3

    Tambahkan judul (opsional)

    Muncul saat kursor diarahkan ke gambar di sebagian besar perender.

  4. 4

    Bungkus dengan tautan (opsional)

    Berikan URL agar gambar dapat diklik.

  5. 5

    Salin cuplikannya

    Dapatkan keluaran inline `![alt](src)` atau gaya referensi `![alt][ref]`.

Empat varian sintaks

Inline, tanpa judul:

![Gambar utama produk](/images/hero.png)

Inline, dengan judul:

![Gambar utama](/images/hero.png "Gambar utama diambil pada Oktober 2026")

Gambar yang dapat diklik (gambar dibungkus dalam tautan):

[![Gambar utama](/images/hero.png)](https://example.com/buy)

Gaya referensi (menjaga URL panjang tetap di luar paragraf):

![Gambar utama][hero]

[hero]: /images/hero.png "Gambar utama diambil pada Oktober 2026"

Teks alternatif itu penting

  • Aksesibilitas. Pembaca layar membacakan teks alternatif; alt yang kosong membuat gambar praktis tak terlihat bagi pengguna dengan gangguan penglihatan.
  • SEO. Mesin pencari memakai teks alternatif untuk memahami isi gambar. Alt yang hilang merugikan trafik dari pencarian gambar.
  • Degradasi yang mulus. Jika gambar gagal dimuat, teks alternatif adalah yang dilihat pengguna.

Teks alternatif yang baik dan buruk

Maksud Alt yang baik Alt yang buruk
Foto produk “Cangkir keramik merah di atas meja kayu, gagang di sebelah kiri” “Gambar cangkir”
Tangkapan layar “Halaman masuk dengan email, kata sandi, dan tombol SSO” “screenshot.png”
Dekoratif "" (alt kosong untuk dekorasi murni) “gambar dekoratif”
Infografik “Diagram batang: pendapatan naik dari Rp1 miliar pada 2023 menjadi Rp3 miliar pada 2026” “diagram batang”

Jebakan

  • Jangan awali alt dengan “Gambar dari”, pembaca layar sudah mengumumkannya sebagai gambar.
  • Jalur absolut vs. relatif. Jalur relatif rusak saat dokumen dirender di luar foldernya (misalnya di pratinjau GitHub). Gunakan jalur absolut jika ragu.
  • Spasi dalam URL memerlukan pengodean URL: %20 menggantikan spasi, jika tidak gambar tidak akan dimuat.

Pertanyaan yang Sering Diajukan

Tidak dalam Markdown murni. Sebagian besar perender (GFM, Docusaurus, MkDocs) beralih ke HTML mentah untuk penentuan ukuran, <img src="..." width="400" alt="...">. Beberapa dialek mendukung ![alt](url =400x), tetapi tidak universal.

Alt adalah teks yang dibacakan pembaca layar dan ditampilkan jika gambar gagal dimuat. Judul adalah tooltip yang muncul saat kursor diarahkan ke gambar: umumnya opsional dan diabaikan pada perangkat sentuh.

Ketika gambar muncul beberapa kali, atau ketika URL panjang dan membuat paragraf berantakan. Gaya referensi menjaga teks tetap mudah dibaca dan menjadikan perubahan URL cukup satu kali suntingan.

Ya, menyematkan gambar di dalam tautan ([![alt](img)](url)) adalah CommonMark standar. Keluaran yang dirender berupa hipertaut yang membungkus sebuah <img>.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Alat ini tersedia dalam bahasa lain