Placeholder Görsel Üretici

Bu ne işe yarar?

Bir sayfa tasarlarken, gerçek görsel hazır olmadan önce sıklıkla belirli boyutta bir görsele ihtiyacın olur — hero banner, kart thumbnail, avatar, OG kartı. via.placeholder.com veya placehold.co yüklemek çalışır ama harici bir istek ve üçüncü taraf bağımlılığı ekler. Bu araç istediğin boyut ve etiketle kendi kendine yeten inline SVG üretir, HTML'ine, CSS background-image'ına veya React bileşenine data URI olarak bırakmaya hazır. Hiçbir şey tarayıcını terk etmez.

Ne zaman kullanılır

• Gerçek varlıklar hazır olmadan önce şekilli placeholder'lara ihtiyaç duyduğun bir layout için wireframe yapma.
• Bir Storybook veya Figma export kurma ve bileşen başına placeholder grafiğine ihtiyaç duyma.
• Görsel yükleme kodunu, lazy-loading eşiklerini veya en-boy oranı CSS'ini test etme.
• Çevrimdışı çalışması veya katı CSP altında çalışması gereken bir projedeki üçüncü taraf placeholder servisini değiştirme.

Sık yapılan hatalar

• SVG ≠ raster. Data URI bir SVG string'idir; sonsuza kadar bulanıklık olmadan ölçeklenir ama PNG bekleyen bir tasarımcı beklemeyebilir. Raster görsel için önizlemenin ekran görüntüsünü al veya SVG'yi bir SVG-to-PNG dönüştürücüden geçir.
• Uzun data URI'lar img src'de zahmetlidir. Tarayıcılar bunları işler, ancak araçlar (linter'lar, search-and-replace, diff araçları) sıklıkla çok-KB nitelik değerlerinde tıkanır. Büyük mockup'lar için SVG dosya indirmesini tercih et.
• Etiket metni yerelleştirilmemiştir. Otomatik etiket çarpma işareti ile "WxH"dir; çeviri gerekiyorsa özel bir etiket yaz.
• Renkler sadece HTML hex'tir. Renk seçiciler #rrggbb üretir. rgba() gerekiyorsa, kopyaladıktan sonra SVG markup'ını doğrudan düzenle.
• Genişlik/yükseklik içseldir, display değildir. CSS'i farklı bir boyuta ayarlamak SVG'yi ölçeklendirir — görsel olarak iyi, ama en-boy oranı değişirse gömülü metin gerilmiş görünebilir.
• Placeholder'ı gönderme. Unutmak kolaydır — yayına geçmeden önce gerçek varlıkla değiştir.