Çoğu web sayfasında en fazla veriyi görseller oluşturur. Telefonla çekilmiş birkaç megabaytlık bir fotoğraf, sayfanın açılışını saniyelerce geciktirebilir. İyi haber şu: görsel optimizasyonu, en hızlı sonuç veren hız iyileştirmelerinden biridir.
Doğru format
- WebP: Günümüz tarayıcılarının tamamına yakınında desteklenir; JPEG ve PNG'ye göre genellikle belirgin şekilde daha küçük dosyalar üretir.
- AVIF: Çoğu durumda WebP'den de iyi sıkıştırma sağlar; modern tarayıcılarda geniş destek bulunur.
- SVG: Logo, ikon ve çizimler için idealdir; her boyutta nettir.
- PNG: Şeffaflık gereken ve sıkıştırma kaybının istenmediği özel durumlar için.
Doğru boyut
Ekranda 600 piksel genişliğinde gösterilecek bir görseli 4000 piksel olarak yüklemek gereksizdir. srcset ve sizes özellikleri ile tarayıcı, ekrana uygun boyuttaki görseli seçer.
Tembel yükleme (lazy loading)
Sayfanın alt kısımlarındaki görseller loading="lazy" ile ancak ziyaretçi o bölüme yaklaştığında yüklenir. Ancak ilk ekranda görünen ana görsele lazy loading uygulanmamalıdır; bu, sayfanın en büyük içeriğinin geç görünmesine yol açar.
Genişlik ve yükseklik belirtin
width ve height değerleri verilen görseller için tarayıcı yer ayırır; böylece görsel yüklenince sayfa kaymaz.
Animasyonlar için video
Uzun animasyonlu GIF veya animasyonlu görseller çok büyük olabilir. Aynı içeriği kısa, sessiz bir video olarak sunmak dosya boyutunu çoğu zaman onda birine indirir.
Telif hakkını unutmayın
İnternette bulunan her görsel serbestçe kullanılamaz. Kendi çektiğiniz fotoğrafları, lisansını aldığınız stok görselleri veya kullanım şartları açıkça izin veren kaynakları tercih edin. Lisans koşullarını (atıf gerekip gerekmediği, ticari kullanım izni) kayıt altında tutun.
Kontrol listesi
- Fotoğrafları WebP veya AVIF'e dönüştürün.
- Görseli gösterileceği en büyük boyuta göre küçültün.
- Alt kısımdaki görsellere lazy loading ekleyin.
- Her görsele genişlik, yükseklik ve anlamlı bir alt metin verin.
- Görsellerin kullanım hakkını belgeleyin.
Sık sorulan sorular
Alt metin (alt) ne işe yarar?
Görme engelli kullanıcıların ekran okuyucularla görseli anlamasını sağlar ve arama motorlarına görselin içeriği hakkında bilgi verir. Süs amaçlı görsellerde boş bırakılabilir.
Sıkıştırma görsel kalitesini bozar mı?
Uygun ayarlarla gözle fark edilmeyecek kadar az kayıpla çok büyük boyut kazancı sağlanır.
Sonuç
Doğru format, doğru boyut ve doğru yükleme stratejisi; sayfalarınızı hissedilir şekilde hızlandırır. Daha fazlası için web sitesi hızlandırma rehberimize göz atabilirsiniz.