Tek bir optimize edilmemiş ana görsel, bir web sayfasının tüm HTML, CSS ve JavaScript'inin toplamından daha ağır olabilir. Görseller, ortalama bir web sayfasının toplam baytlarının yaklaşık %50'sini oluşturur ve bu onları performansı iyileştirmek için sahip olduğunuz en büyük kaldıraç yapar. Yine de görsel optimizasyonu, web geliştirme ve içerik oluşturmanın en yanlış anlaşılan yönlerinden biri olmaya devam ediyor.
Etki yükleme hızının çok ötesine geçer. Görsel boyutu arama sıralamalarınızı, barındırma faturanızı, kullanıcılarınızın veri planlarını ve hatta dönüşüm oranlarınızı etkiler.
Performans bağlantısı: Core Web Vitals ve LCP
Google'ın Core Web Vitals metrikleri doğrudan arama sıralamalarını etkiler. Bunlar arasında Largest Contentful Paint (LCP), ekrandaki en büyük görünür öğenin render edilmesinin ne kadar sürdüğünü ölçer. Çoğu durumda bu öğe bir görseldir.
Google, 2,5 saniyenin altındaki LCP'yi "iyi" olarak değerlendirir. 2,5 ile 4 saniye arası "iyileştirme gerektirir". 4 saniyenin üstü "kötü"dür. Standart bir bağlantıda 3 MB'lık bir ana görsel LCP'yi kolayca 4 saniye eşiğinin üzerine itebilir ve sayfanızın tamamını "kötü" kategorisine sürükleyebilir.
Sonuçlar somuttur:
- SEO sıralama düşüşü — Core Web Vitals bir sıralama sinyalidir; yavaş sayfalar pozisyon kaybeder
- Daha yüksek hemen çıkma oranları — Mobil ziyaretçilerin %53'ü sayfa 3 saniyeden fazla yüklenirse sayfayı terk eder
- Daha düşük dönüşümler — her ek yükleme saniyesi dönüşümleri yaklaşık %7 azaltır
100 KB pratik kuralı Bir web sayfasındaki içerik görselleri için görsel başına 100 KB'ın altını hedefleyin. Tam genişlikteki ana görseller için 200 KB'ın altında kalın. Bu hedefler, görünür kalite kaybı olmadan modern formatlar ve uygun sıkıştırma ile ulaşılabilir.
Kayıplı ve kayıpsız: değiş tokuşu anlamak
Tüm görsel sıkıştırma iki kategoriye ayrılır ve yanlışını seçmek şişkin dosyaların yaygın bir nedenidir.
Kayıpsız sıkıştırma aynı veriyi daha verimli şekillerde kodlayarak dosya boyutunu küçültür. Her piksel tam olarak korunur. Azaltma mütevazıdır — genellikle %10-30. PNG kayıpsız sıkıştırma kullanır.
Kayıplı sıkıştırma insan gözünün fark etmesi muhtemel olmayan bilgileri atar. Gradyanlardaki renk hassasiyeti, ince doku detayları ve ince tonal varyasyonlar basitleştirilir. Azaltma dramatiktir — genellikle %70-90. JPEG ve WebP (kayıplı modda) bu yaklaşımı kullanır.
Kritik kavrayış şudur: %80-85 kalitede kayıplı sıkıştırma, fotoğraflar için orijinalden görsel olarak ayırt edilemez. Algısal fark esasen sıfırdır, ancak dosya boyutu farkı muazzamdır.
| Yaklaşım | Boyut azaltma | Kalite kaybı | En iyi kullanım |
|---|---|---|---|
| Kayıpsız (PNG) | %10-30 | Yok | Logolar, ekran görüntüleri, metin ağırlıklı grafikler |
| Kayıplı %85 (JPEG/WebP) | %70-85 | Algılanamaz | Fotoğraflar, illüstrasyonlar, arka planlar |
| Kayıplı %60 (JPEG/WebP) | %85-95 | Yakından incelemede fark edilir | Küçük resimler, dekoratif görseller |
Birçok kişinin yaptığı hata, fotoğrafik içerik için kayıpsız sıkıştırma veya önemli görseller için çok düşük kalitede kayıplı sıkıştırma kullanmaktır. Hangi görsellerin hangi işlemi gerektirdiğini anlamak etkili optimizasyonun anahtarıdır.
Format önemlidir: aynı görsel, çılgınca farklı boyutlar
Görsel formatı seçimi, sıkıştırma seviyesi kadar etkilidir. PNG olarak kaydedilen bir fotoğraf, aynı görselin %85 kalitede JPEG olarak kaydedilmesinden 5 ila 10 kat daha büyük olabilir — algılanabilir bir fark olmadan.
JPEG fotoğraflar için evrensel standart olmaya devam ediyor. Her yerde desteklenir ve fotoğrafik içerik için mükemmel kayıplı sıkıştırma sunar.
WebP eşdeğer görsel kalitede JPEG'den %25-35 daha küçük dosyalar sunar ve ek olarak şeffaflık desteği sağlar. Tüm modern tarayıcılar destekler. Bugün web için en iyi genel amaçlı formattır.
AVIF en yeni rakip olup WebP'den bile daha iyi sıkıştırma sunar (yaklaşık %20 daha küçük), ancak tarayıcı desteği ve kodlama hızı henüz gelişmektedir.
PNG yalnızca tam piksel reprodüksiyonu gerektiren görseller için doğru seçimdir — logolar, simgeler, metin içeren ekran görüntüleri veya WebP'nin bir seçenek olmadığı durumlarda şeffaflık gerektiren görseller.
Bant genişliği ve depolama: gizli maliyetler
Kişisel bloglar ve küçük siteler için bant genişliği maliyetleri ihmal edilebilir görünebilir. Ancak hızla ölçeklenir:
- Ayda 10.000 kez görüntülenen 2 MB görsel içeren bir sayfa, aylık 20 GB görsel verisi aktarır
- Bu görselleri toplam 400 KB'a optimize edin ve bunun yerine 4 GB aktarırsınız — %80 azalma
- Ölçülü barındırmada olan siteler için bu doğrudan düşük faturalara dönüşür
Depolama da birikir. 5.000 ürünlü, her biri 2 MB'lık 4 optimize edilmemiş görsele sahip bir e-ticaret sitesi, sadece ürün fotoğrafları için 40 GB kullanır. Her biri 200 KB'a optimize edilirse 4 GB'a düşer.
Duyarlı görseller ve cihaz sorunu
375 piksel genişliğindeki bir telefon ekranında görüntülenen 1920 piksel genişliğindeki bir görsel, piksellerinin %96'sından fazlasını boşa harcar. Tarayıcı tam görseli indirir, ardından ekrana sığdırmak için verilerin çoğunu atar.
Çözüm duyarlı görsellerdir — farklı cihazlara farklı görsel boyutları sunmak. Mobil ziyaretçi 400 piksel genişliğinde bir görsel alır; masaüstü ziyaretçi 1200 piksel genişliğinde bir sürüm alır.
Tembel yükleme: görünmeyeni indirmeyin
Ekranın altında kalan görseller — kaydırma yapılmadan görünmeyen olanlar — hemen yüklenmek zorunda değildir. Tembel yükleme, kullanıcı yakınlarına gelene kadar indirmelerini erteler. Bu, ilk sayfa yüklemesinin yalnızca ekranda gerçekten görünen görselleri içerdiği anlamına gelir.
Modern tarayıcılar tek bir HTML özniteliğiyle yerel tembel yüklemeyi destekler. Mevcut en basit ve en etkili optimizasyonlardan biridir.
CDN'ler: görselleri uçtan sunmak
Bir İçerik Dağıtım Ağı, görsellerinizin kopyalarını dünya genelindeki sunucularda saklar. Tokyo'daki bir ziyaretçi, Paris'teki kaynak sunucunuz yerine yakındaki bir sunucudan görseller alır. Bu gecikmeyi azaltır, yükleme sürelerini iyileştirir ve altyapınızdaki yükü azaltır.
Birçok modern CDN ayrıca anında görsel dönüşümü sunar — otomatik olarak WebP'ye dönüştürme, farklı cihazlar için yeniden boyutlandırma ve orijinal dosyalara dokunmadan optimal sıkıştırma uygulama.
Daha fazla bilgi
Görsel optimizasyonu, küçük iyileştirmelerin önemli sonuçlara birikeceği bir konudur. Sıkıştırma seviyeleriyle deney yapmak ve kalite-boyut değiş tokuşunu gerçek zamanlı görmek istiyorsanız, toolk.io tarayıcınızda her şeyi işleyen bir Görsel Sıkıştırıcı sunar. Görsel sıkıştırma ve formatlar arası dönüştürme öğreticileri de sitede mevcuttur.