Web Performansı için En İyi Görsel Biçimleri (2026) | Bulk Image Compressor

Published March 17, 2026

Görseller En Büyük Performans Sorununuzdur

Çoğu web sitesinde görseller, toplam sayfa ağırlığının %40-60’ını oluşturur. Sayfanız yavaş yükleniyorsa, bunun ana nedeni muhtemelen görsellerdir. Tek bir optimize edilmemiş kahraman görsel, tüm HTML, CSS ve JavaScript’inizin toplamından daha büyük olabilir.

Bu, kullanıcılar (kimse bir sayfanın yüklenmesi için 5 saniye beklemez) ve arama sıralamaları için önemlidir. Google’ın Temel Web Verileri, içeriğinizin ne kadar hızlı göründüğünü doğrudan ölçer ve görseller neredeyse her zaman darboğazdır.

Temel Web Verileri ve Görseller

Temel Web Verileri’ni oluşturan üç metrik vardır ve görseller hepsini etkiler:

En Büyük İçerikli Boya (LCP), en büyük görünür öğenin yüklenmesinin ne kadar sürdüğünü ölçer. Çoğu sayfada bu bir görseldir. Google, 2,5 saniyenin altındaki her şeyi “iyi” kabul eder. Yavaş bir bağlantıdaki 3 MB’lık bir kahraman görsel, bunun çok ötesine geçecektir.

Kümülatif Düzen Kayması (CLS), sayfanın yüklenirken ne kadar sıçradığını ölçer. Belirtilmiş genişlik ve yükseklik boyutları olmayan görseller, düzen kaymalarına neden olur çünkü tarayıcı, görsel indirilene kadar ne kadar alan ayrılacağını bilemez.

Sonraki Boya ile Etkileşim (INP), yanıt verme hızını ölçer. Kod çözme sırasında ana iş parçacığını bloke eden büyük görseller, özellikle mobil cihazlarda bu puana zarar verebilir.

Her üçü için de çözüm, doğru biçimi ve sıkıştırma seviyesini kullanmakla başlar.

2026 için Biçim Karşılaştırması

JPEG

Hala çalışıyor. Hala her yerde destekleniyor. Ancak özellikle web performansı için artık daha iyi seçenekler var. JPEG dosyaları, aynı kalitede WebP’den tipik olarak %25-35 daha büyüktür ve şeffaflığı desteklemezler.

JPEG’i web dışında uyumluluğa ihtiyacınız olduğunda kullanın: e-posta ekleri, belgeler, WebP’yi kabul etmeyen sosyal medya yüklemeleri.

PNG

Aynı hikaye. PNG, ekran görüntüleri, logolar ve grafikler için mükemmeldir, ancak dosya boyutları modern alternatiflerden daha büyüktür. Kayıpsız web görselleri için WebP kayıpsız, daha küçük dosyalar üretir.

PNG’yi, görsel düzenleyicilerde açılacak dosyaları paylaşmanız gerektiğinde veya tarayıcı dışı bağlamlarda garantili uyumluluğa ihtiyacınız olduğunda kullanın.

WebP

WebP, 2026’da varsayılan web görsel biçimi haline geldi. Tarayıcı desteği Chrome, Firefox, Safari ve Edge’de evrenseldir. CDN’ler ve görsel hizmetleri, WebP’yi otomatik olarak sunar. Çoğu CMS platformu artık WebP’yi yerel olarak işler.

Rakamlar kendileri için konuşuyor: Fotoğraflar için JPEG’den %25-35 daha küçük, grafikler için PNG’den %25 daha küçük, aynı görsel kalitede. Kayıplı, kayıpsız, şeffaflık ve animasyonu destekler.

Web siteniz için yalnızca bir biçim seçecekseniz, WebP bugün için bariz seçimdir. JPEG ve PNG ile daha derin bir karşılaştırma için JPEG vs PNG vs WebP karşılaştırmamıza göz atın.

AVIF: Sonraki Adım

AVIF, AV1 video kodlayıcısını temel alır ve sıkıştırma verimliliğini daha da ileriye taşır. AVIF dosyaları, WebP’den tipik olarak %20-30 daha küçüktür ve bu da onları JPEG’den yaklaşık %50 daha küçük yapar.

Tarayıcı desteği önemli ölçüde iyileşti. Chrome, Firefox ve Safari artık AVIF’i destekliyor. Edge de destekliyor. Ana dezavantajı kodlama hızıdır: AVIF dosyaları oluşturmak, WebP veya JPEG’den önemli ölçüde daha uzun sürer. Binlerce görseli olan bir site için kodlama süresi birikir.

AVIF, derleme süreciniz kodlama süresini kaldırabiliyorsa kullanmaya değerdir. Çoğu site için, WebP geri dönüşlü AVIF sunmak ideal kurulumdur.

