Bir görseli CSS ile ekranın içine sığdırmak, tarayıcının uygun boyuttaki dosyayı indirdiği anlamına gelmez. Küçük bir kartta gösterilen fotoğraf, büyük bir masaüstü ekranı için hazırlanmış dosyayla aynı olabilir. Responsive görseller, görüntünün sayfada kapladığı alan ile indirilen kaynağı birlikte düşünmemize yardımcı olur.
Bu rehberde bir teknoloji blogunun kapak ve kart görsellerini ele alacağız. srcset ve sizes ile farklı boyut seçeneklerini sunacak, picture öğesinin ne zaman anlamlı olduğunu açıklayacağız. Örnek dosya adları temsildir; kodlar kendi ürettiğiniz görsellerle uyarlanmalıdır.
Görünür boyut ile dosya boyutu farklıdır
Örnek blogumuzda bir kapak görseli ana yazı sayfasında geniş, kategori kartında küçük gösterilsin. Aynı kompozisyon için birkaç çözünürlük üretmek, tarayıcıya seçim imkânı verir. Ancak her görsel için rastgele çok sayıda boyut hazırlamak da bakım maliyeti oluşturabilir.
Başlangıçta sayfanızdaki gerçek yerleşimleri belirleyin: dar kart, geniş kart ve yazı kapağı. Bu alanları ölçmeden dosya üretmek, ihtiyacınız olmayan seçenekler hazırlamanıza yol açabilir. Örneğimiz için 480, 960 ve 1440 piksel genişlikte aynı oranı koruyan üç dosya düşünelim.
srcset ve sizes birlikte nasıl çalışır?
MDN img başvurusu, srcset içindeki genişlik tanımlayıcılarını ve sizes bilgisini açıklar. Tarayıcı, aday kaynakları gösterim alanı ve cihaz koşullarıyla birlikte değerlendirir. sizes görseli CSS ile boyutlandırmaz; kaynak seçimine yardımcı olan alan bilgisini sağlar.
<img
src="/gorseller/masa-960.webp"
srcset="/gorseller/masa-480.webp 480w,
/gorseller/masa-960.webp 960w,
/gorseller/masa-1440.webp 1440w"
sizes="(max-width: 48rem) calc(100vw - 2rem), 46rem"
width="1440"
height="960"
alt="Dizüstü bilgisayar ve not defteri bulunan çalışma masası">Bu örnekte mobil yerleşimin iki yanında toplam 2rem boşluk olduğunu, geniş görünümde görselin 46rem alan kapladığını varsayıyoruz. Gerçek sayfanız farklıysa sizes değerini de değiştirmeniz gerekir. Yanlış bir yerleşim varsayımıyla çok ayrıntılı srcset yazmak, beklediğiniz sonucu vermeyebilir.
CSS tarafında aynı yerleşim kararını temsil eden bir başlangıç şöyle olabilir:
.yazi-gorseli {
width: min(46rem, calc(100% - 2rem));
margin-inline: auto;
}
.yazi-gorseli img {
display: block;
width: 100%;
height: auto;
}Görsel örneğini bu sınıfa sahip bir sarmalayıcı içine yerleştirebilirsiniz. Kart içinde kullanacaksanız bu genişlik varsayımını kopyalamayın; kartın kendi düzenini esas alın. Buradaki HTML ve CSS, açıklama amaçlıdır ve gerçek dosyalarla tarayıcıda test edilmemiştir.
picture ne zaman gerekir?
picture öğesi, farklı kaynakları koşullara göre sunmaya yarar. Aynı fotoğrafın yalnızca çözünürlüğü değişiyorsa img üzerindeki srcset yeterli olabilir. Dar ekranda farklı kırpılmış bir kompozisyon göstermek istiyorsanız picture ile farklı kaynak seçimi anlamlıdır.
Örneğin masaüstü kapağında bütün çalışma masasını gösterirken mobilde bilgisayarın bulunduğu bölümü öne çıkarmak isteyebiliriz. Bu, dosyayı küçültmekten farklı bir editoryal karardır. Kırpılmış görselde konunun hâlâ doğru anlatıldığını ve varsa üzerindeki önemli yazıların kaybolmadığını kontrol etmek gerekir.
picture içinde source seçeneklerinin yanında img öğesi de bulunur. Alternatif metin img üzerinde tanımlanır. AVIF ve WebP gibi biçimler arasında tercih sunmak da mümkündür; fakat yalnızca uzantı değiştirerek bir dosyayı başka biçime dönüştüremezsiniz. Gerçekten o biçimde üretilmiş dosyalar kullanılmalıdır.
Kapak görselini gereksiz yere geciktirmeyin
web.dev’in LCP optimizasyon rehberi, ana içerik görselinin tarayıcı tarafından erken keşfedilmesinin önemini vurgular. İlk görünümdeki büyük kapak görseline körlemesine lazy loading uygulamak, görünür içeriğin yüklenmesini geciktirebilir. Sayfanın aşağısındaki uygun görseller için ise ertelenmiş yükleme değerlendirilebilir.
Yükleme önceliğini artırmak da her resme uygulanacak genel bir hızlandırma düğmesi değildir. Hepsini yüksek öncelikli ilan etmek, hangi kaynağın gerçekten önemli olduğunu belirsizleştirir. Örnek blogumuzda önce ilk ekrandaki baskın görseli belirler, sonra yükleme davranışını ölçerdik.
Boyut bilgilerini tanımlamak, görsel gelmeden önce yer ayrılmasına yardımcı olur. Bunun için width ve height değerleriyle gerçek oranı yansıtın; responsive görünümde CSS ile genişliği uyarlarken oranı koruyun. Rastgele bir yükseklik yazmak, özellikle farklı kırpımlarda görünüm sorunlarına neden olabilir.
Alternatif metin bağlama göre yazılır
Örnek masa fotoğrafı yazının çalışma ortamını anlatıyorsa bunu kısa biçimde ifade eden bir alt metin kullanılabilir. Aynı görsel yalnızca dekoratif bir ayırıcıysa boş alt değeri uygun olabilir. Dosya adı veya “resim” kelimesini tekrarlamak, okuyucuya görselin anlamını açıklamaz.
Bir ürün karşılaştırmasında bağlantı noktalarını gösteren fotoğraf, genel bir kapak fotoğrafından daha açıklayıcı metin gerektirebilir. Alt metni otomatik olarak başlıkla aynı yapmak yerine, görselin o sayfadaki görevini değerlendirin. Bu karar editoryal iş akışının bir parçasıdır.
Sonucu ölçerek doğrulayın
Kategori kartını ve yazı sayfasını farklı genişliklerde açın. Tarayıcı araçlarında seçilen kaynak adresini ve indirilen dosya boyutunu inceleyin. Önbellek yüzünden önceki büyük kaynağın yeniden kullanılması gibi etkenleri düşünerek temiz bir test oturumu da yapın.
Yavaş bağlantıda başlık ve metnin ne zaman göründüğünü, resim gelirken yerleşimin kayıp kaymadığını gözlemleyin. Mobil kırpımın anlamı koruduğunu kontrol edin. Amaç mümkün olan en küçük dosyayı üretmek değil, okuyucunun ihtiyaç duyduğu görseli yeterli kalitede ve uygun zamanda sunmaktır.
