Web Sitesi İçin Resimler Nasıl Sıkıştırılır: Eksiksiz 2025 Rehberi

Resimler, bir web sitesinin toplam sayfa ağırlığının genellikle %50-70'ini oluşturur; bu da resim optimizasyonunu site performansını iyileştirmenin en etkili yollarından biri hâline getirir. Doğru sıkıştırılmış ve optimize edilmiş resimler daha hızlı sayfa yüklemesi, daha iyi SEO sıralaması, gelişmiş kullanıcı deneyimi ve düşen barındırma maliyetleri anlamına gelir. Bu kapsamlı rehber, 2025'te web siteleri için resim sıkıştırma ve optimizasyonu konusunda bilmeniz gereken her şeyi ele alıyor.

Web Sitesi Resim Optimizasyonu Neden Önemli

Sayfa Yükleme Hızı ve Kullanıcı Deneyimi

Etkisi:

Mobil kullanıcıların %53'ü, 3 saniyeden uzun sürede yüklenen siteleri terk ediyor
Her 1 saniyelik gecikme dönüşümleri %7 azaltıyor
Hızlı yüklenen sitelerde ortalama oturum süresi %70 daha uzun

Resim Optimizasyonunun Faydaları:

Sayfa boyutunda %40-80 azalma
2-5 kat daha hızlı sayfa yüklemesi
Daha iyi mobil deneyim
Daha düşük hemen çıkma oranı

SEO ve Google Sıralaması

Google'ın Bakış Açısı:

Sayfa hızı doğrudan bir sıralama faktörüdür (masaüstünde 2010, mobilde 2018'den bu yana)
Core Web Vitals 2021'de sıralama sinyali oldu
Hızlı siteler daha sık taranır
Daha iyi kullanıcı metrikleri (hemen çıkma oranı, sitede kalma süresi) sıralamayı yükseltir

Resim SEO'sunun Faydaları:

Daha yüksek arama sıralaması
Görsel aramada daha iyi görünürlük
Daha çok organik trafik
Mobil aramada daha iyi performans

Core Web Vitals Üzerindeki Etki

Metrik	Neyi Ölçer	Resmin Etkisi	İyi Eşik
LCP (Largest Contentful Paint)	Yükleme performansı	Kapak resimleri doğrudan LCP'yi etkiler	< 2,5 saniye
FID (First Input Delay)	Etkileşim gecikmesi	Büyük resimler ana iş parçacığını bloklar	< 100 ms
CLS (Cumulative Layout Shift)	Görsel kararlılık	Boyutu belirtilmemiş resimler kaymaya yol açar	< 0,1
INP (Interaction to Next Paint)	Yanıt verme hızı	Ağır resimler etkileşimi geciktirir	< 200 ms

Kritik: Core Web Vitals eşiklerini geçmek için optimize edilmiş resimler şarttır ve bu doğrudan arama sıralamasını etkiler.

Maliyet Tasarrufu

Bant Genişliği Maliyetleri:

Optimize edilmemiş site: Sayfa başına ortalama 5 MB × 100.000 ziyaretçi = aylık 500 GB
Optimize edilmiş site: Sayfa başına ortalama 1 MB × 100.000 ziyaretçi = aylık 100 GB
Tasarruf: Aylık 400 GB = aylık 40-200 dolar (barındırma sağlayıcısına göre)

CDN Maliyetleri:

CloudFlare: GB başına 0,01-0,05 dolar
Amazon CloudFront: GB başına 0,085 dolar
400 GB tasarruf = aylık 4-34 dolar

Web Siteleri İçin İdeal Resim Özellikleri

Site Bölümüne Göre Resim Boyutları

Site Bölümü	Önerilen Boyutlar	Hedef Dosya Boyutu	Kalite	Format
Kapak / Banner	1920×1080 px - 2560×1440 px	150-400 KB	%80-85	JPEG/WebP
Blog Öne Çıkan	1200×630 px (16:9)	100-200 KB	%75-85	JPEG/WebP
Blog İçeriği	800×600 px - 1200×900 px	80-150 KB	%75-80	JPEG/WebP
Ürün Resimleri	1000×1000 px - 2000×2000 px	100-300 KB	%85-90	JPEG/WebP
Küçük Resimler	300×300 px - 600×600 px	20-60 KB	%70-80	JPEG/WebP
Galeri Resimleri	1200×800 px	100-200 KB	%80-85	JPEG/WebP
Arka Plan Resimleri	1920×1080 px	150-300 KB	%75-80	JPEG/WebP
Logolar (şeffaflıklı)	200×100 px - 400×200 px	10-50 KB	%100	PNG/SVG
Simgeler	32×32 px - 128×128 px	2-10 KB	%100	PNG/SVG
Open Graph / Sosyal	1200×630 px	100-200 KB	%80	JPEG/PNG
Favicon	32×32 px, 192×192 px, 512×512 px	2-15 KB	%100	PNG/ICO

Sayfa Türüne Göre Dosya Boyutu Hedefleri

Sayfa Türü	Hedef Toplam Sayfa Boyutu	Resim Bütçesi	Resim Sayısı
Ana Sayfa	1-2 MB	500 KB - 1 MB	5-15 resim
Blog Yazısı	800 KB - 1,5 MB	400-800 KB	3-8 resim
Ürün Sayfası	1-2,5 MB	600 KB - 1,5 MB	5-20 resim
Kategori / Arşiv	1-2 MB	600 KB - 1 MB	10-30 küçük resim
Açılış Sayfası	800 KB - 1,5 MB	400-800 KB	3-10 resim

Web Sitesi İçin Resimler Adım Adım Nasıl Sıkıştırılır

Adım 1: Doğru Formatı Seçin

Format Karar Ağacı:

Is it a photograph or complex image?
├─ YES → Use JPEG (or WebP for modern browsers)
└─ NO → Is transparency required?
    ├─ YES → Use PNG (or WebP with alpha)
    └─ NO → Is it a simple graphic/logo?
        ├─ YES → Use SVG (scalable, tiny file size)
        └─ NO → Use PNG-8 or JPEG

Format Önerileri:

JPEG:

En iyi kullanım: Fotoğraflar, karmaşık resimler, renk geçişleri
Sıkıştırma: Kayıplı (kalite ayarlanabilir)
Dosya boyutu: Küçük
Şeffaflık: Yok
Kullanım oranı: Web sitesi resimlerinin %80'i

PNG:

En iyi kullanım: Ekran görüntüleri, grafikler, logolar, metin içeren resimler
Sıkıştırma: Kayıpsız
Dosya boyutu: Büyük
Şeffaflık: Var
Kullanım alanı: Piksel düzeyinde kusursuzluk gerektiren grafikler

WebP:

En iyi kullanım: Tüm resim türleri (fotoğraf ve grafik)
Sıkıştırma: Kayıplı ve kayıpsız seçenekler
Dosya boyutu: JPEG/PNG'den %25-35 daha küçük
Şeffaflık: Var
Kullanım alanı: Yedekli çalışan modern web siteleri
Tarayıcı desteği: %95+ (tüm modern tarayıcılar)

AVIF:

En iyi kullanım: En ileri düzey optimizasyon
Sıkıştırma: Kayıplı ve kayıpsız
Dosya boyutu: JPEG'den %50 daha küçük
Şeffaflık: Var
Kullanım alanı: Aşamalı geliştirme
Tarayıcı desteği: %85+ (artıyor)

SVG:

En iyi kullanım: Logolar, simgeler, basit grafikler
Sıkıştırma: Vektör (sınırsız ölçeklenebilir)
Dosya boyutu: Çok küçük (genellikle 1-10 KB)
Şeffaflık: Var
Kullanım alanı: Ölçeklenebilir her grafik

Adım 2: Resimleri Görüntüleme Boyutuna Küçültün

Neden Önce Boyutlandırmalı:

800×600 px olarak gösterilen 4000×3000 px bir resim, bant genişliğinin %93'ünü boşa harcar
Daha küçük boyut = daha iyi sıkıştırma = daha hızlı yükleme
Kullanıcı tarafında daha kısa işlem süresi

Görüntüleme Boyutu Nasıl Belirlenir:

Tarayıcının geliştirici araçlarında öğeyi inceleyin
Gerçek işlenmiş boyutları kontrol edin
Retina ekranları hesaba katın (2 kat çözünürlük)
Duyarlı resim boyutlarını kullanın

Retina Ekran Stratejisi:

Görüntüleme boyutu: 800 px genişlik
Retina boyutu: 1600 px genişlik (2 kat)
Netliği korumak için daha yüksek kalitede sıkıştırın

Örnek İş Akışı:

# Display width: 800px
# Retina: 1600px actual image
# But compress more aggressively to keep file size down
convert original.jpg -resize 1600x -quality 75 optimized.jpg

Adım 3: İdeal Kalite Ayarlarıyla Sıkıştırın

Resim Türüne Göre Kalite Önerileri:

Resim Türü	JPEG Kalitesi	WebP Kalitesi	Notlar
Kapak Resimleri	%80-85	%75-80	Öne çıkar, kalite gerekir
Ürün Fotoğrafları	%85-90	%80-85	Satış için kritik
Blog Resimleri	%75-80	%70-75	İyi denge
Küçük Resimler	%70-75	%65-70	Küçük gösterim, agresif sıkıştırma sorun değil
Arka Plan Resimleri	%70-80	%65-75	Daha fazla sıkıştırılabilir
Portreler	%80-85	%75-80	Yüz detayları önemlidir
Manzaralar	%75-80	%70-75	Gökyüzü bantlaşmasına dikkat

TinyImagePro Kullanımı (Önerilen):

TinyImagePro.com adresine gidin
Web sitesi resimlerinizi yükleyin
"Website" hazır ayarını seçin veya kaliteyi elle belirleyin
Çıktı formatını seçin (JPEG, PNG, WebP)
Sıkıştırın ve indirin
Web sitenize yükleyin

Toplu İşleme:

Tutarlılık için tüm resimleri tek seferde işleyin
Benzer resim türlerinde aynı kalite ayarlarını kullanın
Düzenli bir klasör yapısı koruyun

Adım 4: Duyarlı Resimleri Uygulayın

Neden Duyarlı Resimler:

Mobil kullanıcıların masaüstü boyutunda resimlere ihtiyacı yok
Küçük ekranlarda bant genişliğinden tasarruf edilir
Mobil performans iyileşir

HTML srcset Uygulaması:

<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w,
    image-1600w.jpg 1600w
  "
  sizes="(max-width: 400px) 400px,
         (max-width: 800px) 800px,
         (max-width: 1200px) 1200px,
         1600px"
  alt="Description"
  width="1600"
  height="900"
  loading="lazy"
>

Faydaları:

Tarayıcı uygun resim boyutunu kendisi seçer
Mobil kullanıcılar daha küçük resimler alır
Masaüstü kullanıcıları yüksek kaliteli resimler alır
Otomatik optimizasyon

Duyarlı Resim Setleri Oluşturma:

3-4 boyut varyasyonu oluşturun (400 px, 800 px, 1200 px, 1600 px)
Her birini uygun kalitede sıkıştırın
srcset ve sizes özniteliklerini kullanın
CLS'yi önlemek için genişlik ve yüksekliği her zaman belirtin

Adım 5: Modern Formatları Yedekleriyle Birlikte Kullanın

Modern Resim Yığını:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Nasıl Çalışır:

Tarayıcı önce AVIF'i dener (en iyi sıkıştırma)
AVIF desteklenmiyorsa WebP'ye düşer
Eski tarayıcılarda JPEG'e düşer
Otomatiktir, JavaScript gerekmez

Dosya Boyutu Karşılaştırması:

Orijinal JPEG (1200×800): 450 KB
Optimize edilmiş JPEG (%85 kalite): 180 KB (%60 azalma)
WebP (%80 kalite): 120 KB (JPEG'den %33 daha küçük)
AVIF (%75 kalite): 80 KB (WebP'den %33 daha küçük)

Dönüştürme İş Akışı:

# Create optimized JPEG
convert original.jpg -quality 85 image.jpg

# Create WebP version
cwebp -q 80 original.jpg -o image.webp

# Create AVIF version
avifenc -s 75 original.jpg image.avif

İleri Düzey Web Sitesi Resim Optimizasyonu Teknikleri

Resimlerde Tembel Yükleme

Nedir: Resimler yalnızca görüntü alanına girmek üzereyken yüklenir.

Faydaları:

Daha hızlı ilk sayfa yüklemesi
Sayfayı kaydırmayan kullanıcılar için bant genişliği tasarrufu
Daha iyi Core Web Vitals skorları
Daha düşük sunucu maliyeti

Uygulama (Yerleşik):

<img src="image.jpg" alt="Description" loading="lazy">

En İyi Uygulamalar:

Ekranın üst kısmındaki resimlerde tembel yükleme kullanmayın (LCP'yi bozar)
Ekranın altında kalan her şeyi tembel yükleyin
Tüm blog yazılarında ve uzun sayfalarda kullanın
Duyarlı resimlerle birlikte kullanın

Ekranın Üstü ve Altı:

<!-- Above the fold (hero image): DON'T lazy load -->
<img src="hero.jpg" alt="Hero" loading="eager">

<!-- Below the fold: DO lazy load -->
<img src="content.jpg" alt="Content" loading="lazy">

Web İçin Progresif JPEG

Nedir: JPEG birkaç aşamada yüklenir; önce düşük çözünürlüklü bir önizleme görünür, ardından kalite kademeli olarak artar.

Faydaları:

Daha iyi algılanan performans
Kullanıcı anında bir şey görür
%2-5 daha küçük dosya boyutu
Yavaş bağlantılarda daha iyi deneyim

Ne Zaman Kullanılır:

30 KB üzerindeki resimlerde
Kapak resimlerinde
Öne çıkan resimlerde
Görünürlüğü yüksek her resimde

Nasıl Oluşturulur:

# ImageMagick
convert input.jpg -interlace Plane output.jpg

# cjpeg (MozJPEG)
cjpeg -progressive -quality 85 input.jpg > output.jpg

TinyImagePro: 30 KB üzerindeki resimler için progresif JPEG'i otomatik olarak üretir.

Simgeler İçin Resim Sprite'ları

Nedir: Birden çok küçük resmi (simgeyi) tek bir dosyada birleştirmek.

Faydaları:

HTTP isteklerini azaltır (performans için kritik)
Daha hızlı sayfa yüklemesi
Daha iyi önbellekleme
Daha düşük sunucu yükü

Örnek Sprite Sayfası:

icons.png (400×100px containing 4 icons)
Icon 1: 0,0,100px,100px
Icon 2: 100,0,100px,100px
Icon 3: 200,0,100px,100px
Icon 4: 300,0,100px,100px

CSS Uygulaması:

.icon {
  background-image: url('icons.png');
  width: 100px;
  height: 100px;
}

.icon-search { background-position: 0 0; }
.icon-cart { background-position: -100px 0; }
.icon-user { background-position: -200px 0; }
.icon-menu { background-position: -300px 0; }

Daha İyi Alternatif (2025): Daha iyi ölçeklenebilirlik için SVG sprite'ları veya simge fontları kullanın.

Kritik Resimler ve Ön Yükleme

Kritik Resimleri Ön Yükleyin:

<head>
  <!-- Preload hero image for faster LCP -->
  <link rel="preload" as="image" href="hero.webp" type="image/webp">
  <link rel="preload" as="image" href="hero.jpg" type="image/jpeg">
</head>

Ne Zaman Ön Yüklenmeli:

Ekranın üst kısmındaki kapak resimleri
Logo
Kritik arka plan resimleri
LCP resmi (Largest Contentful Paint öğesi)

Ne Zaman Ön Yüklenmemeli:

Ekranın altında kalan resimler
Kritik olmayan resimler
2-3'ten fazla resim (kazanç azalır)

Resim Dağıtımı İçin CDN

Neden CDN Kullanmalı:

Resimleri kullanıcıya daha yakın sunuculardan dağıtır
Dünya genelinde %40-60 daha hızlı yükleme
Kaynak sunucu yükünü azaltır
Otomatik sıkıştırma ve optimizasyon (bazı CDN'lerde)
Daha iyi önbellek yönetimi

Popüler Resim CDN'leri:

CDN	Öne Çıkan Özellikler	Fiyatlandırma
Cloudflare Images	Otomatik optimizasyon, WebP/AVIF dönüşümü, boyutlandırma	Aylık 5 dolar + her 100.000 resim için 1 dolar
Cloudinary	Yapay zekâ destekli optimizasyon, dönüşümler, duyarlı resimler	Ücretsiz katman: aylık 25 GB, Pro aylık 89 dolar
imgix	Gerçek zamanlı resim işleme, duyarlı resimler	Ücretsiz katman: 1.000 ana resim
Amazon CloudFront	Küresel dağıtım, S3 entegrasyonu	Kullandığın kadar öde: GB başına 0,085 dolar
KeyCDN	Hızlı dağıtım, WebP desteği	GB başına 0,04 dolar

Temel CDN Kurulumu:

<!-- Before: Origin server -->
<img src="https://yoursite.com/images/photo.jpg">

<!-- After: CDN -->
<img src="https://cdn.yoursite.com/images/photo.jpg">

Dönüşümlerle Gelişmiş CDN Kullanımı (Cloudinary örneği):

<img src="https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/photo.jpg">

Parametreler: w_800 (genişlik), q_auto (otomatik kalite), f_auto (otomatik format: WebP/AVIF)

Platforma Özel Optimizasyon

WordPress Resim Optimizasyonu

Yerleşik Özellikler:

WordPress birden çok resim boyutunu otomatik üretir (küçük, orta, büyük)
Tembel yükleme varsayılan olarak etkindir (WordPress 5.5 ve üzeri)
srcset resimlere otomatik eklenir

Önerilen Eklentiler:

1. ShortPixel Image Optimizer:

Kayıplı, parlak ve kayıpsız sıkıştırma
WebP dönüşümü
Toplu optimizasyon
Ücretsiz: aylık 100 resim

2. Imagify:

3 optimizasyon seviyesi
WebP ve AVIF desteği
Toplu optimizasyon
Ücretsiz: aylık 20 MB

3. Smush:

Kayıpsız sıkıştırma
Tembel yükleme
Toplu işleme
Ücretsiz sürüm mevcut

4. EWWW Image Optimizer:

Yerel ve bulut sıkıştırma
WebP dönüşümü
Yüklemede otomatik optimizasyon
Ücretsiz ve pro sürümler

WordPress Yapılandırması:

// functions.php - Set custom image sizes
add_image_size('custom-large', 1600, 9999, false);
add_image_size('custom-medium', 800, 9999, false);
add_image_size('custom-small', 400, 9999, false);

// Disable unnecessary image sizes to save space
function disable_unused_image_sizes($sizes) {
    unset($sizes['medium_large']); // 768px
    unset($sizes['1536x1536']); // 2x medium_large
    unset($sizes['2048x2048']); // 2x large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');

Shopify / E-ticaret Optimizasyonu

E-ticaret Resim Gereksinimleri:

Ürün resimleri: Yüksek kalite (%85-90 sıkıştırma)
Farklı açılar: Ürün başına 4-8 resim
Yakınlaştırma işlevi: 2000×2000 px resimler sunun
Küçük resimler: Agresif sıkıştırma (%70-75)
Tutarlılık: Tüm ürünlerde aynı en boy oranı

Shopify İçin En İyi Uygulamalar:

2000×2000 px ürün resimleri yükleyin
Shopify daha küçük sürümleri otomatik oluşturur
WebP formatını kullanın (Shopify destekler)
Shopify'ın resim CDN'ini kullanın (otomatiktir)
SEO için dosyaları açıklayıcı adlandırın: product-name-blue.jpg

Shopify İçin Resim Optimizasyonu Uygulamaları:

TinyIMG SEO & Image Optimizer
Crush.pics Image Optimizer
Image Optimizer by Booster Apps

Ürün Resmi Özellikleri:

Main Product Image: 2000×2000px, 85-90% quality, 200-400KB
Thumbnail Grid: 600×600px, 75-80% quality, 40-80KB
Zoom View: 2500×2500px or higher, 90% quality, 400-600KB
Lifestyle Images: 1600×1200px, 80-85% quality, 150-300KB

Statik Site Üreticileri (Next.js, Gatsby)

Next.js Resim Optimizasyonu:

import Image from 'next/image'

export default function ProductImage() {
  return (
    <Image
      src="/images/product.jpg"
      width={800}
      height={600}
      alt="Product"
      loading="lazy"
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..." // Low-res placeholder
      quality={85}
    />
  )
}

Next.js'in Avantajları:

Otomatik resim optimizasyonu
Otomatik WebP/AVIF dönüşümü
Duyarlı resimler (srcset)
Tembel yükleme
Yükleme sırasında bulanık yer tutucu
Otomatik boyutlandırmayla CLS'yi önler

Gatsby Image:

import { GatsbyImage, getImage } from "gatsby-plugin-image"

export default function HeroImage({ data }) {
  const image = getImage(data.heroImage)

  return (
    <GatsbyImage
      image={image}
      alt="Hero"
      loading="eager" // Above-the-fold
    />
  )
}

Gatsby'nin Avantajları:

Derleme zamanında resim optimizasyonu
Otomatik duyarlı resimler
WebP dönüşümü
Bulanıklıktan netleşme efekti
Sanat yönetimi desteği

Resim Performansını İzleme ve Test Etme

Performans Testi Araçları

Google PageSpeed Insights:

Core Web Vitals ölçümü yapar
Resim optimizasyonu önerileri sunar
Yanlış boyutlandırılmış resim uyarıları gösterir
Yeni nesil formatlar önerir (WebP, AVIF)

GTmetrix:

Şelale grafiği (resim yükleme zamanlamasını gösterir)
Resim optimizasyonu raporu
Geçmiş performans takibi
Sıkıştırma önerileri

WebPageTest:

Ayrıntılı performans metrikleri
Film şeridi görünümü (görsel yükleme ilerleyişi)
Resim analizi
Farklı konumlardan test

Chrome DevTools:

1. Open DevTools (F12)
2. Network tab → Filter by "Img"
3. Reload page
4. Check:
   - Total image size
   - Number of images
   - Load time for each image
   - Images blocking render

Core Web Vitals Optimizasyonu

LCP (Largest Contentful Paint) - Hedef: < 2,5 sn:

Yaygın Sebepler:

Optimize edilmemiş kapak resmi
Büyük arka plan resmi
Yavaş sunucu yanıtı

Çözümler:

Kapak resmini optimize edin (< 200 KB)
LCP resmini ön yükleyin

<link rel="preload" as="image" href="hero.webp" type="image/webp">

Daha hızlı dağıtım için CDN kullanın
Daha agresif sıkıştırın
WebP/AVIF formatlarını kullanın

CLS (Cumulative Layout Shift) - Hedef: < 0,1:

Yaygın Sebepler:

Genişlik/yükseklik özniteliği olmayan resimler
Geç yüklenip içeriği kaydıran resimler
Yer ayrılmamış reklam ve gömülü içerikler

Çözümler:

Genişlik ve yüksekliği her zaman belirtin

<img src="image.jpg" width="800" height="600" alt="..." loading="lazy">

CSS aspect-ratio kullanın

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Tembel yüklenen resimler için yer ayırın

INP (Interaction to Next Paint) - Hedef: < 200 ms:

Yaygın Sebepler:

Resimleri işleyen ağır JavaScript
Ana iş parçacığını bloklayan resim kaydırıcıları / karuseller
Etkileşim sırasında çözülen büyük resimler

Çözümler:

Karusel resimlerini optimize edin (her biri < 100 KB)
Resim animasyonları için CSS dönüşümlerini kullanın
Resimleri asenkron çözün

<img src="image.jpg" decoding="async" alt="...">

Performans Bütçeleri Belirleme

Performans Bütçesi Nedir:

İzin verilen maksimum kaynak boyutları
Performans gerilemesini önler
Geliştirme sırasında uygulanır

Örnek Resim Bütçesi:

{
  "resourceSizes": {
    "total": 1500,        // Total page size in KB
    "image": 800,         // Total image size in KB
    "script": 300,
    "stylesheet": 100,
    "other": 300
  },
  "resourceCounts": {
    "image": 20,          // Maximum number of images
    "script": 10,
    "stylesheet": 5
  }
}

Uygulama Araçları:

Lighthouse CI (otomatik test)
webpack-bundle-analyzer (derleme analizi)
bundlesize (npm paketi)

Lighthouse CI Örneği:

# .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "total-byte-weight": ["error", {"maxNumericValue": 1500000}],
        "uses-optimized-images": "error",
        "uses-webp-images": "warn",
        "modern-image-formats": "warn"
      }
    }
  }
}

Yaygın Web Sitesi Resim Sorunları ve Çözümleri

Sorun: Yüksek Düzen Kayması (CLS)

Belirti: Resimler yüklenirken içerik yerinden oynuyor.

Neden: Boyutları belirtilmemiş resimler.

Çözüm:

<!-- BAD: No dimensions -->
<img src="image.jpg" alt="Photo">

<!-- GOOD: Specified dimensions -->
<img src="image.jpg" width="800" height="600" alt="Photo">

<!-- BEST: Modern aspect-ratio CSS -->
<img src="image.jpg" alt="Photo" style="aspect-ratio: 16/9; width: 100%; height: auto;">

Sorun: Yavaş LCP (Largest Contentful Paint)

Belirti: Kapak resminin tamamen görünmesi 3-5 saniye veya daha uzun sürüyor.

Nedenleri:

Kapak resminin çok büyük olması (> 500 KB)
Ön yükleme yapılmaması
İşlemeyi bloklayan kaynaklar
Yavaş sunucu/CDN

Çözümler:

Kapak resmini 200 KB'ın altına sıkıştırın
Kapak resmini ön yükleyin:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

CDN kullanın
Kritik işleme yolunu optimize edin

Sorun: Resimler Retina Ekranlarda Pikselli Görünüyor

Neden: 2 kat (Retina) çözünürlüklü ekranlarda 1 kat resim sunmak.

Çözüm: 2 kat resim sunun ama daha fazla sıkıştırın:

<img
  src="image-800w.jpg"
  srcset="image-800w.jpg 1x, image-1600w.jpg 2x"
  alt="Product"
>

Burada image-1600w.jpg, benzer dosya boyutunu korumak için daha agresif sıkıştırılır (%85 yerine %70-75).

Sorun: Site Genelinde Resim Kalitesi Farklı

Neden: Tutarsız sıkıştırma ayarları.

Çözüm: Sıkıştırma kuralları belirleyin ve toplu işlem kullanın:

Hero Images: 85% quality, WebP, < 200KB
Product Photos: 85% quality, WebP, < 250KB
Blog Images: 80% quality, WebP, < 150KB
Thumbnails: 75% quality, WebP, < 60KB
Backgrounds: 75% quality, WebP, < 200KB

Tutarlılık için TinyImagePro'nun hazır ayarlı toplu sıkıştırmasını kullanın.

Sorun: Eski Tarayıcılar WebP/AVIF Desteklemiyor

Neden: Eski tarayıcı uyumluluğu.

Çözüm: Her zaman yedek sunun:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback for all browsers">
</picture>

Tarayıcı desteklediği en iyi formatı otomatik olarak seçer.

En İyi Uygulamalar Kontrol Listesi

Yüklemeden Önce

✅ Resimleri boyutlandırın — görüntüleme boyutuna göre (2 kat Retina hesaba katılarak) ✅ Doğru formatı seçin (fotoğraflarda JPEG, grafiklerde PNG, logolarda SVG) ✅ Uygun şekilde sıkıştırın (kullanım amacına göre %75-90 kalite) ✅ EXIF meta verisini kaldırın (10-50 KB tasarruf, gizlilik artışı) ✅ Birden çok boyut oluşturun — duyarlı resimler için (400w, 800w, 1200w, 1600w) ✅ WebP/AVIF'e dönüştürün (JPEG/PNG yedekleriyle birlikte)

HTML Uygulaması

✅ Genişlik ve yüksekliği her zaman belirtin (CLS'yi önler) ✅ Tembel yükleme kullanın — ekranın altında kalan resimlerde ✅ srcset uygulayın — duyarlı resimler için ✅ Açıklayıcı alt metni ekleyin (SEO ve erişilebilirlik) ✅ loading="eager" kullanın — yalnızca ekranın üst kısmındaki resimlerde ✅ <picture> öğesini kullanın — modern formatlar için ✅ LCP resmini ön yükleyin (kapak/banner) ✅ decoding="async" kullanın — büyük resimlerde

Performans Optimizasyonu

✅ Toplam resim ağırlığını sayfa başına 800 KB'ın altında tutun ✅ Resim sayısını sınırlayın (sayfa başına < 20 idealdir) ✅ CDN kullanın — küresel dağıtım için ✅ Tarayıcı önbelleğini etkinleştirin (resimler için 1 yıl) ✅ Core Web Vitals'ı izleyin — aylık olarak ✅ Performans bütçesi belirleyin ve uygulayın ✅ Yavaş 3G bağlantılarda test edin ✅ Lighthouse ile düzenli denetim yapın

Sıkça Sorulan Sorular

S: Web sitesi fotoğrafları için en iyi format hangisi? C: Maksimum uyumluluk için JPEG; %25-35 daha iyi sıkıştırma için, JPEG yedeğiyle birlikte WebP. İkisini birden sunmak için <picture> öğesini kullanın.

S: Web sitesi resimlerini ne kadar sıkıştırmalıyım? C: Çoğu resim için %75-85 kalite uygundur. Kapak resimleri %85, küçük resimler %70-75 olabilir. Büyük resimlerde 200 KB'ın, içerik resimlerinde 100 KB'ın altını hedefleyin.

S: WebP mi kullanmalıyım, AVIF mi? C: İkisini de yedeklerle birlikte kullanın. Destekleyen tarayıcılara AVIF sunun (en küçük), WebP'ye düşün (desteği iyi), oradan da JPEG'e düşün (evrensel).

S: Resimleri mobil için nasıl optimize ederim? C: srcset ile duyarlı resimler kullanın, mobil cihazlara daha küçük resimler sunun, tembel yükleme uygulayın ve daha agresif sıkıştırın (%70-80 kalite).

S: Resimlerin yavaş yüklenmesine ne yol açar? C: Büyük dosya boyutları, sıkıştırma yapılmaması, tembel yüklemenin eksikliği, yavaş sunucu/CDN, çok fazla resim ve işlemeyi bloklayan kaynaklar.

S: "Resimleri yeni nesil formatlarda sunun" uyarısını nasıl gideririm? C: Resimleri TinyImagePro veya komut satırı araçlarıyla WebP ya da AVIF'e dönüştürün, ardından <picture> öğesi ve yedeklerle birlikte uygulayın.

S: Kapak resimlerinde tembel yükleme kullanmalı mıyım? C: Hayır! Ekranın üst kısmındaki resimlerde, özellikle kapak resimlerinde asla tembel yükleme kullanmayın. loading="eager" kullanın ya da bu özniteliği hiç eklemeyin. Kapak resmini tembel yüklemek LCP'yi bozar.

S: Duyarlı resimler srcset ile nasıl çalışır? C: Tarayıcı ekran boyutuna ve çözünürlüğe göre uygun resmi seçer. 3-4 boyut varyasyonu sunarsınız, tarayıcı yalnızca birini indirir.

S: İyi bir LCP skoru nedir? C: 2,5 saniyenin altı "İyi", 2,5-4,0 arası "İyileştirme Gerekli", 4,0 üzeri "Zayıf" sayılır. İyi bir LCP'nin anahtarı optimize edilmiş kapak resimleridir.

S: Resim performansını ne sıklıkla denetlemeliyim? C: Aylık denetimler idealdir. Büyük değişikliklerden sonra Lighthouse testi çalıştırın. Lighthouse CI ile otomatik izleme kurun.

Sonuç

Web sitesi resim optimizasyonu; performans, SEO ve kullanıcı deneyimi açısından yapabileceğiniz en yüksek etkili iyileştirmelerden biridir. Doğru sıkıştırma ve uygulama, sayfa yükleme sürelerini %40-80 azaltabilir, Core Web Vitals skorlarını çarpıcı biçimde iyileştirebilir ve arama sıralamanızı yükseltebilir.

Özetle:

Resimleri sıkıştırın — %60-80 dosya boyutu azalması için %75-85 kalite
Modern formatları kullanın (WebP, AVIF) — JPEG/PNG yedekleriyle birlikte
Duyarlı resimleri uygulayın — mobil optimizasyonu için srcset ile
Tembel yükleyin — ekranın altında kalan tüm resimleri
Boyutları her zaman belirtin — düzen kaymasını önlemek için
LCP resmini ön yükleyin (genellikle kapak resmi)
CDN kullanın — küresel ve hızlı dağıtım için
Core Web Vitals'ı izleyin ve performans bütçeleri belirleyin
Hedefiniz: kapak resimlerinde < 200 KB, içerik resimlerinde < 100 KB

Web sitenizin resimlerini optimize etmeye hazır mısınız? Anında profesyonel sonuçlar için ücretsiz resim sıkıştırıcımızı deneyin.

İlgili rehberler:

JPEG Resimleri Sıkıştırma - JPEG optimizasyon teknikleri
PNG Resimleri Sıkıştırma - PNG sıkıştırma rehberi
Resimleri Toplu Sıkıştırma - Birden çok resmi işleyin
Resim 1 MB'a Sıkıştırma - Belirli boyutları hedefleyin

Web Sitesi İçin Resimler Nasıl Sıkıştırılır: Eksiksiz 2025 Rehberi

Web Sitesi Resim Optimizasyonu Neden Önemli

Sayfa Yükleme Hızı ve Kullanıcı Deneyimi

SEO ve Google Sıralaması

Core Web Vitals Üzerindeki Etki

Maliyet Tasarrufu

Web Siteleri İçin İdeal Resim Özellikleri

Site Bölümüne Göre Resim Boyutları

Sayfa Türüne Göre Dosya Boyutu Hedefleri

Web Sitesi İçin Resimler Adım Adım Nasıl Sıkıştırılır

Adım 1: Doğru Formatı Seçin

Adım 2: Resimleri Görüntüleme Boyutuna Küçültün

Adım 3: İdeal Kalite Ayarlarıyla Sıkıştırın

Adım 4: Duyarlı Resimleri Uygulayın

Adım 5: Modern Formatları Yedekleriyle Birlikte Kullanın

İleri Düzey Web Sitesi Resim Optimizasyonu Teknikleri

Resimlerde Tembel Yükleme

Web İçin Progresif JPEG

Simgeler İçin Resim Sprite'ları

Kritik Resimler ve Ön Yükleme

Resim Dağıtımı İçin CDN

Platforma Özel Optimizasyon

WordPress Resim Optimizasyonu

Shopify / E-ticaret Optimizasyonu

Statik Site Üreticileri (Next.js, Gatsby)

Resim Performansını İzleme ve Test Etme

Performans Testi Araçları

Core Web Vitals Optimizasyonu

Performans Bütçeleri Belirleme

Yaygın Web Sitesi Resim Sorunları ve Çözümleri

Sorun: Yüksek Düzen Kayması (CLS)

Sorun: Yavaş LCP (Largest Contentful Paint)

Sorun: Resimler Retina Ekranlarda Pikselli Görünüyor

Sorun: Site Genelinde Resim Kalitesi Farklı

Sorun: Eski Tarayıcılar WebP/AVIF Desteklemiyor

En İyi Uygulamalar Kontrol Listesi

Yüklemeden Önce

HTML Uygulaması

Performans Optimizasyonu

Sıkça Sorulan Sorular

Sonuç

Ready to Compress Your Images?

Related Articles

Tek Bir Fotoğraftan Yapay Zeka Videosu Nasıl Yapılır (2026 Rehberi)

Video, Ses ve Resim Dosyalarını Online Dönüştürme (2026 Rehberi)

Sesinizi Klonlayın ve İçeriğinizi Her Dile Yerelleştirin (2026 Rehberi)