srcset ile Duyarlı Görseller

Doğru biçimi seçmek denklemin yalnızca yarısıdır. Ayrıca doğru boyutu da sunmanız gerekir.

390px genişliğinde ekrana sahip bir telefon ziyaretçisinin 1920px’lik bir görsele ihtiyacı yoktur. srcset niteliği, birden çok boyut sağlamanıza ve tarayıcının en iyisini seçmesine izin verir:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Ürün fotoğrafı"
  width="1200"
  height="800"
  loading="lazy"
>

Bu, tarayıcıya şunu söyler: küçük ekranlarda 400px sürümünü kullan, orta ekranlarda 800px, büyük ekranlarda 1200px kullan. Mobilde bant genişliği tasarrufu önemlidir.

Ayrıca loading="lazy" niteliğine de dikkat edin. Bu, tarayıcıya görseli yalnızca görünüm alanına kaydırıldığında yüklemesini söyler. LCP görselinizde (kullanıcının gördüğü ilk büyük görsel) tembel yükleme kullanmayın, ancak görünür alanın altındaki her şeyde kullanın.

İçerik Türüne Göre Biçim Önerileri

Kahraman görseller ve banner’lar: WebP geri dönüşlü AVIF. Bunlar en büyük görsellerinizdir ve daha iyi sıkıştırmadan en çok faydalananlardır. Maksimum 1920px genişliğinde, mobil için daha küçük srcset varyantlarıyla sunun.

Ürün fotoğrafları: Kalite 80’de kayıplı WebP. E-ticaret için, kategori sayfası başına yüzlerce ürün görseli sunabilirsiniz. Görsel başına %10’luk bir boyut azalması bile hızla birikir.

Blog yazısı görselleri: Kalite 75-82’de kayıplı WebP. Blog görselleri genellikle 800-1200px genişliğinde görüntülenir, bu nedenle çok büyük olmaları gerekmez. Sıkıştırmadan önce yeniden boyutlandırın.

Simgeler ve logolar: Mümkünse SVG. Raster logolar için kayıpsız WebP veya PNG. Bu dosyalar her iki şekilde de küçüktür, bu nedenle biçim seçimi burada daha az önemlidir.

Ekran görüntüleri ve diyagramlar: Kayıpsız WebP veya PNG. Her ikisi de metni ve keskin kenarları mükemmel şekilde korur. WebP size yaklaşık %25 daha küçük dosyalar sağlar.

Kullanıcı yüklemeli içerik: Yükleme sırasında her şeyi WebP’ye dönüştürün. Mevcut görsel kitaplıklarını taşıyorsanız, toplu dönüştürme için Toplu Görsel Sıkıştırıcı’yı kullanın.

Sayfa Hızı için Hızlı Kazanımlar

Bugün sitenizin görsel performansını iyileştirmek istiyorsanız, işte en yüksek etkili değişiklikler:

Tüm web görselleri için WebP’ye geçin. Bu tek başına görsel yükünü %25-35 oranında azaltabilir.
Görselleri, gerçekte görüntülendikleri boyutlara yeniden boyutlandırın. 600px’lik bir kapsayıcıda 4000px’lik bir fotoğraf sunmayın.
Her img etiketine genişlik ve yükseklik nitelikleri ekleyin. Bu, düzen kaymalarını önler.
Görünür alanın altındaki görselleri tembel yükleyin. Yalnızca ilk görünen görselleriniz hemen yüklenmelidir.
Statik bir kahraman görseliniz varsa LCP görselinizi önceden yükleyin. Belge başlığında <link rel="preload" as="image" href="hero.webp"> kullanın.
Ziyaretçilerinize yakın konumlardan görsel sunan bir CDN kullanın.

Peki Ya Gelecek?

JPEG XL, umut vadeden başka bir biçimdi ancak tarayıcı benimsemesi durdu. Chrome deneysel desteğini kaldırdı ve Chrome olmadan yaygın benimseme olası değil. AVIF, ileriye dönük olarak daha pratik bir seçimdir.

Eğilim açıktır: daha yeni biçimler daha iyi sıkıştırır ve tarayıcı desteği zamanla yetişir. WebP şu anda güvenli varsayılandır. Araçlarınız destekliyorsa AVIF’i benimsemeye değer. Her iki durumda da, biçim seçimi doğru boyutlandırma ve tembel yükleme ile birleştiğinde görsellerinizin bir performans darboğazı olmasını önleyecektir.

Görsel sıkıştırmanın teknik düzeyde nasıl çalıştığı hakkında daha fazla bilgi için web sitesi görsellerinin neden sıkıştırmaya ihtiyacı olduğu rehberimiz temel bilgileri kapsar.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor