Web sitesi için görseller nasıl sıkıştırılır

Optimize edilmemiş tek bir fotoğraf, sayfanın geri kalanından daha ağır olabilir. Görselleri düzeltmek en ucuz performans kazanımıdır ve Google'ın sıralama yaparken baktığı Core Web Vitals metriklerinden biri olan Largest Contentful Paint'i doğrudan etkiler.

1. Gerçekten gösterdiğiniz boyuta küçültün

1200 px genişliğinde gösterilen bir hero görsel 4000 px'e ihtiyaç duymaz. Resim boyutlandır'ı açın, genişliği ayarlayın (retina ekranlarda tam genişlik görseller için 1600 px güvenli bir üst sınır, içerik görselleri için 800 px yeterli) ve tüm klasörü tek seferde işleyin.

2. Doğru formatı seçin

• Fotoğraflar → WebP (çok eski tarayıcıları desteklemeniz gerekiyorsa JPG). WebP, aynı kalitede JPG'den %25-35 daha küçüktür ve güncel her tarayıcı açabilir.
• Logolar, ikonlar, düz renkli ekran görüntüleri → PNG, ardından renk paletini azaltın. Fotoğrafları PNG olarak tutmak hatadır: boşuna beş-on kat daha büyük dosya elde edersiniz.
• İkonlar ve basit illüstrasyonlar → SVG, vektör versiyonu elinizdeyse her zaman.

3. Sıkıştırın

• Fotoğraflar için JPG'den WebP'ye dönüştürmede %80-85 kalite yeterli.
• PNG sıkıştırma — palet azaltma, pngquant'taki mantığın aynısı — düz grafikleri gözle görülür bir kalite kaybı olmadan %50-70 küçültür ve saydamlığı korur.
• JPG'de kalmak istiyorsanız JPG sıkıştırma'yı %75-80 seviyesinde kullanın.

4. Doğru şekilde sunun

Her <img> etiketine width ve height ekleyin, böylece tarayıcı yeri önceden ayırır (layout kayması olmaz); ekranın altında kalan görselleri loading="lazy" ile geç yükleyin ve isterseniz srcset kullanarak bir adım daha ileri gidin. Yukarıdaki sıkıştırma adımları çoğu sitenin atladığı, ama en çok fark yaratan kısımdır.