Web İçin Resim Optimizasyonu: Tam Rehber

Yavaş sayfa yüklemeleri dönüşümleri öldürür. Araştırmalar, kullanıcıların %40'ının 3 saniyeden uzun süren bir siteyi terk ettiğini gösteriyor. En büyük neden mi? Optimize edilmemiş görseller. Ana sayfanızdaki tek bir 5 MB'lık fotoğraf hızlı bağlantılarda bile yükleme süresini şişirebilir.

Görsel optimizasyon kontrol listesi

Doğru boyutlar — 800px gösterdiğiniz yere 4000px görsel göndermeyin
Doğru format — modern WebP/AVIF, yedek JPG/PNG
Doğru sıkıştırma — fotoğraflar için %75–85, grafikler için kayıpsız
Doğru iletim — tembel yükleme, duyarlı srcset

2026'da önerilen boyutlar

Kahraman görseller: 1920×1080 (Full HD) veya 2560×1440 (2K) maks
Blog yazısı kahraman: 1200×675 (16:9)
Ürün fotoğrafları: Yakınlaştırma destekli 1500×1500, varsayılan görüntü 800×800
Avatarlar: 256×256 (küçük resimler aşağı ölçeklendirilir)
Open Graph (sosyal paylaşım): 1200×630
Favicon: 32×32, 192×192, 512×512 PNG

Yüklemeden önce görsel boyutlandırma aracımızla fotoğrafları bu boyutlara getirin.

Formatlar: ne zaman ne kullanılır

WebP: Web görsellerinin %95'i için varsayılan. Aynı kalitede JPG'den %25–35 daha küçük. Evrensel tarayıcı desteği.
AVIF: Daha da küçük (JPG'den %50 daha küçük). Kahraman görseller için kullanın. Yeni tarayıcılar destekler.
JPG: Saydamlık olmayan fotoğraflar. Mükemmel uyumluluk.
PNG: Logolar, ekran görüntüleri, saydamlığı olan her şey. Kayıpsız.
SVG: Vektör grafikler, ikonlar, basit illüstrasyonlar. Çok küçük dosya, sonsuz ölçeklenme.

Bu formatlar arasında PDF7 Görsel Dönüştür ile dönüştürün.

Sıkıştırma: ne kadar agresif çok agresiftir?

Fotoğraflar için: %85 kalite ile başlayın. Bant genişliği kritik sayfalar için %75'e düşürün. %70'in altında, artefaktlar görünür olur. Doğru dengeyi bulmak için görsel sıkıştırma aracımızı kullanın.

srcset ile duyarlı görseller

Bir telefona 2K görsel sunmayın. HTML'in srcset niteliğini kullanın:

<img srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1920.webp 1920w" sizes="100vw" src="hero-1200.webp">

Tarayıcı uyan en küçük görseli seçer. Görsel başına 3 boyut gerekir.

Tembel yükleme

Ekranın altındaki tüm görsellere loading="lazy" ekleyin. Modern tarayıcılar kullanıcı yakın kaydırana kadar onları yüklemez, her sayfa yüklemesinde bant genişliği tasarrufu yapar.

100KB kuralı

Tek tek görsellerin 100KB altında olmasını hedefleyin. Kahraman görseller 200KB'a uzayabilir. Tek bir fotoğraf 500KB'dan fazlaysa, batırmışsınız — yeniden boyutlandırın ve yeniden sıkıştırın.