Sayfa düzenini bozmayan sayaç

Özenle kurulmuş bir web sayfasına dışarıdan bir görsel eklemek, oturmuş görsel yapıyı bozma riskini her zaman beraberinde getirir. Tarayıcı bir sayfayı oluştururken, akıcı bir okuma deneyimi sağlamak için her metin bloğunun ve grafiğin konumunu hesaplar.

Bir görselin boyutları açıkça belirtilmemişse, tarayıcı gereken alanı önceden ayıramaz. Görselin tam yüksekliğini ve genişliğini belirleyebilmek için dosyanın tamamen inmesini beklemek zorundadır. Bu gecikme, düzen kayması denen olguya yol açar.

Metin, yeni gelen grafiğe yer açmak için birden aşağıya ya da yana sıçrar. Bir yazıyı okumaya çalışan herkes için bu ani hareket son derece rahatsız edicidir ve sitenin teknik olarak sağlam durmadığı izlenimini yaratır.

Etiketteki iki sayı yeri tutar

Düzen kaymalarını önlemenin çözümü şaşırtıcı derecede basittir ve HTML koduna doğrudan sabit öznitelikler eklemekten ibarettir. Her görsel etiketi, piksel cinsinden belirli bir yükseklik ve genişlik değeri alabilir. Bu boyutlar kaynak kodda baştan bildirildiğinde tarayıcı, görsel dosyası daha inmeye başlamadan ekranda ne kadar boş alan ayırması gerektiğini hemen bilir.

Grafik gelene kadar bu alan tamamen boş kalır; böylece çevredeki metin sıkıca yerinde durur. Doğru boyutları bulmak için katalogdan seçilen tasarıma bakmak gerekir.

Her tasarımın tam ve değişmeyen bir boyutu vardır. Bu kesin değerleri koda yazmak, sıçrama etkisini tamamen ortadan kaldırır. Ağ hızı ne olursa olsun sayfanın akıcı ve kesintisiz yüklenmesini garanti eder.

Görsel gelmezse ne görünür

Ağ bağlantısı takıldığında ya da tamamen koptuğunda, eksik bir görsel ekranda çirkin, kırık bir simge bırakabilir. Bunu zarifçe çözmek için alternatif metin özniteliği, bilinen adıyla alt özniteliği, kritik bir rol oynar.

Görsel gösterilemezse tarayıcı onun yerine bu öznitelikte verilen metni gösterir. Ziyaretçi sayacı gibi salt süsleme amaçlı ya da teknik bir öğede bu metin son derece kısa tutulmalı ya da aralarında boşluk olmayan iki tırnak işaretiyle tamamen boş bırakılmalıdır.

Uzun, betimleyici bir alternatif metin, görsel yüklenemezse ayrılmış kutuyu öngörülemeyen biçimlerde genişletir. Boş bir öznitelik ise yalnızca göze batmayan boş bir alan bırakır ve alt bilgi alanının ya da kenar çubuğunun yapısal bütünlüğünü korur.

Bilerek en son yüklenir

Modern web standartları, dış grafiklerin belgenin genel yüklenme hızını nasıl etkileyeceğini denetlemek için ek araçlar sunar. İki özel öznitelik, loading ve decoding, tarayıcıya görsele nasıl öncelik vermesi gerektiğini bildirir.

Tarayıcı, loading özniteliği lazy olarak ayarlandığında dosyayı getirmeyi, okur sayfayı gerçekten görselin yakınına kadar kaydırana dek erteler. Tarayıcı, decoding özniteliği async olarak ayarlandığında ise görsel verisinin tamamen yorumlanmasını beklemeden ana metni ve sayfa düzenini işleyebilir.

Bir kilise ya da kulüp sayfasında istatistik grafiği nadiren en önemli bilgi olduğundan, bu öznitelikler asıl içeriğin her zaman önce görünmesini sağlar. Ölçüm aracı, ana mesajın ulaşmasını hiç yavaşlatmadan arka planda sessizce yerini alır.