Daha hızlı web siteleri için görüntü dosya boyutu nasıl azaltılır
Görüntüler çoğu web sayfasındaki en ağır şeydir. İşte onları kaliteyi bozmadan nasıl düzgün şekilde sıkıştıracağınız - ve bunun SEO için neden önemli olduğu.
Tipik bir web sayfasında görüntüler, toplam sayfa ağırlığının %50-70’ini oluşturur. Siteniz ağır hissettiriyorsa, görüntüleriniz neredeyse kesinlikle sorunun bir parçası. Google sayfa hızını (özellikle Core Web Vitals) arama sıralamalarına dahil ettiğinden, yavaş görüntüler doğrudan size trafik kaybettiriyor.
İyi haber şu: çoğu web sitesi görüntü yükünü, görüntü başına beş dakikalık çalışmayla ve görünür kalite kaybı olmadan yarıya indirebilir.
Neden birkaç yüz kilobayt hâlâ önemli
Modern geniş bant hızlı — peki neden önemli? Üç somut neden:
Mobil kullanıcılar. Küresel web trafiğinin yarıdan fazlası mobil, genellikle düzensiz 4G hatta 3G üzerinde. Ofis Wi-Fi’nizde anında yüklenen 2 MB’lık görüntü, banliyö treninde 8+ saniye alabilir.
Core Web Vitals. Google ölçüp yayınlıyor. Üç metrikten ikisi — Largest Contentful Paint ve Cumulative Layout Shift — doğrudan görüntü davranışından etkilenir.
Bant genişliği maliyetleri. Ayda bir milyon ziyaretçi ve her biri 3 MB görüntü indiriyorsa, bu ayda 3 TB çıkış. Çoğu sunucuda bu ücretsiz değil.
Görüntü ağırlığını yarıya indirmek genellikle ölçülebilir sonuçlar üretiyor — daha hızlı yükleme, daha iyi hemen çıkma oranları, iyileştirilmiş sıralamalar, daha düşük barındırma faturaları.
Dört kol — etki sırasına göre
1. Kol: boyutlar (kaç piksel)
İnsanların kaçırdığı en büyük kazanım bu. Web sitenizde 800×600’de görüntülenen 4000×3000 fotoğraf, tarayıcının ihtiyacından yirmi beş kat daha fazla piksel taşıyor. Saf israf.
Her görüntünün nihai görüntüleme boyutunu kontrol edin. 600×600 kutusunda görünen ürün görseli? Kaynağı 1200×1200’e yeniden boyutlandırın (retina için iki kat). 1440 px genişliğindeki tam hero görüntüsü? 1920 px yeterli. 4K görüntü göndermek için hiçbir neden yok.
2. Kol: format seçimi
Her format farklı içeriği en iyi sıkıştırır:
- Fotoğraflar → JPG veya WebP (kayıplı). WebP tipik olarak JPG’yi %25-35 geçer.
- Düz renkler ve keskin kenarlar (logolar, UI, diyagramlar) → PNG veya WebP (kayıpsız PNG bu içerik için genellikle JPG’den küçük)
- Her bayt önemli olan fotoğraflar, modern tarayıcı hedef kitlesi → AVIF (WebP’den %30-50 daha küçük, kodlaması daha yavaş)
Bir dosyayı .jpg’den .webp’ye yeniden adlandıramazsınız — yeniden kodlamanız gerekir. Image Compressor orijinal formatı korurken bunu otomatik yapar.
3. Kol: sıkıştırma / kalite ayarı
Her kayıplı formatın bir kalite kadranı var. Çoğu editör varsayılan olarak %80-85’te başlar — bu makul ama web görüntüleri için genellikle fazla.
Fotoğraflar için pratik kural:
- Kalite 90-95: Orijinalden zorlukla ayırt edilir, ama kalite 75’ten %40+ daha büyük
- Kalite 80-85: Mükemmel — normal izleme mesafesinde görsel olarak ayırt edilemez
- Kalite 70-75: Çok iyi — web için varsayılan olarak bunu kullanın
- Kalite 60-65: İnce ayrıntıda belirgin yumuşama; küçük resimler için kabul edilebilir
- Kalite 55 altı: Görünür bozulmalar, yalnızca ağır bulanık arka planlar için
Çoğu web sitesi için kalite 75 tatlı nokta. 75 ile 90 arasındaki fark web’de görünmez ama dosya boyutunu iki katına çıkarır.
4. Kol: meta veri ve renk profilleri
Tipik bir kamera JPG’si şişman EXIF meta veri bloğu içerir: GPS koordinatları, kamera markası ve modeli, çekim ayarları, küçük resim, bazen tam boyutlu önizleme bile. Bunu çıkarın — görünür fark olmadan görüntü başına 30-300 KB tasarruf.
Görüntüler ayrıca gereksiz büyük renk profilleri gömüyor olabilir (sadece sRGB kullanması gereken web görüntüsünde 500 KB ProPhoto RGB profili gibi). sRGB’ye dönüştürüp gömülü profili çıkarın.
Çoğu sıkıştırma aracı meta veriyi otomatik çıkarır.
Pratik iş akışı
İş akışınıza giren her yeni görüntü için:
- Boyutları kontrol edin. En büyük görüntüleme boyutunun en fazla 2 katına yeniden boyutlandırın.
- Formatı seçin. Fotoğraf → JPG/WebP. Grafik → PNG/WebP.
- Fotoğraflar için kaliteyi 75’e ayarlayın ya da grafikler için kayıpsız kullanın.
- Sıkıştırın. Image Compressor tarayıcınızda bir kalite kaydırıcısıyla çalışır, değiş tokuşu canlı görürsünüz.
- Doğrulayın. Sonucu hedeflenen görüntüleme boyutunda gözden geçirin. Hâlâ iyi görünüyorsa, yayına alın.
Görüntü başına toplam süre: yaklaşık 30 saniye. Tipik tasarruf: ham kaynağa karşı %40-70.
İçerik türüne göre beklenen tasarruflar
| Kaynak | Tipik ham boyut | Web optimize sonrası | Tasarruf |
|---|---|---|---|
| iPhone fotoğrafı (12 MP JPG) | 3-4 MB | 300-500 KB | ~%85 |
| Aynasız kamera JPG (24 MP) | 8-12 MB | 500-800 KB | ~%90 |
| Ekran görüntüsü (PNG) | 500 KB-2 MB | 80-200 KB | ~%80 |
| Logo (şeffaflıklı PNG) | 30-100 KB | 10-40 KB | ~%60 |
| Simge seti PNG | 20-80 KB | 5-20 KB | ~%70 |
| Zaten sıkıştırılmış web JPG | 300-500 KB | 120-200 KB | ~%50 |
%30’dan az tasarruf görüyorsanız, görüntü muhtemelen zaten optimize edilmiş. %80+ görüyorsanız, kaynak web kullanımı için aşırı spesifikasyonluydu.
Geliştirici araçlarıyla nereye bakmalı
Chrome’da sitenizi açın, F12 ile DevTools’u açın, Network sekmesine geçin, Img filtreleyin, yeniden yükleyin. Sayfanın yüklediği her görüntüyü boyutuyla görürsünüz.
Boyuta göre sıralayın. 200 KB üzerindeki her şey sıkıştırma adayı. 500 KB üzerindeki her şey muhtemelen sıkıştırma ihtiyacı duyar. 1 MB üzerindeki her şey neredeyse kesinlikle yanlış.
Lighthouse sekmesinde bir denetim çalıştırın. “Performance” altında şunlara bakın:
- “Properly size images” — görüntülenenden büyük sunulan görüntüler
- “Efficiently encode images” — daha iyi sıkıştırılabilecek görüntüler
- “Serve images in next-gen formats” — WebP/AVIF öneri
Her önerinin somut KB tasarruf tahmini var. Büyükten küçüğe devirin.
Kaçınılması gereken hatalar
Aynı görüntüyü iki kez sıkıştırmak. JPG kayıplı — zaten kalite 75’te sıkıştırılmış bir JPG’yi tekrar kalite 75’te sıkıştırmak kaybı birleştirir. Orijinal kaynaktan başlayın.
Fotoğraflar için PNG kullanmak. PNG fotoğraf, eşdeğer JPG’den görünür kalite faydası olmadan 5-10 kat büyük olabilir. PNG grafikler içindir.
Duyarlı görüntüleri unutmak. Sıkıştırmadan sonra bile 375 px ekrana 1920 px görüntü sunmak israf. HTML <picture> öğesini veya srcset’i kullanın.
Bir kez optimize edip hiç tekrarlamamak. Görüntü sıkıştırma her yıl iyileşiyor. AVIF birkaç yıl önce yoktu, şimdi yaygın. En eski görüntülerinizde her 12-18 ayda sıkıştırmayı yeniden çalıştırın.
Deneyin
Şu anda sıkıştırılması gereken görüntüleriniz varsa, Image Compressor aracımıza teker teker bırakın. Tamamen tarayıcınızda çalışır — yükleme yok — ve canlı kalite kaydırıcısı tam istediğiniz değiş tokuşu seçmenizi sağlar. Kalite 75’te tipik fotoğraf için bir saniyenin altında %50-80 tasarruf görürsünüz.
Daha küçük görüntüler → daha hızlı sayfalar → daha iyi sıralamalar → daha mutlu kullanıcılar. Web performansındaki en kolay kazanımlardan biri.