Büyük görseller, sayfaların yavaş yüklenmesinin bir numaralı nedenidir. Çözüm neredeyse her zaman iki adımdır: görseli doğru boyutlara getirin, sonra kalanı sıkıştırın. İkisini de yapın ve 4 MB'lık bir fotoğraf, ekranda birebir aynı görünen 150 KB'lık bir fotoğraf olsun.
Buna gerçek sayılar koyalım.
Hedeflenecek boyutlar
Tahmin etmenize gerek yok. İşte sayfaları hızlı tutan pratik ağırlık bütçeleri:
- Kahraman / tam genişlik afiş: 200 KB'nin altında, ideal olarak ~100–150 KB.
- Makale içi fotoğraf: her biri 80–150 KB.
- Küçük resim / avatar: 10–30 KB.
- Logo ya da ikon (PNG/SVG): 30 KB'nin altında; çoğu zaman çok daha az.
Ve boyutlar:
- Tam genişlik kahraman: çoğu düzen için 1600–2000 px genişlik fazlasıyla yeter (yalnızca Retina'yı hedefliyorsanız ve baytları göze alabiliyorsanız iki katına çıkarın).
- Sütun içi fotoğraf: içerik genişliğinizle eşleştirin — çoğu zaman 800–1200 px.
- Küçük resim: gerçekte görüntülendiği boyut, örn. 300–400 px.
Bir sayfadaki tek bir görsel ~300 KB'nin üzerindeyse, bu genellikle düzeltmeye değer bir hatadır.
1. Adım: Gerçek görüntülenme genişliğine yeniden boyutlandırın
İnsanların atladığı adım budur ve en büyük koldur. Bir telefondan çıkan bir fotoğraf çoğu zaman 4000+ piksel genişliğindedir. 800 piksellik bir sütunda görüntüleniyorsa, ekranın gösterdiğinden 25 kat fazla piksel gönderiyorsunuz — ve piksel sayısı, dosya boyutunu her şeyden çok belirler.
Görseli, gerçekte göründüğü genişliğe getirmek için Görsel Yeniden Boyutlandırıcı aracını kullanın. Piksel ya da yüzdeyle yeniden boyutlandırın, en-boy oranını kilitli tutun ve yüksek kaliteli küçültücü kenarları temiz tutsun.
Tek başına doğru boyutlandırma, tek bir bayt bile sıkıştırmadan önce dosya boyutunu çoğu zaman %80–90 keser.
2. Adım: Kalanı sıkıştırın
Şimdi o doğru boyutların içindeki veriyi küçültün.
- Fotoğraflar (JPG/WebP): kalite kaydırıcısını 75–85'e ayarlayın. Bu, çoğu görsel için görsel olarak kayıpsızdır ve boyutu sertçe keser.
- PNG'ler (ekran görüntüleri, grafikler): Görsel Sıkıştırıcı onları 256 renkli bir palete indirger, genellikle görünür bir değişiklik olmadan %60–80 tasarruf sağlar ve şeffaflığı korur.
Sıkıştırıcı ayrıca çıktıyı orijinal boyutta sınırlar — asla daha büyük bir şey geri vermez — ve isteğe bağlı bir genişlik sınırı vardır, böylece iki adımı da tek geçişte yapabilirsiniz: sınırı hedef genişliğinize ayarlayın ve bir kerede sıkıştırın. Bütün bir klasörü toplu işleyin ve bir ZIP olarak indirin.
Hazır oradayken doğru formatı seçin
Görselleriniz modern tarayıcılara sunulacaksa, fotoğrafları WebP'ye dönüştürmek aynı kalitede genellikle JPEG'i bir %25–35 daha geçer. Düz grafikler PNG (ya da WebP) olarak kalır. Fotoğrafları PNG olarak kaydetmeyin — bu klasik şişme hatasıdır, kolaylıkla 5–10× ceza.
Gerçekçi bir iş akışı
Beş fotoğraflı bir blog yazısı için:
- Her birini sütun genişliğinize (diyelim 1200 px) yeniden boyutlandırın.
- 80 kalitede sıkıştırın ya da WebP'ye dönüştürün.
- Her birinin ~150 KB'nin altına indiğini teyit edin.
- Kalitenin korunduğundan emin olmak için bir görselin %100 kırpımını kontrol edin.
Toplamda 20 MB olarak başlayan beş fotoğraf 600 KB civarına iner — takılmak yerine göz açıp kapayıncaya kadar yüklenen bir sayfa.
Özel ve çevrimdışı
Yukarıdaki her şey Canvas ve WebAssembly kullanarak tamamen tarayıcınızda çalışır. Hiçbir görsel bir sunucuya yüklenmez ve ilk ziyaretinizden sonra araçlar önbelleğe alınır ve çevrimdışı çalışır. Bütün bir yazı dolusu görseli bağlantı olmadan ve hiçbir şey makinenizden ayrılmadan optimize edebilirsiniz.