🗜️
← Rehberlere dön

Web için Görüntü Sıkıştırma En İyi Uygulamaları

· Etiketler: image-compression, best-practices, web-performance, quality-vs-size, seo

Web için Görüntü Sıkıştırma En İyi Uygulamaları

Görüntüler, tipik bir web sayfasındaki verilerin yarısından fazlasını oluşturur. Optimize edilmemiş her kilobayt, daha yavaş yükleme süreleri, daha yüksek hemen çıkma oranları ve daha düşük arama sıralamaları olarak size maliyet çıkarır. Bu kılavuz, profesyonel web geliştiricilerinin her ekran boyutunda keskin, hızlı yüklenen görüntüler sunmak için kullandığı en iyi uygulamaları kapsar.

1. Her Zaman Bir Ana Kopya Saklayın

Herhangi bir sıkıştırma uygulamadan önce, orijinal görüntünüzün sıkıştırılmamış bir ana kopyasını kaydedin. Bir ana kopya, size farklı kalite seviyelerini deneme ve daha sonra sıfırdan başlamadan yeniden sıkıştırma özgürlüğü verir. Ana kopyaları PNG veya TIFF gibi kayıpsız bir formatta saklayın, ardından üretim kullanımı için kopyaları sıkıştırın.

2. Kalite Ayarlarını Anlayın

Sıkıştırma kalitesi genellikle 0 (en kötü) ile 100 (en iyi) arasında bir ölçekte ölçülür. Optimum ayar, görüntü içeriğinize ve performans hedeflerinize bağlıdır.

JPEG kalite yönergeleri:

  • 80 ila 85: Çoğu web fotoğrafı için mükemmel. Yapay bozulmalar neredeyse fark edilemez.
  • 60 ila 75: Küçük resimler ve arka plan görüntüleri için iyi. Bazı sıkıştırma yapay bozulmaları ortaya çıkar.
  • 60'ın altı: Belirgin bloklanma ve bantlaşma. Yalnızca dosya boyutu mutlak öncelik olduğunda kullanın.

WebP kalite yönergeleri:

  • 75 ila 85: JPEG kalitesini yaklaşık %25 ila %35 daha küçük dosya boyutlarında eşleştirir.
  • Kayıpsız WebP: Piksel mükemmel çıktının önemli olduğu grafikler ve ekran görüntüleri için idealdir.

PNG sıkıştırma:

  • PNG yalnızca kayıpsız sıkıştırma kullanır. Bit derinliği azaltma (32 bitten 8 bit renge dönüştürme), düz renkli grafikler için görünür kalite kaybı olmadan PNG'leri küçültmenin en etkili yoludur.

AVIF kalite yönergeleri:

  • 50 ila 70: Karşılaştırılabilir görsel kalitede JPEG'den %50'ye kadar daha küçük dosyalar üretir.
  • Daha yüksek kodlama karmaşıklığı daha yavaş sıkıştırma anlamına gelir, ancak dosya boyutundaki kazanç önemlidir.

3. Sıkıştırmayı Görüntü İçeriğine Göre Eşleştirin

Her görüntü sıkıştırmaya aynı şekilde yanıt vermez. Yaklaşımınızı içerik türüne göre uyarlayın:

  • Fotoğraflar: Kayıplı sıkıştırma (JPEG, WebP, AVIF) en iyi sonucu verir. Kalite 80'den başlayın ve kabul edilebilir eşiği bulana kadar aşağı doğru ayarlayın.
  • Ekran görüntüleri ve UI maketleri: Kayıpsız sıkıştırma (PNG, kayıpsız WebP) keskin metin ve net kenarları korur. Bu görüntüler, çok verimli sıkışan geniş tekdüze alanlar içerir.
  • Logolar ve simgeler: Kayıpsız formatlar vektör benzeri keskinliği korur. Orijinal az renk içeriyorsa, azaltılmış renk derinliğine sahip PNG son derece küçük olabilir.
  • Ürün fotoğrafları: Kalite 75 ila 85 ideal noktadır. Orijinal ile arasındaki görsel fark neredeyse görünmezdir, ancak dosya boyutu tasarrufları dramatiktir.

4. Gizli Meta Verileri Kaldırın

Dijital kameralar ve tasarım yazılımları, EXIF verileri adı verilen meta verileri görüntü dosyalarına gömer. Bu, kamera modeli, GPS koordinatları, zaman damgaları ve renk profili bilgilerini içerebilir. Meta verileri kaldırmak, sıfır görsel etki ile dosya boyutunu %5 ila %15 oranında azaltabilir.

