Görsel sıkıştırma ve WebP dönüştürme

Görsel sıkıştırma nedir ve site hızı için neden önemlidir

Görsel sıkıştırma, dosya boyutunu küçültürken gözün görseli yine de olması gerektiği gibi görmesini sağlayan işlemdir. İki türü vardır: verilerin yalnızca daha akıllıca paketlendiği kayıpsız (lossless) ve insan gözünün en zor fark ettiği ayrıntıların atıldığı kayıplı (lossy). Sitedeki fotoğraflar için neredeyse her zaman kayıplı sıkıştırma daha iyidir, çünkü çok daha küçük bir dosya elde edilir ve farkı nadiren biri fark eder.

Büyük görsel, yavaş sitenin en yaygın sebebidir. 4 MB'lık bir hero görseli, özellikle mobil internette içeriğin görüntülenmesini birkaç saniye geciktirebilir. Google bunu Core Web Vitals ile, öncelikle LCP (Largest Contentful Paint) üzerinden ölçer ve bu veri hem arama sıralamasını hem de ziyaretçinin sayfayı görmek için bekleyip beklemeyeceğini etkiler.

Sıkıştırma araçları iki şekilde çalışır: görselin boyutlarını (piksel cinsinden genişlik ve yükseklik) küçültür ve kayıt kalitesini düşürür. İkisi de gereklidir. 800 px'te görüntülenen 4000 px genişliğindeki bir görsel, ne kadar iyi sıkıştırılmış olursa olsun saf kayıptır.

Site için görselleri kalite kaybı olmadan nasıl sıkıştırırsınız

İşlem basittir ve araç bilgisi gerektirmez:

1. Görselin görüntülendiği yere uygun genişliği seçin. Büyük banner görselleri için 1920 px'e kadar, metin içindeki görseller için 800 ila 1200 px, küçük resimler için 300 ila 600 px.
2. Kaliteyi yaklaşık yüzde 80'e ayarlayın. Tasarrufun büyük olduğu ve farkın görülmediği nokta burasıdır.
3. Formatı seçin: geniş destek için WebP, en küçük dosyayı istediğinizde AVIF.
4. Dosyayı indirin ve yüzde 100 yakınlaştırmada orijinaliyle karşılaştırın, özellikle metin ve keskin kenarlı bölümlerde.

Pratik bir ipucu: görselde çok fazla metin, ince çizgi veya logo varsa kaliteyi daha dikkatli düşürün ya da kayıpsız sıkıştırma kullanın. Doğal ayrıntılara sahip fotoğraflar, görünür artefaktlar olmadan daha agresif sıkıştırmayı kaldırır.

WebP mi AVIF mi: hangi format seçilmeli

WebP bugün güvenli bir seçimdir. Tüm modern tarayıcılar tarafından desteklenir, aynı görsel kalitede JPEG'den küçüktür ve saydamlığı destekler. AVIF bir adım daha ileri gider ve genellikle daha da küçük bir dosya verir, ancak bazı eski cihazlarda ve tarayıcılarda görüntülenmeyebilir veya daha yavaş çözülebilir.

Pratik kural: WebP'yi temel format olarak kullanın, AVIF'i ise sayfa ağırlığının en küçük olmasının öncelik olduğu ve fallback'iniz olduğu yerlerde kullanın. Uyumluluk hakkında düşünmek istemiyorsanız, WebP sitelerin büyük çoğunluğu için yeterlidir.

Uzman ipucu: zaten sıkıştırılmış WebP'yi AVIF'e ve sonra geri dönüştürmeyin. Kayıplı her yeni dönüşüm artefakt ekler. Her zaman orijinalden veya saklanan en kaliteli dosyadan başlayın.

Görsel sıkıştırmada en yaygın hatalar

• Boyutları küçültmeden önce kaliteyi düşürmek. Önce görseli gereken genişliğe ölçekleyin, sonra sıkıştırın. Ters sıra daha kötü sonuç verir.
• Tüm görseller için aynı kalite. Portreler ve ürünler, arka plan görselleri ve illüstrasyonlardan daha fazla ayrıntı gerektirir.
• Unutulan srcset. Tüm ekranlar için tek büyük görsel isabetsizliktir. Birden fazla genişlik sunun ve tarayıcı seçsin.
• Logonun kayıplı formatta sıkıştırılması. Keskin kenarlı grafikler için SVG veya PNG daha iyidir.
• Önbellek ve CDN'in ihmal edilmesi. En iyi sıkıştırma, görsel sayfa her açıldığında yeniden indiriliyorsa işe yaramaz.

Uzman ipucu: sonucu yalnızca gözle değil, performans ölçüm aracında da kontrol edin. Bazen görsel iyi görünür ama boyutu çok büyük kaldığı için hâlâ ağırdır.

Yüzlerce veya binlerce görseliniz varsa, manuel sıkıştırma yorucu hale gelir. O zaman build süreci veya CMS içindeki otomasyon yardımcı olur ve sorun tek bir araçtan büyük olduğunda EVI Solutions yardımcı olabilir.