Merhaba arkadaşlar, bugün sizlere performans optimizasyonu yaparken başımı en çok ağrıtan konulardan biri olan resim sıkıştırmadan bahsedeceğim. Özellikle WebP formatına geçtiğimizde, her şeyi kalite 85'te sıkıştırıp "hallettik" demek çok cazip geliyordu. Ama sonra fark ettim ki, bir UI ikonuyla, bir ürün fotoğrafı aynı kalitede sıkıştırılmamalı. İşte bu yanılgıdan çıkış hikayem ve kullandığım en temiz çözüm.
Sorunun Farkına Varma Anım
Bir projede Lighthouse skorlarımı zorlayarak 95+ hedefliyordum. Resimleri WebP'ye çevirip kaliteyi 85 yaptığımda, performans artışı güzel oldu ama bazı sayfalarda, özellikle ürün detay sayfalarında, kullanıcılardan "resimler bulanık" feedback'i gelmeye başladı. Diğer yandan, onlarca küçük ikon ve SVG'den dönüştürdüğüm WebP'lerin boyutlarına baktığımda, aslında kaliteyi daha da düşürsem gözle görülür bir fark olmayacağını fark ettim. İşte o an anladım: Tek bir kalite ayarıyla her şeyi optimize edemezsin.
İçerik Türlerine Göre Stratejim
Deneme yanılma ve biraz da görsel testten sonra, artık projelerimde şu üç kategoride farklı kalite değerleri kullanıyorum. Bu değerler, görsel kaliteyi korurken dosya boyutunu en aza indirmek için bana en iyi sonucu veren aralıklar.
1. Fotoğraflar & Gerçek Hayat Görselleri (Quality: 80-85): Bu görsellerde detay ve renk geçişleri çok önemli. Kaliteyi 80'in altına düşürmek, özellikle insan yüzü veya doğa manzarası fotoğraflarında rahatsız edici sıkıştırma artefaktlarına (bloklaşma, renk bozulması) neden olabiliyor.
2. İllüstrasyonlar & Grafikler (Quality: 75-80): Düz renk alanları, keskin çizgiler ve gradient'lerden oluşan bu görseller, yüksek kalitede bile çok iyi sıkıştırılır. 75-80 bandı, keskinliği korurken boyutu ciddi oranda düşürüyor.
3. İkonlar & Arayüz Elemanları (Quality: 75 veya altı): Genellikle küçük boyutlarda (16x16, 24x24, 32x32) kullanıldıkları için, burada kaliteyi 75'e, hatta basit ikonlarda 70'e kadar düşürebilirsiniz. Gözle fark edilemez, ancak dosya boyutu inanılmaz azalır.
Uygulama: Gulp Task Örneği
Ben iş akışımda genelde Gulp kullanıyorum. Aşağıda, farklı kaynak klasörlerinden gelen görselleri, yukarıdaki kurallara göre farklı kalitelerde WebP'ye dönüştüren basit bir task örneği paylaşıyorum. Siz de kullandığınız tool'a (Webpack, custom script vs.) göre bu mantığı adapte edebilirsiniz.
Eğer elinizdeki tool sadece tek bir kalite değeri alıyorsa, o zaman görsellerinizi türlerine göre farklı klasörlere ayırmanız ve her biri için ayrı komut/script çalıştırmanız gerekecek. Bu biraz daha manuel bir süreç ama sonuç kesinlikle buna değer.
Sonuç ve Tavsiyem
Bu ayrımı yapmaya başladıktan sonra, ortalama resim boyutlarımda %15-20'ye varan ekstra bir düşüş elde ettim, üstelik kullanıcı deneyiminden ödün vermeden. Lighthouse "Efficiently encode images" puanım da doğal olarak tavan yaptı.
Siz projelerinizde resim optimizasyonunu nasıl yapıyorsunuz? WebP kalite konusunda sabit bir değer mi kullanıyorsunuz, yoksa benim gibi içeriğe göre ayrıştırıyor musunuz? Ya da farklı bir format (mesela AVIF) ve kalite stratejisi mi izliyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorunun Farkına Varma AnımBir projede Lighthouse skorlarımı zorlayarak 95+ hedefliyordum. Resimleri WebP'ye çevirip kaliteyi 85 yaptığımda, performans artışı güzel oldu ama bazı sayfalarda, özellikle ürün detay sayfalarında, kullanıcılardan "resimler bulanık" feedback'i gelmeye başladı. Diğer yandan, onlarca küçük ikon ve SVG'den dönüştürdüğüm WebP'lerin boyutlarına baktığımda, aslında kaliteyi daha da düşürsem gözle görülür bir fark olmayacağını fark ettim. İşte o an anladım: Tek bir kalite ayarıyla her şeyi optimize edemezsin.
İçerik Türlerine Göre StratejimDeneme yanılma ve biraz da görsel testten sonra, artık projelerimde şu üç kategoride farklı kalite değerleri kullanıyorum. Bu değerler, görsel kaliteyi korurken dosya boyutunu en aza indirmek için bana en iyi sonucu veren aralıklar.
1. Fotoğraflar & Gerçek Hayat Görselleri (Quality: 80-85): Bu görsellerde detay ve renk geçişleri çok önemli. Kaliteyi 80'in altına düşürmek, özellikle insan yüzü veya doğa manzarası fotoğraflarında rahatsız edici sıkıştırma artefaktlarına (bloklaşma, renk bozulması) neden olabiliyor.
2. İllüstrasyonlar & Grafikler (Quality: 75-80): Düz renk alanları, keskin çizgiler ve gradient'lerden oluşan bu görseller, yüksek kalitede bile çok iyi sıkıştırılır. 75-80 bandı, keskinliği korurken boyutu ciddi oranda düşürüyor.
3. İkonlar & Arayüz Elemanları (Quality: 75 veya altı): Genellikle küçük boyutlarda (16x16, 24x24, 32x32) kullanıldıkları için, burada kaliteyi 75'e, hatta basit ikonlarda 70'e kadar düşürebilirsiniz. Gözle fark edilemez, ancak dosya boyutu inanılmaz azalır.
Uygulama: Gulp Task ÖrneğiBen iş akışımda genelde Gulp kullanıyorum. Aşağıda, farklı kaynak klasörlerinden gelen görselleri, yukarıdaki kurallara göre farklı kalitelerde WebP'ye dönüştüren basit bir task örneği paylaşıyorum. Siz de kullandığınız tool'a (Webpack, custom script vs.) göre bu mantığı adapte edebilirsiniz.
JavaScript:
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('convert-images', function() {
// 1. FOTOĞRAFLAR: Kalite 85
gulp.src('./src/images/photos/.{jpg,png}')
.pipe(webp({ quality: 85 }))
.pipe(gulp.dest('./dist/webp/photos'));
// 2. İLLÜSTRASYONLAR: Kalite 80
gulp.src('./src/images/illustrations/.{jpg,png}')
.pipe(webp({ quality: 80 }))
.pipe(gulp.dest('./dist/webp/illustrations'));
// 3. İKONLAR: Kalite 75
gulp.src('./src/images/icons/.{jpg,png}')
.pipe(webp({ quality: 75 }))
.pipe(gulp.dest('./dist/webp/icons'));
});Eğer elinizdeki tool sadece tek bir kalite değeri alıyorsa, o zaman görsellerinizi türlerine göre farklı klasörlere ayırmanız ve her biri için ayrı komut/script çalıştırmanız gerekecek. Bu biraz daha manuel bir süreç ama sonuç kesinlikle buna değer.
Sonuç ve TavsiyemBu ayrımı yapmaya başladıktan sonra, ortalama resim boyutlarımda %15-20'ye varan ekstra bir düşüş elde ettim, üstelik kullanıcı deneyiminden ödün vermeden. Lighthouse "Efficiently encode images" puanım da doğal olarak tavan yaptı.
Siz projelerinizde resim optimizasyonunu nasıl yapıyorsunuz? WebP kalite konusunda sabit bir değer mi kullanıyorsunuz, yoksa benim gibi içeriğe göre ayrıştırıyor musunuz? Ya da farklı bir format (mesela AVIF) ve kalite stratejisi mi izliyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!