Fakecreditcardİndirin veya satır içi (inline) ekleyin
İhtiyacınıza uygun formatı seçin. SVG, basit bir yer tutucu için yalnızca birkaç yüz bayttır ve her boyutta keskin kalır. PNG, düz renkleri ve metinleri net tutar; en yaygın kabul gören raster formattır. WebP, tüm modern tarayıcılarda çalışır ve düz renklerde dahi genellikle PNG'den daha az yer kaplar. JPG ise yalnızca bu formatı zorunlu kılan araçlar içindir: şeffaflığı desteklemez ve gradyanlarda bantlaşma yapabilir. Raster görseller için aynı CSS boyutunda yüksek yoğunluklu ekranlarda keskin bir görünüm elde etmek adına @2x veya @3x seçeneğini belirleyin; çok büyük görseller Safari ve birçok telefonun tuval sınırı olan yaklaşık 16 megapiksele otomatik ölçeklendirilir.
Farklı kopyala seçeneği, görseli ihtiyacınız olan koda data URI olarak gömülü şekilde sunar: genişlik ve yükseklik içeren bir <img> etiketi, README ve belgeler için Markdown, eşleşen aspect-ratio değerine sahip bir CSS background-image kuralı veya bir React <img> bileşeni. SVG kodu base64 yerine URL kodlamalı olarak üretilir; böylece kod okunabilir kalır ve genellikle base64'ten daha büyük olmaz.
/600x400 gibi bir URL'ye mi ihtiyacınız var?
Çevrim içi yer tutucu servisleri /600x400 gibi bir URL üzerinden görsel sunar. Ancak bu servislerden biri kapandığında ya da URL yapısını değiştirdiğinde, doğrudan bu servise bağlanan tüm taslaklar aynı anda bozulur; ayrıca her sayfa görüntülemesinde harici bir sunucuya istek gönderilir. Satır içi bir data URI ise bağımsız ve güvenilir bir alternatiftir: bir kez kopyaladığınızda çevrim dışıyken, prototiplerde, Storybook hikayelerinde ve test ortamlarında sorunsuz çalışır. İki istisna bulunur: Gmail dahil birçok e-posta istemcisi data-URI görsellerini göstermez, bu yüzden e-postalar için PNG indirin; ve çok büyük satır içi görseller HTML dosyanızı ağırlaştıracağı için büyük boyutlu olanları dosya olarak indirmeyi tercih edin.
“Placeholder görsel” kavramının üç farklı anlamı
- Tasarım aşamasındaki sahte görsel (dummy image): Asıl fotoğraf gelene kadar yerini tutan, doğru boyutlardaki bir kutu — bu aracın ürettiği görsel türü.
- Yedek veya varsayılan görsel (fallback/default): Fotoğrafı olmayan bir ürün veya avatarı bulunmayan bir profil gibi durumlarda kullanıcıların gördüğü görsel. Tarafsız olmalı, nihai en-boy oranını korumalı ve neyin eksik olduğunu belirten bir alt metne sahip olmalıdır.
- Yükleme yer tutucusu (loading placeholder): Gerçek görsel yüklenirken gösterilen minik bulanık bir önizleme veya düz bir renk (örneğin Next.js içindeki
blurDataURL). Bu sayfadan alacağınız küçük, düz renkli veya gradyanlı bir SVG bu amaçla rahatlıkla kullanılabilir.
Sık kullanılan placeholder boyutları
| Kullanım Alanı | Boyut (px) | Oran |
|---|---|---|
| Open Graph / bağlantı önizlemesi (Facebook, LinkedIn) | 1200 × 630 | ≈ 1.91:1 |
| X (Twitter) büyük görsel kartı | 1200 × 600 | 2:1 |
| Instagram kare gönderi | 1080 × 1080 | 1:1 |
| Instagram dikey gönderi | 1080 × 1350 | 4:5 |
| Hikayeler, Reels, TikTok | 1080 × 1920 | 9:16 |
| YouTube küçük resmi, HD video | 1280 × 720 | 16:9 |
| Full HD hero veya slayt görseli | 1920 × 1080 | 16:9 |
| Blog veya kart görseli | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| E-ticaret ürün görseli | 1000 × 1000 | 1:1 |
| Orta boy dikdörtgen reklam (MPU) | 300 × 250 | 6:5 |
| Leaderboard yatay reklam | 728 × 90 | ≈ 8:1 |
| Geniş dikey reklam (skyscraper) | 160 × 600 | 4:15 |
| Mobil banner reklam | 320 × 50 | 32:5 |
| Avatar / profil fotoğrafı | 150 × 150 (daire) | 1:1 |
Sosyal medya platformları önerilen görsel boyutlarını zaman zaman günceller; bu nedenle nihai içerikleri hazırlamadan önce ilgili platformun güncel kılavuzunu kontrol etmenizde fayda vardır.
Sayfa düzenini bozmayan yer tutucular
- Görsele mutlaka width ve height (veya CSS
aspect-ratio) tanımlayın. Tarayıcı bu sayede görsel yüklenmeden önce alanı ayırır ve sayfa içeriği aniden kaymaz — bu kayma Core Web Vitals ölçümlerinde CLS olarak adlandırılır. - Nihai en-boy oranını kullanın; böylece duyarlı tasarımlarda ve
object-fit: coverkullanımında oluşabilecek kırpma sorunlarını erkenden fark edersiniz. - Tasarım incelemelerinde boyutları metin olarak koruyun; böylece hangi görsel boyutunun henüz hazırlanmadığını ekipteki herkes net şekilde görür.
- Dekoratif yer tutuculara
alt=""verin ve yayına geçmeden önce tüm sahte görselleri asıllarıyla değiştirin: canlı ortamda kalan bir placeholder görsel hatadır.
Sıkça sorulan sorular
Placeholder görsel nedir?
Gerçek görselin yerini tutan geçici bir görseldir: nihai çalışma hazırlanana kadar tasarımlarda, prototiplerde ve şablonlarda kullanılan, doğru boyut ve renge sahip, genellikle üzerinde boyut bilgisi yer alan bir kutudur. Bu terim ayrıca görseli bulunmayan içeriklerde gösterilen varsayılan görseller ve yükleme sırasında beliren bulanık önizlemeler için de kullanılır.
Placeholder görsel hangi boyutta olmalıdır?
Nihai görselin tam boyutunda veya en azından aynı en-boy oranında olmalıdır — bağlantı önizlemeleri için 1200 × 630, kare gönderiler için 1080 × 1080, tam genişlikteki hero alanları için 1920 × 1080 gibi. Boyutların birebir uyuşması, yerleşim ve kırpma hatalarını gerçek görseller gelmeden önce tespit etmenizi sağlar.
Oluşturulan placeholder görseller ücretsiz mi?
Evet. Görseller doğrudan sizin tercihleriniz doğrultusunda kendi cihazınızda üretilir; herhangi bir lisans kısıtlaması yoktur. Ticari projelerde, şablonlarda ve müşteri işlerinde kaynak belirtmeksizin dilediğiniz gibi kullanabilirsiniz.
/600x400 gibi doğrudan bağlantı verebileceğim bir URL var mı?
Hayır, bu kasıtlı bir tercihtir: her şey tamamen tarayıcınızda çizilir, bu nedenle doğrudan link verilebilecek harici bir sunucu yoktur. Bunun yerine görseli bir <img> etiketi, Markdown veya CSS olarak kopyalayabilirsiniz — elde edeceğiniz data URI bağımsızdır ve çevrim dışıyken de sorunsuz çalışır.
Şeffaf veya yuvarlak bir placeholder oluşturabilir miyim?
Evet. PNG, WebP veya SVG için Şeffaf arka plan seçeneğini işaretleyin (JPG şeffaflığı desteklemediği için beyaz arka plan alır). Avatarlar ve kart tasarımları için daire veya yuvarlatılmış köşe şekillerini seçebilir, dilerseniz kenarlık ekleyebilirsiniz.
Oluşturabileceğim en büyük görsel boyutu nedir?
@1x yoğunluğunda 4000 × 4000 piksele kadar görsel oluşturabilirsiniz. Büyük boyutlu PNG ve WebP dosyalarının kodlanması cihazınıza bağlı olarak birkaç saniye sürebilir; SVG ise her boyutta anında oluşturulur.