Merhaba arkadaşlar, bugün performans konusunda kafayı yemiş bir geliştirici olarak, projemdeki en temel şeylerden biri olan arka plan resimlerini nasıl modernleştirdiğimi anlatacağım. Hepimiz sitenin hızının ne kadar kritik olduğunu biliyoruz, özellikle de Core Web Vitals döneminde. Ben de "Acaba daha optimize edilecek ne kaldı ki?" derken, gözüm `background-image` ile eklenen onlarca JPG ve PNG'ye takıldı. Bu dosyaların boyutları canımı yakmaya başlamıştı. İşte tam bu noktada, `image-set()` ile tanıştım ve her şey değişti.
Neden Sıradan `background-image` Artık Yetmiyor?
Klasik yöntemle bir arka plan eklediğimizde, genelde şöyle bir şey yazarız:
Burada büyük bir sorun var: Kullanıcının ekranı ister 4K bir monitör olsun, ister düşük çözünürlüklü bir mobil cihaz, tarayıcı hero-background.jpg dosyasının aynısını indiriyor. 4K için optimize edilmiş devasa bir JPG'yi, 3G bağlantısıyla gezinen birine yükletmek hiç de kullanıcı dostu değil. Ayrıca, WebP veya AVIF gibi, daha küçük boyutlu ve daha kaliteli next-gen formatları kullanamıyoruz. İşte `image-set()` tam da bu iki sorunu çözmek için geliyor.
`image-set()` ile Akıllı ve Hafif Arka Planlar
`image-set()` CSS fonksiyonu, tarayıcıya birden fazla resim kaynağı ve onların özellikleri (yoğunluk, format) sunmamızı sağlıyor. Tarayıcı da kendi koşullarına (cihaz piksel yoğunluğu, desteklediği format) en uygun olanı seçip onu indiriyor. Bu muazzam bir optimizasyon!
Nasıl kullandığıma gelirsek:
Burada olan şey şu: Tarayıcı önce AVIF formatını destekliyor mu diye bakar, destekliyorsa onu yükler (en iyi sıkıştırma). Desteklemiyorsa WebP'ye, o da yoksa son çare olarak JPG'ye döner. Ayrıca, `image-set()` içine farklı çözünürlüklerdeki resimleri de ekleyebiliriz. Örneğin, düşük DPI'lı cihazlar için 1x, yüksek DPI'lı (Retina) ekranlar için 2x resimler sunabiliriz.
Gerçek Proje Uygulamam ve Dikkat Edilmesi Gerekenler
Ben projemde, tüm büyük arka plan resimlerimi bu yöntemle değiştirdim. İş akışım şöyle oldu:
1. Ana JPG/PNG dosyamı aldım.
2. Bu dosyayı, Squoosh.app veya benzeri bir araçla AVIF ve WebP formatlarına dönüştürdüm (kalite ayarını %75-85 arasında tutarak).
3. Tüm dosyaları (orijinal, .webp, .avif) projeme ekledim.
4. CSS'imi yukarıdaki gibi güncelledim. En modern formatı (AVIF) en başa, fallback'i (JPG) en sona ve ayrıca `background-image` property'sinin kendisine de fallback olarak yazdım.
Önemli bir nokta: Eski tarayıcılar `image-set()`'i desteklemez. Bu yüzden, hemen üstüne klasik `url()` ile fallback eklemek çok önemli. Destekleyen tarayıcı üstteki kuralı, desteklemeyen alttaki kuralı uygulayacaktır.
Sonuç olarak, bazı kullanıcılar için arka plan resmi boyutunda %60-70'e varan azalmalar gördüm. Bu, özellikle mobil kullanıcılar için büyük bir kazanç. Üstelik, sadece CSS tarafında yapılan bir değişiklik. JS'le uğraşmaya, component yazmaya gerek yok.
Siz de projelerinizdeki arka plan resimlerini gözden geçirdiniz mi? Next-gen formatlara geçiş yaparken hangi araçları kullanıyorsunuz? Ya da `image-set()` dışında farklı bir yöntemle bu optimizasyonu sağlayan var mı? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Neden Sıradan `background-image` Artık Yetmiyor?Klasik yöntemle bir arka plan eklediğimizde, genelde şöyle bir şey yazarız:
CSS:
.hero-section {
background-image: url('hero-background.jpg');
background-size: cover;
background-position: center;
}`image-set()` CSS fonksiyonu, tarayıcıya birden fazla resim kaynağı ve onların özellikleri (yoğunluk, format) sunmamızı sağlıyor. Tarayıcı da kendi koşullarına (cihaz piksel yoğunluğu, desteklediği format) en uygun olanı seçip onu indiriyor. Bu muazzam bir optimizasyon!
Nasıl kullandığıma gelirsek:
CSS:
.hero-section {
background-image: image-set(
'hero-background.avif' type('image/avif'),
'hero-background.webp' type('image/webp'),
'hero-background.jpg' type('image/jpeg')
);
background-image: url('hero-background.jpg'); / Fallback /
background-size: cover;
background-position: center;
}Ben projemde, tüm büyük arka plan resimlerimi bu yöntemle değiştirdim. İş akışım şöyle oldu:
1. Ana JPG/PNG dosyamı aldım.
2. Bu dosyayı, Squoosh.app veya benzeri bir araçla AVIF ve WebP formatlarına dönüştürdüm (kalite ayarını %75-85 arasında tutarak).
3. Tüm dosyaları (orijinal, .webp, .avif) projeme ekledim.
4. CSS'imi yukarıdaki gibi güncelledim. En modern formatı (AVIF) en başa, fallback'i (JPG) en sona ve ayrıca `background-image` property'sinin kendisine de fallback olarak yazdım.
Önemli bir nokta: Eski tarayıcılar `image-set()`'i desteklemez. Bu yüzden, hemen üstüne klasik `url()` ile fallback eklemek çok önemli. Destekleyen tarayıcı üstteki kuralı, desteklemeyen alttaki kuralı uygulayacaktır.
Sonuç olarak, bazı kullanıcılar için arka plan resmi boyutunda %60-70'e varan azalmalar gördüm. Bu, özellikle mobil kullanıcılar için büyük bir kazanç. Üstelik, sadece CSS tarafında yapılan bir değişiklik. JS'le uğraşmaya, component yazmaya gerek yok.
Siz de projelerinizdeki arka plan resimlerini gözden geçirdiniz mi? Next-gen formatlara geçiş yaparken hangi araçları kullanıyorsunuz? Ya da `image-set()` dışında farklı bir yöntemle bu optimizasyonu sağlayan var mı? Yorumlarda deneyimlerinizi paylaşın, tartışalım!