25 Ağustos 2026
Ortalama bir web sayfasının toplam dosya boyutunun (payload) yaklaşık %50 ila %70’ini görseller oluşturur. Optimize edilmemiş yüksek çözünürlüklü JPEG/PNG dosyaları; sayfa açılış sürelerini uzatır, mobil kullanıcıların hücresel verisini tüketir ve Google’ın Core Web Vitals metriği olan LCP (Largest Contentful Paint) skorunu olumsuz etkileyebilir.
Sayfa hızını optimize etmek ve kullanıcı deneyimini korumak için modern format dönüşümleri (WebP, AVIF), duyarlı (responsive) görsel etiketleri ve tarayıcı düzeyinde gecikmeli yükleme (Lazy Loading) standartları eksiksiz uygulanmalıdır.
1. Yeni Nesil Görsel Formatları: JPEG vs WebP vs AVIF
| Format | Sıkıştırma Verimliliği | Tarayıcı Desteği | En Uygun Senaryo |
|---|---|---|---|
| JPEG / PNG | Standart (Büyük dosya boyutu) | %100 | Eski tarayıcılar için yedekleme (fallback). |
| WebP | JPEG’e göre %25 - %35 daha küçük | %97+ | Genel web görselleri, blog kapakları, ürün fotoğrafları. |
| AVIF | JPEG’e göre %50 daha küçük | %93+ | Yüksek kaliteli kahraman (Hero) banner görselleri. |
[Orijinal PNG: 1.8 MB] ──(WebP Dönüşümü)──> [WebP: 180 KB (%90 Tasarruf)] ──(AVIF)──> [AVIF: 95 KB]2. Responsive <picture> ve srcset Mimarisi
Masaüstü için hazırlanan 1920px genişliğindeki bir banner’ı 390px ekranlı bir akıllı telefona indirtmek ciddi bir performans israfıdır. Modern HTML’de cihaz çözünürlüğüne göre dinamik görsel sunulmalıdır:
<picture>
<!-- AVIF Formatı (En yüksek öncelik) -->
<source type="image/avif" srcset="/images/hero-400.avif 400w, /images/hero-800.avif 800w, /images/hero-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 1200px">
<!-- WebP Formatı (İkinci öncelik) -->
<source type="image/webp" srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 1200px">
<!-- Standart Fallback -->
<img
src="/images/hero-800.jpg"
alt="Web Sitesi Görsel Optimizasyonu"
width="1200"
height="675"
fetchpriority="high"
decoding="async"
/>
</picture>3. Core Web Vitals İçin 4 Kritik Görsel Optimizasyon Kuralı
1. LCP Kahraman Görseline Asla loading="lazy" Vermeyin
Sayfanın en üstünde ekrana gelen ilk ana görsele (Hero Banner / H1 görseli) gecikmeli yükleme vermek, LCP süresini geciktirebilir. İlk ekrandaki görsele fetchpriority="high" atanmalı; ekranın altında kalan tüm görsellere ise loading="lazy" verilmelidir.
2. Genişlik ve Yükseklik (width & height) Belirtin
Görsel etiketlerine kesin piksel boyutları veya CSS aspect-ratio tanımlamak, görsel yüklenirken sayfanın beklenmedik düzen kaymalarını (CLS - Cumulative Layout Shift) önler.
3. Görselleri CDN Üzerinden Dağıtın (Image CDN)
Cloudflare veya benzeri görsel CDN servisleri; kullanıcının cihaz tipine göre görselleri anlık olarak sıkıştırıp en yakın sunucudan dağıtır.
4. Vektörel Grafikler İçin SVG Tercih Edin
Logo, ikon ve geometrik illüstrasyonlarda piksel tabanlı formatlar yerine SVG kullanmak netlik ve boyut tasarrufu sağlar.
Sıkça Sorulan Sorular
Görselleri sıkıştırırken görsel kalitesi bozulur mu?
Kayıplı (Lossy) sıkıştırmada kalite parametresi %80 - %85 bandında tutulduğunda görsel kalite kaybı minimum düzeyde kalarak dosya boyutu ciddi oranda küçülür.
Toplu görsel optimizasyonu nasıl yapılır?
Node.js ortamında sharp kütüphanesi veya komut satırında cwebp araçlarıyla görseller toplu olarak WebP/AVIF formatına dönüştürülebilir.
Stratejik Sonuç
Görsel optimizasyonu, web sitenizin açılış hızını artırarak hem kullanıcı memnuniyetini hem de arama motoru performansını destekler. Kusursuz performans altyapısı için SEO danışmanlığı ve web geliştirme çözümlerimizi inceleyin.
İlgili Yazılar
- Web Sitesi Hızlandırma: 12 Adımda Sayfa Yüklenme Hızı Rehberi
- TikTok SEO Nedir? 6 Adımda TikTok Video Sıralama Rehberi
- Teknik SEO’da Adım Adım DOM Boyutu ve Derinliği Optimizasyonu
- Jobs-to-be-Done (JTBD) Metodu ile Müşteri Deneyimi ve SEO
- Yandex Webmaster ile SEO Performansınızı Artırmanın 12 Yolu