Görsel Sıkıştırma ve WebP Dönüştürücü

Bu araç tam olarak ne yapıyor?

Seçtiğiniz görseller tarayıcınızın belleğine alınır, bir canvas yüzeyine istediğiniz ölçekte çizilir ve seçtiğiniz formatta yeniden kodlanır. Ortaya çıkan dosya doğrudan indirilebilir hale gelir. Bu zincirin hiçbir adımında internet bağlantısı kullanılmaz; sayfayı açtıktan sonra çevrimdışı kalsanız bile araç çalışmaya devam eder.

Üç ayarı değiştirebilirsiniz:

• Çıktı formatı. WebP, JPEG ya da PNG. Varsayılan WebP'dir, çünkü aynı görüntü kalitesinde belirgin şekilde daha küçük dosya üretir.
• Kalite. Kayıplı formatlarda (WebP ve JPEG) sıkıştırma seviyesi. PNG kayıpsız olduğu için bu ayar PNG'de dikkate alınmaz.
• En fazla genişlik. Görsel bu değerden genişse orantılı olarak küçültülür. Yükseklik otomatik hesaplanır, görsel deforme olmaz.

Ayarlardan birini değiştirdiğinizde listedeki tüm dosyalar yeniden işlenir, böylece farklı kalite değerlerini karşılaştırıp en iyi dengeyi bulabilirsiniz.

Görsel boyutu neden bu kadar önemli?

Ortalama bir web sayfasının ağırlığının yarısından fazlasını görseller oluşturur. Bu, sayfa hızını doğrudan belirleyen kalemdir ve hız da hem kullanıcı davranışını hem arama sıralamasını etkiler.

Somut olarak üç yerde karşınıza çıkar:

• Largest Contentful Paint (LCP). Google'ın Core Web Vitals ölçütlerinden biridir ve çoğu sayfada LCP öğesi bir görseldir. Kapak görselini küçültmek, tek başına en büyük hız kazancını sağlayan müdahaledir.
• Mobil veri. Ziyaretçilerin çoğunluğu mobil bağlantı üzerinden gelir. 3 MB'lık bir kapak görseli yavaş bir bağlantıda saniyeler alır; bu süre boyunca ekran boş kalır.
• Tarama bütçesi. Ağır sayfalar arama motoru tarayıcılarını da yavaşlatır. Büyük sitelerde bu, yeni içeriğin indekslenme hızına yansır.

Sayfa hızındaki kaybın size TL cinsinden ne kadara mal olduğunu görmek isterseniz, Yavaş Site Maliyet Hesaplama aracı bu hesabı yapıyor.

WebP mi, JPEG mi, PNG mi?

Format seçimi görselin içeriğine göre değişir, tek doğru cevap yoktur:

• WebP. Fotoğraflarda JPEG'e göre ortalama yüzde 25-35, grafiklerde PNG'ye göre çok daha fazla tasarruf sağlar. Şeffaflığı destekler. Günümüzde tüm güncel tarayıcılarda çalışır ve varsayılan tercih olmalıdır.
• JPEG. Fotoğraf için hâlâ güvenli seçimdir. Şeffaflığı desteklemez. Çok eski cihazlara hitap eden bir kitleniz varsa ya da görseli e-posta bülteninde kullanacaksanız tercih edin; bazı e-posta istemcileri WebP göstermez.
• PNG. Kayıpsızdır, yani kaliteyi hiç düşürmez ama dosya büyük kalır. Yalnızca keskin kenarlı grafiklerde, ekran görüntülerinde ve şeffaf logolarda anlamlıdır. Fotoğrafı PNG olarak kaydetmek neredeyse her zaman israftır.

Bir uyarı: JPEG şeffaflığı desteklemediği için, şeffaf bir PNG'yi JPEG'e çevirdiğinizde şeffaf alanlar beyaza döner. Bu araç bunu sessizce yapmaz, beyaz zemin basar; koyu bir tasarımda logoyu bu şekilde dönüştürmeyin, WebP kullanın.

Kalite ve genişlik değerini nasıl seçmeli?

En sık yapılan hata, görseli olduğu ölçüde bırakıp yalnızca kaliteyi düşürmektir. Oysa ölçek küçültmek, kalite düşürmekten çok daha fazla kazandırır ve gözle fark edilme ihtimali çok daha düşüktür. 4000 piksel genişliğindeki bir fotoğrafın 1200 piksellik bir alanda gösterilmesinin hiçbir faydası yoktur; fazlalık sadece indirilen veridir.

Pratik bir başlangıç seti:

• Tam ekran kapak görselleri: 1920 piksel genişlik, kalite 75-80.
• İçerik ve blog görselleri: 1200 piksel genişlik, kalite 80.
• Ürün listesi kartları: 600-800 piksel genişlik, kalite 80.
• Küçük ikonlar ve avatarlar: 200-400 piksel genişlik, kalite 85.

Kaliteyi yüzde 60'ın altına indirmek çoğu fotoğrafta gözle görülür bozulma yaratır: düz renk geçişlerinde bantlaşma, keskin kenarlarda dalgalanma. Kazanç ise bu noktadan sonra hızla azalır. Yüzde 75 ile 85 arası, çoğu görsel için en iyi dengedir.

Sonuç listesinde kazanç oranı düşük çıkıyorsa, görsel muhtemelen zaten optimize edilmiştir. Bu durumda yeniden kodlamak fayda getirmez, hatta kaliteyi bir tur daha düşürür. Kazanç yüzde 5'in altındaysa orijinali kullanmaya devam edin.

Sıkıştırdıktan sonra ne yapmalısınız?

Dosya boyutunu küçültmek zincirin ilk halkasıdır. Sitede tam performansı almak için şu üç adım da gerekir:

• Doğru boyutu servis edin. srcset ve sizes özellikleriyle her ekran genişliğine ayrı bir dosya sunun. Mobil ziyaretçiye masaüstü kapak görselini göndermeyin.
• Ekran dışındaki görselleri geciktirin. loading="lazy" özelliği ilk ekranda görünmeyen görsellerin indirilmesini erteler. Ama kapak görseline lazy vermeyin; bu, LCP değerinizi kötüleştirir.
• Genişlik ve yükseklik verin. width ve height özellikleri olmadan sayfa yüklenirken içerik zıplar; bu, Cumulative Layout Shift puanınızı düşürür.

Görselleri yükledikten sonra sayfanızı PageSpeed Insights ile ölçün. Görsel kaynaklı uyarılar kaybolmuşsa doğru yoldasınız demektir. Kalan uyarılar genellikle yazı tipleri, üçüncü parti betikler ve sunucu yanıt süresiyle ilgilidir; bunlar ayrı bir çalışma konusudur.