İçeriğe atla

Görsel

Web İçin Görsel Optimizasyonu: Sıkıştırma, Boyutlandırma ve Format Seçimi

9 dk okuma

Neredeyse her web sayfasının en ağır öğesi görsellerdir. Kamera çıktısı 8 MB'lık optimize edilmemiş bir JPEG, yükleme sürenize saniyeler ekler. Görsel optimizasyonu, çoğu site için en yüksek etkili performans kazancıdır. Bu rehber, kontrol ettiğiniz üç kolu — sıkıştırma, boyutlandırma ve format — birlikte nasıl kullanacağınızı anlatır.

Boyut neden önemlidir?

Görseller yüklenen verinin yarısından fazlasını oluşturur. Büyük görseller ilk görüntüleme (first paint) süresini geciktirir, mobil veri tüketir ve arama sıralamanızı olumsuz etkiler. Google'ın ölçtüğü Core Web Vitals metrikleri, doğru boyutlandırılmış ve sıkıştırılmış görselleri ödüllendirir.

Sıkıştırma: kalite ve dosya boyutu dengesi

  • Kayıplı sıkıştırma (JPEG, WebP): bazı görsel ayrıntıları kalıcı olarak atar. JPEG için ideal kalite genellikle 70 ile 85 arasındadır.
  • Kayıpsız sıkıştırma (PNG, WebP lossless): her pikseli birebir korur; ekran görüntüleri, diyagramlar ve metin içeren görseller için idealdir.

Modern bir iş akışında fotoğraflar yüksek oranda sıkıştırılmış WebP'ye (veya uyumluluk için JPEG'e) dönüştürülür; keskin metin ve şeffaflık gerektiren görseller PNG olarak kalır. Tarayıcıda sıkıştırma yaptığınızda işlem yerel olarak çalışır, orijinal asla cihazınızdan çıkmaz.

Doğru formatı seçmek

Hızlı format seçimi

Fotoğraflar → WebP veya JPEG (kalite 75–85). Ekran görüntüsü, metin, logo → PNG veya kayıpsız WebP. Genel web öğeleri → WebP — eşit kalitede JPEG'den %25–35 daha küçük.

Uygulanabilir beş adımlı zincir

  1. Boyutlandır: en geniş ekran boyutunuza göre ayarlayın (ör. 1920px).
  2. Format seç: fotoğraf için WebP, metinli grafik için PNG.
  3. Sıkıştır: kalite 80'den başlayarak en küçük kabul edilebilir boyutu bulun.
  4. Önizle: sonucu orijinalle yan yana karşılaştırın.
  5. Dışa aktar: web formatına kaydedin.

Convrs ile görsel optimizasyonu

Convrs, tam olarak bu iş akışını izleyen tarayıcı tabanlı görsel araçları sunar: görsel sıkıştırıcı, görsel yeniden boyutlandırıcı, JPG → WebP ve WebP → PNG dönüştürücü. Tüm işlemler WebAssembly ile tarayıcınızda çalışır; fotoğraflarınız asla cihazınızı terk etmez ve dosya sayısı sınırı yoktur.

Buy me a coffee