crop_original Yer Tutucu Görsel Oluşturucu star

Tasarımcılar ve Geliştiriciler Neden Yer Tutucu Görsel Kullanır

Bir web sitesinin gerçek fotoğrafları, illüstrasyonları veya ürün görselleri hazır olmadan çok önce, birinin sayfanın görsellerle nasıl göründüğünü görmesi gerekir. Tamamen boş gri kutular veya eksik-görsel simgeleriyle kurulan bir tasarım yanıltıcıdır — kenar boşlukları, en-boy oranları ve metnin bir görselin etrafına nasıl sarıldığı, o alanda gerçekten bir şey olduğunda farklı davranır. Bir yer tutucu görsel, eninde sonunda kullanılacak varlığın yerine geçerek bunu çözer: doğru genişlik ve yükseklikte olur, ızgarada doğru konumda durur ve gerçek içerik henüz var olmadan bir tasarımcının veya geliştiricinin düzenin (layout) işe yarayıp yaramadığını değerlendirmesine izin verir. Yer tutucunun içeriği — rengi, etiketi — kasıtlı olarak önemsizdir; önemli olan boyutlarının ve en-boy oranının gerçek görselin eninde sonunda ne olacağıyla eşleşmesidir.

Bu yüzden popüler yer tutucu görsel servisleri geleneksel olarak boyutu doğrudan bir URL'ye kodlayarak çalışır — örneğin 800×600'lük bir görsel istenir ve üzerinde "800 × 600" yazan gri bir dikdörtgen döner. Bu yazılı boyut da başlı başına faydalıdır: taslağa göz atan herkesin, HTML'yi incelemeden görsel alanının olması gereken boyutta olduğunu anında doğrulamasını sağlar. Bu araç da aynı geleneği izler — metin alanını boş bırakırsanız dikdörtgeni otomatik olarak kendi genişliği ve yüksekliğiyle etiketler; ya da bir başlık, örnek bir marka adı veya o kutuya oturması gereken başka herhangi bir şeyi önizlemek için özel metin girebilirsiniz.

SVG Neden PNG'den Daha İyi Bir Yer Tutucu Formatı Olabilir

Bir PNG yer tutucu bir piksel ızgarasıdır: metinli düz renkli 800×600'lük bir dikdörtgen, piksellerin ezici çoğunluğu tek tip bir renk olsa bile, bu 480.000 pikselin tamamı için renk bilgisi depolamak zorundadır. Bir SVG yer tutucu ise hiç piksel değildir — şekilleri tarif eden kısa bir metin bloğudur: "şu genişlik ve yükseklikte, şu renkle dolu bir dikdörtgen çiz, sonra içine ortalanmış şu metni çiz." Bu aracın oluşturduğu gibi basit, düz renk artı metin içeren bir yer tutucu için bu tarif genellikle birkaç yüz bayttır — eşdeğer PNG'den çarpıcı biçimde küçüktür. SVG'nin, duyarlı (responsive) bir düzende kullanılan yer tutucular için daha da önemli olan ikinci bir avantajı vardır: sabit bir piksel ızgarası yerine matematiksel şekil komutlarıyla tanımlandığı için, kalite kaybı veya piksellenme olmadan herhangi bir boyuta ölçeklenebilir; oysa kendi çözünürlüğünün ötesine gerilmiş bir PNG gözle görülür şekilde bulanıklaşır.

Her iki format da burada aynı şekilde üretilir: bir dikdörtgen çizilip seçilen arka plan rengiyle doldurulur, etiket metni hem yatayda hem dikeyde kutunun tam ortasına yerleştirilir ve boyutu, küçük bir yer tutucunun aşırı büyük metinle ezilmemesi için kutu boyutlarıyla orantılı ölçeklenir. PNG sürümü bir HTML5 canvas öğesi üzerinde çizilip canvas.toDataURL() ile dışa aktarılır; SVG sürümü ise doğrudan bir <rect> ve bir <text> öğesi içeren bir XML dizesi olarak oluşturulup dosya olarak indirilir. Sayfa her yüklendiğinde uzak bir URL'den görsel çeken — yani her seferinde gerçek bir ağ isteği yapan — yer tutucu servislerinin aksine, burada her şey yerel olarak çalışır: hiçbir istek tarayıcıdan çıkmaz, dolayısıyla o dış servis çökerse başarısız olacak hiçbir şey yoktur ve başkasının sunucusu tarafından dayatılan bir boyut sınırı da yoktur.