Web Sitesi Görsellerini Kaliteden Ödün Vermeden Küçültmek

Çoğu web sayfasında toplam verinin en büyük kısmını görseller oluşturur. Yani yavaş bir sayfayı hızlandırmanın en kolay yolu çoğunlukla sunucuyu değil, görselleri düzeltmektir.

1. Görseli gösterileceği boyutta yükleyin

Telefonla çekilmiş 4000 piksel genişliğinde bir fotoğrafı, sayfada 800 piksel genişliğinde gösterilecek bir alana yüklemek, ziyaretçiye gereksiz yere birkaç megabayt indirtmek demektir. Yüklemeden önce görseli kullanılacağı en büyük genişliğe göre küçültün. Yüksek çözünürlüklü ekranlar için gösterim genişliğinin iki katı genellikle yeterlidir.

WordPress, yüklediğiniz görselin farklı boyutlarını otomatik üretir ve tarayıcının ekrana uygun olanı seçmesi için srcset özniteliğini ekler. Yine de orijinal dosyanın aşırı büyük olmaması disk alanınızı ve inode kullanımınızı korur.

2. Doğru formatı seçin

• WebP: Tüm güncel tarayıcılarda desteklenir ve aynı görsel kalitede JPEG'e göre genellikle daha küçük dosya üretir.
• AVIF: Çoğu durumda WebP'den de küçük dosyalar üretir; güncel tarayıcıların büyük kısmı destekler.
• SVG: Logo ve simgeler için idealdir; her boyutta keskin görünür. Dışarıdan gelen SVG dosyalarına dikkat edin, çünkü kod içerebilirler.
• PNG: Yalnızca saydamlık gereken ve az renkli görseller için. Fotoğraf için kullanmayın.

3. Sıkıştırma kalitesini ayarlayın

Fotoğraflarda %75–85 civarındaki kalite ayarı, gözle fark edilmeyen bir kayıpla dosya boyutunu belirgin biçimde düşürür. Kendi görsellerinizde birkaç farklı ayarı deneyip karşılaştırmak en doğru sonucu verir.

4. Lazy load'ı doğru kullanın

loading="lazy" özniteliği, sayfanın aşağısındaki görsellerin ziyaretçi o bölüme yaklaşana kadar indirilmemesini sağlar. WordPress bunu çoğu görsele kendiliğinden ekler.

Önemli istisna: Sayfa açıldığında ilk görünen büyük görseli (genellikle kapak veya ürün görseli) lazy load yapmayın. Bu görsel çoğu zaman LCP öğesidir ve geç yüklenmesi sayfanın yavaş algılanmasına neden olur. Bu görsele fetchpriority="high" eklemek, tarayıcının onu öncelikli indirmesini sağlar.

5. Genişlik ve yükseklik belirtin

Görsellerin width ve height değerleri HTML'de yazılı olduğunda tarayıcı görsel gelmeden yerini ayırır. Bu, sayfa yüklenirken içeriğin aşağı kaymasını, yani CLS sorununu önler. Ayrıntılar Core Web Vitals rehberimizde.

Mevcut sitedeki görselleri toplu iyileştirmek

WordPress'te bir görsel optimizasyon eklentisi, var olan görselleri toplu olarak sıkıştırıp WebP sürümlerini oluşturabilir. LiteSpeed Cache eklentisinin görsel optimizasyonu da bu işi yapar; ancak bu özellik QUIC.cloud adlı harici bir hizmet üzerinden çalışır. İşleme başlamadan önce yedek alın ve orijinallerin saklanacağı ayarı açık bırakın.

Sonucu ölçün

Değişiklikten önce ve sonra tarayıcının geliştirici araçlarında sayfanın toplam boyutuna bakın. Daha küçük sayfalar hem ziyaretçiye daha hızlı ulaşır hem de aylık trafik kullanımınızı düşürür.