Bir görsel sürükleyin veya seçmek için tıklayın
PNG, JPEG, WebP, GIF, BMP, AVIF
Nasıl çalışır
Yer tutucu, bir görsel indirilirken onun yerini tutan şeydir. İki ayrı işe yarar: görselin kaplayacağı alanı tam olarak ayırarak görsel belirdiğinde çevresindeki metnin zıplamasını önler ve nihai içeriğe benzeyen bir şey göstererek beklemeyi gri bir dikdörtgene bakmaktan daha kısa hissettirir.
Üç çözüm ailesi vardır. Kompakt karmalar (BlurHash ve ThumbHash) görseli o kadar kısa bir metin dizesine indirger ki kaydın geri kalanıyla birlikte bir veritabanı sütununda saklayabilirsiniz; tarayıcı bunu çözerek bulanık görüntüyü çizer. Data URI'ler (LQIP küçük resmi ve SVG) zaten kodlanmış görseli HTML veya CSS içinde taşır, dolayısıyla hiç JavaScript gerektirmez. Düz renk ise hepsinin en ucuzudur: yedi karakter.
Hangisinin uygun olduğu, HTML'in nerede oluştuğuna bağlıdır. Görseller bir veritabanından geliyor ve yüzlercesini listeliyorsanız kayıt başına en hafif seçenek karmadır. Statik sayfalar üretiyorsanız ya da yer tutucuları hâlihazırda destekleyen bir çerçeve kullanıyorsanız, data URI çözme kodu eklemekten kurtarır. Burada gördüğünüz tüm değerler tarayıcınızda hesaplanır: görsel hiçbir sunucuya yüklenmez.
Örnekler
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjBir BlurHash'in uzunluğu yalnızca bileşen sayısına bağlıdır; görselin boyutu veya içeriği etkilemez: 4 × 3'te her zaman 28 karakter, 3 × 3'te 22, 5 × 4'te 44 karakter olur.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHBir ThumbHash 17 ile 25 bayt, yani Base64'te 24 ila 36 karakter yer kaplar. Kesin boyut, görselin en-boy oranına ve saydamlık içerip içermediğine bağlıdır; çünkü biçim alfa kanalını da kodlar.lqip 24 px webpdata:image/webp;base64,UklGRi…24 px genişliğindeki bir WebP küçük resmi genellikle 1 KB'ın altında kalır. HTML'e gömülü olduğu için ek bir istek oluşturmaz, ancak ayrı olarak önbelleğe alınmayan belgeyi büyütür.Kullanım senaryoları
- Bir listenin ya da sonsuz kaydırmalı akışın ilk andan itibaren bir şey göstermesi için görsel tablosuna BlurHash veya ThumbHash kaydetmek.
- Görsel statik bir içe aktarım değilse next/image'in blurDataURL özniteliğini veya NgOptimizedImage'in placeholder değerini doldurmak.
- Yer tutucuyu width ve height öznitelikleriyle birleştirerek ürün veya makale kartlarında düzen kaymasını (CLS) önlemek.
- Çözme JavaScript'i çalıştıramayacağınız statik HTML, e-posta veya şablona bir yer tutucu gömmek.
- Aynı BlurHash'i web'de ve Swift, Kotlin ile Flutter çözücüleri bulunan mobil uygulamalarda yeniden kullanmak.
- Bayt bütçesi bir küçük resme bile izin vermediğinde ortalama rengi kapsayıcı arka planı olarak kullanmak.
Sık sorulan sorular
BlurHash mi, ThumbHash mi?
ThumbHash görseli daha az baytla daha sadık biçimde yeniden üretir, saydamlığı korur ve en-boy oranını saklar; dolayısıyla çizmek için orijinal boyutu bilmenize bile gerek kalmaz. BlurHash daha eski ve daha az isabetlidir, ama çok daha fazla platform ve dilde uygulaması vardır. Sıfırdan başlıyorsanız ThumbHash; yığınınızda hâlihazırda BlurHash çözücüleri varsa geçmek için bir neden yok.
Bu, LCP'yi iyileştirir mi?
Doğrudan hayır. Yer tutucu hız algısını iyileştirir ve width ile height ile birlikte düzen kaymasını ortadan kaldırır, ancak LCP ölçütü yine de gerçek görselin çizimi bittiğinde ölçülür. Dahası: ana görsel LCP öğesiyse ona loading="lazy" vermeyin ve bir yer tutucunun arkasına erteleyin; tarayıcının daha erken istemesi için fetchpriority="high" ile işaretlemek daha iyidir. Yer tutucular ilk ekranın dışında kalan görseller içindir.
BlurHash'te kaç bileşen kullanmak gerekir?
Yatay görsellerde dörde üç, dikey görsellerde üçe dört iyi sonuç verir. Her ek bileşen iki karakter ve biraz daha ayrıntı ekler, ancak altı ya da yediden sonra fark çıplak gözle ayırt edilmez olur; çünkü sonuç zaten bulanık gösterilir.
Karma mı, data URI mi?
Karma, görsel başına birkaç düzine bayt tutar ve aynı sayfada çok sayıda görsel varsa idealdir, ancak çözmek için istemci tarafında kod gerektirir. Data URI hiçbir şey gerektirmez, buna karşılık on ila elli kat daha ağırdır ve ayrı olarak önbelleğe alınmayan HTML'in içinde taşınır. Öne çıkan birkaç görsel varsa data URI, uzun listelerde ise karma tercih edilmelidir.
Küçük resmi doğrudan kullanmak yerine neden SVG?
Çünkü bulanıklığı, SVG'yi çizerken tarayıcı uygular. Bu sayede çok daha küçük bir küçük resimden yola çıkabilirsiniz ve büyütüldüğünde piksel blokları görünmez; sonuç her boyutta aynı ölçüde yumuşak görünür. SVG ayrıca alfayı opak olarak sabitler, böylece bulanıklık kenarları saydamlaştırmaz.
Yer tutucu için bir boyut sınırı var mı?
Bu, kullandığınız araca bağlıdır. Angular'ın NgOptimizedImage'i, yer tutucunun data URI'si 4000 karakteri aştığında konsola uyarı yazar; çünkü bu noktadan sonra HTML'in ağırlığı faydanın önüne geçmeye başlar. Bu iyi bir genel ölçüttür: küçük resminiz bu değeri aşıyorsa genişliği ya da kaliteyi düşürün.