Çoğu sıkıştırma aracı, meta verileri otomatik olarak kaldırma seçeneği sunar. Telif hakkı veya renk profili bilgilerini korumak için belirli bir nedeniniz olmadığı sürece bu seçeneği etkinleştirin.

5. Orijinal Formatta Sıkıştırın

Modern görüntü sıkıştırıcıları, görüntüleri orijinal formatlarını koruyarak optimize etmenize olanak tanır. Bu önemli bir yetenektir çünkü format dönüştürme genellikle gereksizdir ve bazen istenmeyen sonuçlar doğurur:

  • PNG, PNG olarak kalır: Kayıpsız sıkıştırma saydamlığı ve keskin kenarları korur.
  • JPEG, JPEG olarak kalır: Optimize edilmiş Huffman tabloları ve niceleme, yeniden kodlama kayıpları olmadan daha küçük dosyalar sunar.
  • WebP, WebP olarak kalır: Hem kayıplı hem kayıpsız WebP, meta veri kaldırma ve optimize edilmiş kodlama parametrelerinden faydalanır.
  • AVIF, AVIF olarak kalır: Gelişmiş sıkıştırma ayarı, zaten verimli olan AVIF dosyalarını daha da küçültebilir.

Yerinde sıkıştırma, bir format dönüştürme zinciri yoluyla kaliteyi asla düşürmediğiniz ve iş akışınızın basit kaldığı anlamına gelir.

6. Sıkıştırma İş Akışınızı Otomatikleştirin

Manuel sıkıştırma, bir avuç görüntünün ötesinde ölçeklenemez. Üretim web siteleri için, sıkıştırmayı derleme hattınıza entegre edin:

  • Derleme zamanı eklentileri: Sharp, Squoosh CLI ve imagemin gibi araçlar derleme adımınız sırasında çalışabilir.
  • CMS otomasyonu: Birçok içerik yönetim sistemi, yükleme sırasında görüntüleri sıkıştıran eklentiler sunar.
  • CI/CD entegrasyonu: Dağıtım hattınıza bir sıkıştırma adımı ekleyin, böylece her görüntü yayına girmeden önce otomatik olarak optimize edilir.

7. Küçük Resimleri Daha Agresif Sıkıştırın

Küçük resimler ve önizleme görüntüleri küçük boyutlarda görüntülenir, bu nedenle sıkıştırma yapay bozulmaları çok daha az fark edilir. Daha düşük kalite ayarları uygulayın:

  • JPEG küçük resimler: Kalite 50 ila 60
  • WebP küçük resimler: Kalite 50 ila 70
  • PNG küçük resimler: Görüntü izin veriyorsa 8 bit renge düşürün

8. Sıkıştırmayı Geç Yükleme ile Birleştirin

Sıkıştırma her görüntünün boyutunu azaltır, ancak geç yükleme (lazy loading) görüntülerin yalnızca görüntü alanına girdiklerinde indirilmesini sağlar. Bu kombinasyon, mevcut en yüksek etkili performans optimizasyonlarından biridir. img etiketlerinize loading="lazy" ekleyin ve gerisini tarayıcının halletmesine izin verin.

9. Gerçek Dünya Metrikleriyle Test Edin

Görsel tahmin güvenilir değildir. Sıkıştırma seçimlerinizin etkisini ölçmek için nesnel araçlar kullanın:

  • Lighthouse, görüntü optimizasyonu fırsatlarını raporlar ve potansiyel tasarrufları tahmin eder.
  • PageSpeed Insights, görüntü ağırlığının Core Web Vitals puanlarınızı nasıl etkilediğini gösterir.
  • WebPageTest, ilk bayta kadar geçen süre ve indirme süresi dahil olmak üzere her görüntü isteğinin bir şelale grafiğini sağlar.
  • Squoosh, bir ayara karar vermeden önce sıkıştırılmış çıktıyı orijinal ile yan yana önizlemenizi sağlar.

Hepsini Bir Araya Getirme

Modern bir görüntü optimizasyonu iş akışı şöyle görünür:

  1. Sıkıştırılmamış bir ana kopya kaydedin.
  2. Sıkıştırma sırasında meta verileri kaldırın.
  3. Orijinal formatta sıkıştırın — gereksiz dönüştürme yapmayın.
  4. Farklı görüntü alanları için uygun boyutlandırılmış sürümler sunun.
  5. Kritik olmayan görüntülerde geç yüklemeyi etkinleştirin.
  6. Performansı ölçün ve yineleyin.

Ücretsiz çevrimiçi görüntü sıkıştırıcımızla bu en iyi uygulamaları bugün uygulamaya başlayın. Görüntülerinizi yükleyin ve saniyeler içinde optimize edilmiş sürümleri indirin — tüm bunları orijinal formatınızı koruyarak yapın.