Markdown Görsel Oluşturucu

Sonraki

Markdown’ın görsel söz dizimini, ![alt](src "title"), yanlış yazmak kolaydır: bir parantezi atlarsınız, alt metni unutursunuz ya da bağlantı söz dizimiyle karıştırırsınız ve belgeniz bozuk bir yer tutucu gösterir. Bu araç; görsel URL’sini, alt metni, isteğe bağlı bir başlığı ve isteğe bağlı bir bağlantı hedefini alır ve belgenize uygun olanı yapıştırabilmeniz için Markdown’ı hem satır içi hem de referans stilinde üretir.

Markdown görsel söz dizimi nasıl oluşturulur

  1. 1

    Görsel URL'sini yapıştırın

    Mutlak URL (https://...) veya göreli yol (/images/hero.png).

  2. 2

    Alt metni yazın

    Görselin ne gösterdiğini bir cümleyle anlatın. Erişilebilirlik için zorunludur.

  3. 3

    Başlık ekleyin (isteğe bağlı)

    Çoğu işleyicide fareyle üzerine gelindiğinde gösterilir.

  4. 4

    Bir bağlantıya sarın (isteğe bağlı)

    Görseli tıklanabilir yapmak için bir URL girin.

  5. 5

    Kod parçasını kopyalayın

    Satır içi `![alt](src)` veya referans stili `![alt][ref]` çıktısını alın.

Dört söz dizimi çeşidi

Satır içi, başlıksız:

![Ürünün ana görseli](/images/hero.png)

Satır içi, başlıklı:

![Ana görsel](/images/hero.png "Ekim 2026'da çekilen ana görsel")

Tıklanabilir görsel (bir bağlantıya sarılmış görsel):

[![Ana görsel](/images/hero.png)](https://example.com/buy)

Referans stili (uzun URL’leri paragrafın dışında tutar):

![Ana görsel][hero]

[hero]: /images/hero.png "Ekim 2026'da çekilen ana görsel"

Alt metin önemlidir

  • Erişilebilirlik. Ekran okuyucular alt metni seslendirir; boş bir alt metin, görselin görme engelli bir kullanıcı için fiilen görünmez olması demektir.
  • SEO. Arama motorları görselin içeriğini anlamak için alt metni kullanır. Eksik alt metin, görsel aramadan gelen trafiğe zarar verir.
  • Zarif geri çekilme. Görsel yüklenmezse kullanıcıların gördüğü şey alt metindir.

İyi ve kötü alt metin

Amaç İyi alt metin Kötü alt metin
Ürün fotoğrafı “Ahşap bir masanın üzerinde kırmızı seramik kupa, kulpu solda” “Kupa görseli”
Ekran görüntüsü “E-posta, parola ve SSO düğmeleri bulunan giriş sayfası” “screenshot.png”
Dekoratif "" (salt dekorasyon için boş alt metin) “dekoratif görsel”
İnfografik “Sütun grafiği: gelir 2023’te 1 milyon ₺‘den 2026’da 3 milyon ₺’ye çıktı” “sütun grafiği”

Tuzaklar

  • Alt metne “Görseli” diye başlamayın, ekran okuyucular onu zaten görsel olarak duyurur.
  • Mutlak ile göreli yollar. Göreli yollar, belge kendi klasörünün dışında işlendiğinde (örneğin GitHub önizlemesinde) bozulur. Kararsız kaldığınızda mutlak yol kullanın.
  • URL’lerdeki boşluklar URL kodlaması gerektirir: boşluk yerine %20 kullanın, yoksa görsel yüklenmez.

Sık Sorulan Sorular

Saf Markdown’da olmaz. Çoğu işleyici (GFM, Docusaurus, MkDocs) boyutlandırma için ham HTML’e geri döner, <img src="..." width="400" alt="...">. Bazı lehçeler ![alt](url =400x) biçimini destekler ama bu evrensel değildir.

Alt, ekran okuyuculara seslendirilen ve görsel yüklenmezse gösterilen metindir. Başlık ise fareyle üzerine gelindiğinde beliren ipucudur: genellikle isteğe bağlıdır ve dokunmatik cihazlarda yok sayılır.

Görsel birden çok kez göründüğünde ya da URL uzun olup paragrafı dağıttığında. Referans stili metni okunur tutar ve URL değişikliğini tek bir düzenlemeye indirir.

Evet, bir görseli bağlantı içine yerleştirmek ([![alt](img)](url)) standart CommonMark’tır. İşlenen çıktı, bir <img> öğesini saran bir köprüdür.

İlgili Araçlar

Araç diğer dillerde mevcuttur