🗜️
← Rehberlere dön

Web Performansı İçin Görüntüler Nasıl Optimize Edilir

· Etiketler: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

Web Performansı İçin Görüntüler Nasıl Optimize Edilir

Görüntüler, tipik bir web sayfasının indirilen toplam baytlarının yüzde 50 ila 60'ını temsil eder. Optimize edilmemiş her görüntü, yükleme sürenize saniyeler ekler, hemen çıkma oranınızı artırır ve arama motoru sıralamanıza zarar verir. Google'ın Core Web Vitals'ı — özellikle Largest Contentful Paint (LCP) — görüntü yükleme performansını doğrudan ölçer ve görüntü optimizasyonunu web sitenizde yapabileceğiniz en yüksek etkili değişikliklerden biri haline getirir.

Bu kılavuz, sıkıştırma temellerinden gelişmiş dağıtım tekniklerine kadar eksiksiz bir görüntü optimizasyonu stratejisini kapsar.

1. Yayınlamadan Önce Her Görüntüyü Sıkıştırın

Kameranızdan, telefonunuzdan veya tasarım aracınızdan doğrudan ham bir görüntüyü asla yüklemeyin. Sıkıştırma, yayınlama iş akışınızın ilk adımı olmalıdır.

Temel prensipler:

  • Fotoğraflar agresif kayıplı sıkıştırmayı tolere eder. JPEG ve WebP için kalite 80'den başlayın, ardından dosya boyutu hedefleri gerektiriyorsa aşağı doğru ayarlayın.
  • Ekran görüntüleri, logolar ve grafikler kayıpsız sıkıştırmadan faydalanır. PNG ve kayıpsız WebP, kayıplı sıkıştırmanın bulanıklaştıracağı keskin kenarları ve metni korur.
  • AVIF en iyi sıkıştırma oranlarını sunar ancak daha fazla kodlama süresi gerektirir. Sık indirilen ve nadiren güncellenen görüntüler için kullanın.
  • Gereksiz format dönüşümlerinden kaynaklanan nesil kaybını önlemek için orijinal formatta sıkıştırın.

Beklenen tasarruf:

Yüklemeden önce görüntüleri sıkıştıran tipik bir iş akışı, minimum algılanabilir kalite kaybıyla toplam görüntü ağırlığını yüzde 40 ila 80 oranında azaltır.

2. Doğru Boyutları Sunun

4000 piksel genişliğinde bir fotoğrafı 300 piksel genişliğinde bir kapsayıcı içinde sunmak, web'deki en yaygın performans hatasıdır. Tarayıcı tüm 4000 pikseli indirir ve ardından küçültür, bant genişliğini ve belleği boşa harcar.

Birden fazla boyut varyantı oluşturun:

  • Mobil ekranlar için 320 ila 480 piksel genişliğinde
  • Tabletler için 768 ila 1024 piksel genişliğinde
  • Masaüstü ekranlar için 1200 ila 1920 piksel genişliğinde
  • Yüksek yoğunluklu retina ekranlar için 2560 piksel genişliğinde (2x)

En büyük varyantı, görüntünün düzeninizde görüntüleneceği maksimum genişliğe, yüksek DPI ekranlar için 2 ile çarparak eşleştirin.

3. Srcset ile Duyarlı Görüntüler Kullanın

HTML'deki srcset ve sizes nitelikleri, tarayıcıya kullanıcının görüntü alanı genişliğine ve cihaz piksel oranına göre hangi görüntü boyutunu indireceğini söyler.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Erişilebilirlik ve SEO için açıklayıcı metin"
/>

Bu tek desen, herhangi bir görünür kalite farkı olmadan mobil cihazlarda görüntü bant genişliğini yüzde 40 ila 60 oranında azaltabilir.

4. Largest Contentful Paint (LCP) için Optimize Edin

LCP, en büyük görünür öğenin — genellikle hero görüntüsü — oluşturulması için geçen süreyi ölçer. Google, 2,5 saniye veya daha az bir LCP'yi iyi olarak kabul eder.

Görüntüler için LCP'yi optimize etmek için:

  • Tarayıcının erken keşfetmesi için hero görüntüsünü önceden yükleyin. Belge başlığınıza <link rel="preload" as="image" href="hero.webp"> ekleyin.
  • Hero görüntüsünü agresif bir şekilde sıkıştırın — genellikle tarayıcının indirdiği ilk ve en büyük varlıktır.
  • Hero görüntüsü için JPEG yedeği ile WebP veya AVIF sunun.
  • Hero görüntüsünü doğru boyutlandırın. 1200 piksellik bir hero alanında 4000 piksellik bir görüntü sunmayın.
  • Hero görüntüsünü veya ekranın üst kısmındaki herhangi bir görüntüyü lazy load yapmayın. Lazy loading, indirmeyi geciktirir ve bu da LCP'ye zarar verir.

5. Ekran Altı Görüntüler için Lazy Loading'i Etkinleştirin

İlk ekranda görünmeyen görüntülerin hemen yüklenmesi gerekmez. loading="lazy" niteliği, tarayıcıya görüntü yüklemesini, görüntü görüntü alanına girmeye yaklaşana kadar ertelemesini söyler.

<img src="gallery-photo.jpg" loading="lazy" alt="Galeri görüntüsü" />

Lazy loading, görüntü ağırlıklı sayfalarda ilk sayfa ağırlığını yüzde 30 ila 50 oranında azaltır. Sıkıştırma ile birleştirildiğinde etki dönüştürücüdür.

6. Görüntü Meta Verilerini Kaldırın

EXIF verileri — kamera ayarları, GPS koordinatları, zaman damgaları — her görüntüye gereksiz baytlar ekler. Meta verileri temizlemek, sıfır görsel değişiklikle dosya boyutunun tipik olarak yüzde 5 ila 15'ini kurtarır. Meta veri kaldırmayı sıkıştırma iş akışınızda standart bir adım haline getirin.

7. İçerik Dağıtım Ağı (CDN) Kullanın

Bir CDN, görüntülerinizi dünya çapındaki sunuculara dağıtarak kullanıcı ile görüntü arasındaki fiziksel mesafeyi azaltır. Bu, görüntü istekleri için İlk Bayta Kadar Geçen Süreyi iyileştirir.

Bazı CDN'ler ayrıca anında görüntü dönüşümü de sunar:

  • Otomatik format müzakeresi (desteklendiğinde WebP veya AVIF sunar)
  • Cihaz ve görüntü alanına göre dinamik yeniden boyutlandırma
  • Gerçek zamanlı sıkıştırma ayarlamaları

Özel bir CDN mümkün değilse, en azından tek bir bağlantıda birden fazla görüntü indirmeye izin vermek için HTTP/2 veya HTTP/3 kullanın.

8. Görüntü Kod Çözme Performansını Dikkate Alın

Büyük görüntüler yalnızca indirme süresi almakla kalmaz, aynı zamanda kod çözme süresi de alır. Tarayıcı, JPEG, PNG, WebP veya AVIF verilerini oluşturmadan önce sıkıştırmayı açmalıdır. JPEG ve WebP çoğu cihazda hızlı bir şekilde kod çözülürken, AVIF kod çözme işlemi hesaplama açısından daha maliyetlidir — düşük seviye mobil cihazlar için dikkate alınması gereken bir husustur.

Kritik olmayan görüntülerde, tarayıcının diğer içeriği engellemeden kod çözmesine izin vermek için decoding="async" niteliğini kullanın:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Açıklama" />

Optimizasyon İş Akışınızı Oluşturma

Uçtan uca bir görüntü optimizasyonu hattı şöyle görünür:

  1. Görüntüleri, kaliteye uygun bir araç kullanarak orijinal formatlarında sıkıştırın.
  2. Sıkıştırma sırasında meta verileri temizleyin.
  3. Gerekli görüntüleme boyutlarına yeniden boyutlandırın, birden fazla varyant oluşturun.
  4. HTML şablonlarınızda srcset ve sizes uygulayın.
  5. Hero görüntüsünü önceden yükleyin, ekranın altındaki her şeyi lazy load yapın.
  6. Küresel performans için bir CDN'den sunun.
  7. Lighthouse veya PageSpeed Insights kullanarak LCP'yi ve toplam görüntü ağırlığını ölçün.
  8. Performans bütçenizi karşılayana kadar kalite ayarlarını yineleyin.

Ücretsiz çevrimiçi görüntü sıkıştırıcımızla bugün görüntülerinizi optimize etmeye başlayın. PNG, JPEG, WebP veya AVIF formatında görüntüler yükleyin ve üretime hazır sıkıştırılmış sürümleri indirin — format dönüşümü yok, kalite tavizleri yok.