Merhaba arkadaşlar, bugün sizlere responsive tasarımlarda en çok kafamı karıştıran konulardan birini, srcset ve sizes attribute'larını nasıl doğru hesapladığımı anlatacağım. Bu iki attribute'u doğru kullanmak, hem görsel kalitesini artırıyor hem de gereksiz büyük dosyaların yüklenmesini engelleyerek performans kazandırıyor. İlk başlarda "Hangi genişlikte kaç piksel?" diye kafayı yemiştim, ama sonunda basit bir formülle işi çözdüm.
Neden Sadece Max-Width Yeterli Değil?
Çoğumuz responsive resimler için CSS'te `max-width: 100%` ve `height: auto` kullanıyoruz. Bu, resmin kutuya sığmasını sağlıyor evet, ama mobilde 1920px genişliğinde bir resmi yükleyip onu 375px'lik ekrana sığdırmak anlamına geliyor. Bu, hem boyut hem de performans açısından büyük bir israf! İşte tam burada devreye srcset ve sizes giriyor. Tarayıcıya, "Şu ekran genişliğinde, şu resim dosyasını yükle" dememizi sağlıyorlar.
Benim Kullandığım Hesaplama Formülü ve Pratik Yöntem
Karmaşık hesaplamalara girmeden önce basit bir mantıkla başlayalım. Tasarımınızdaki bir resmin maksimum kaç sütun genişliğinde olabileceğini düşünün. Örneğin, masaüstünde tam genişlik, tablette yarım genişlik gibi. İşte benim formülüm: `sizes="(media-query) görüntülenme_genişliği, ..."`. Görüntülenme genişliği için `vw` (viewport width) birimini ve resmin kaplayacağı maksimum sütun yüzdesini kullanıyorum.
Pratik bir örnekle anlatayım. Diyelim ki bir resmimiz var. Masaüstünde (992px ve üzeri) tam genişlik, tablette (768px - 991px) iki sütundan biri, mobilde ise (767px ve altı) yine tam genişlik olacak. 12'lik grid sisteminden gidersek, bu masaüstü için 12/12 (%100), tablet için 6/12 (%50) demek.
Burada srcset'te her resmin gerçek piksel genişliğini (400w, 800w gibi) belirtiyoruz. sizes attribute'u ise tarayıcıya şunu söylüyor: "Ekran genişliği 767px'e kadar ise, bu resim viewport genişliğinin %100'ü kadar yer kaplayacak (100vw). Ekran 768px ile 991px arasındaysa, viewport genişliğinin %50'si kadar yer kaplayacak (50vw). Diğer tüm durumlarda (yani 992px ve üzeri) yine %100 yer kaplayacak."
Tarayıcı Bu Bilgiyle Ne Yapar?
Tarayıcı, `sizes` ile verdiğimiz bilgiye bakar. Örneğin viewport genişliği 800px olsun ve biz tablet kuralına (50vw) giriyoruz. Tarayıcı, bu resmin ekranda `800px 0.50 = 400px` genişliğinde görüneceğini hesaplar. Daha sonra `srcset` listesine bakar ve bu 400px'lik ihtiyacı verimli bir şekilde karşılayabilecek en uygun resmi seçer. Yüksek DPI (Retina) ekranlarda ise bu ihtiyacı 2-3 ile çarparak daha kaliteli resmi seçebilir. Böylece 800px'lik bir ekranda, 1600px'lik devasa bir resim yüklenmez.
Pratik İpuçları ve Dikkat Edilecekler
Fallback (Güvenli) Resim: Her zaman eski tarayıcılar için `src` attribute'una bir resim koyun. Bu, `srcset` desteklemeyen tarayıcıların yükleyeceği resimdir.
Resim Boyutlandırma: `srcset` için hazırladığınız resimlerin, belirttiğiniz `w` değerleriyle (400w, 800w) birebir aynı piksel genişliğinde olması çok önemli. Yoksa hesaplar şaşar.
sizes'ı Basit Tutun: Her medya sorgusu için ayrıntılı hesaplar yapmak yerine, tasarımınızdaki temel kırılma noktalarına (breakpoints) ve resmin kaplayacağı yaklaşık yüzdelik dilime odaklanın. %100, %50, %33, %25 gibi.
Umarım bu pratik formül ve açıklamalar işinizi kolaylaştırır. Ben bu yöntemi benimsedikten sonra Lighthouse performans skorlarımda ciddi bir artış oldu. Siz responsive resimler için farklı bir yöntem veya hesaplama aracı kullanıyor musunuz? Ya da `picture` elementi mi tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın!
Neden Sadece Max-Width Yeterli Değil?Çoğumuz responsive resimler için CSS'te `max-width: 100%` ve `height: auto` kullanıyoruz. Bu, resmin kutuya sığmasını sağlıyor evet, ama mobilde 1920px genişliğinde bir resmi yükleyip onu 375px'lik ekrana sığdırmak anlamına geliyor. Bu, hem boyut hem de performans açısından büyük bir israf! İşte tam burada devreye srcset ve sizes giriyor. Tarayıcıya, "Şu ekran genişliğinde, şu resim dosyasını yükle" dememizi sağlıyorlar.
Benim Kullandığım Hesaplama Formülü ve Pratik YöntemKarmaşık hesaplamalara girmeden önce basit bir mantıkla başlayalım. Tasarımınızdaki bir resmin maksimum kaç sütun genişliğinde olabileceğini düşünün. Örneğin, masaüstünde tam genişlik, tablette yarım genişlik gibi. İşte benim formülüm: `sizes="(media-query) görüntülenme_genişliği, ..."`. Görüntülenme genişliği için `vw` (viewport width) birimini ve resmin kaplayacağı maksimum sütun yüzdesini kullanıyorum.
Pratik bir örnekle anlatayım. Diyelim ki bir resmimiz var. Masaüstünde (992px ve üzeri) tam genişlik, tablette (768px - 991px) iki sütundan biri, mobilde ise (767px ve altı) yine tam genişlik olacak. 12'lik grid sisteminden gidersek, bu masaüstü için 12/12 (%100), tablet için 6/12 (%50) demek.
HTML:
<img
src="/images/fallback.jpg"
srcset="/images/kucuk-400.jpg 400w,
/images/orta-800.jpg 800w,
/images/buyuk-1200.jpg 1200w,
/images/cok-buyuk-1600.jpg 1600w"
sizes="(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 991px) 50vw,
100vw"
alt="Responsive resim açıklaması">Burada srcset'te her resmin gerçek piksel genişliğini (400w, 800w gibi) belirtiyoruz. sizes attribute'u ise tarayıcıya şunu söylüyor: "Ekran genişliği 767px'e kadar ise, bu resim viewport genişliğinin %100'ü kadar yer kaplayacak (100vw). Ekran 768px ile 991px arasındaysa, viewport genişliğinin %50'si kadar yer kaplayacak (50vw). Diğer tüm durumlarda (yani 992px ve üzeri) yine %100 yer kaplayacak."
Tarayıcı Bu Bilgiyle Ne Yapar?Tarayıcı, `sizes` ile verdiğimiz bilgiye bakar. Örneğin viewport genişliği 800px olsun ve biz tablet kuralına (50vw) giriyoruz. Tarayıcı, bu resmin ekranda `800px 0.50 = 400px` genişliğinde görüneceğini hesaplar. Daha sonra `srcset` listesine bakar ve bu 400px'lik ihtiyacı verimli bir şekilde karşılayabilecek en uygun resmi seçer. Yüksek DPI (Retina) ekranlarda ise bu ihtiyacı 2-3 ile çarparak daha kaliteli resmi seçebilir. Böylece 800px'lik bir ekranda, 1600px'lik devasa bir resim yüklenmez.
Pratik İpuçları ve Dikkat EdileceklerFallback (Güvenli) Resim: Her zaman eski tarayıcılar için `src` attribute'una bir resim koyun. Bu, `srcset` desteklemeyen tarayıcıların yükleyeceği resimdir.
Resim Boyutlandırma: `srcset` için hazırladığınız resimlerin, belirttiğiniz `w` değerleriyle (400w, 800w) birebir aynı piksel genişliğinde olması çok önemli. Yoksa hesaplar şaşar.
sizes'ı Basit Tutun: Her medya sorgusu için ayrıntılı hesaplar yapmak yerine, tasarımınızdaki temel kırılma noktalarına (breakpoints) ve resmin kaplayacağı yaklaşık yüzdelik dilime odaklanın. %100, %50, %33, %25 gibi.
Umarım bu pratik formül ve açıklamalar işinizi kolaylaştırır. Ben bu yöntemi benimsedikten sonra Lighthouse performans skorlarımda ciddi bir artış oldu. Siz responsive resimler için farklı bir yöntem veya hesaplama aracı kullanıyor musunuz? Ya da `picture` elementi mi tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın!