İçindekiler
Bir web sayfasının toplam ağırlığının en büyük kısmını genellikle görseller oluşturur. Doğrudan telefondan veya kameradan yüklenen bir fotoğraf, ekranda küçük bir kutuda görünse bile ziyaretçiye megabaytlarca veri indirtir. Görsel optimizasyonu, kaliteyi gözle görülür biçimde düşürmeden dosya boyutunu küçültmektir. Bu yazıda WebP, AVIF ve doğru boyutlandırmanın nasıl yapılacağını anlatıyoruz.
Doğru Format: WebP ve AVIF
JPEG ve PNG uzun yıllardır kullanılan formatlardır. WebP ve AVIF ise aynı görsel kaliteyi genellikle çok daha küçük dosya boyutuyla sunar. Modern tarayıcıların tamamına yakını iki formatı da destekler. Formatların karşılaştırmasını web.dev görsel format rehberinde bulabilirsiniz.
- WebP: Geniş destek ve dengeli sıkıştırma; çoğu site için güvenli varsayılan.
- AVIF: Daha yüksek sıkıştırma; dönüştürme süresi daha uzun olabilir.
- PNG: Şeffaflık gereken logo ve ikonlar için; mümkünse SVG tercih edin.
- SVG: Logo, ikon ve basit çizimler için; her boyutta keskin ve çok hafif.
Doğru Boyut: Gösterildiği Kadar
4000 piksel genişliğindeki bir fotoğrafı 400 piksellik bir kutuda göstermek, ziyaretçiye gereksiz yere on kat büyük bir dosya indirtir. Görseller, gösterildikleri en büyük boyuta göre kırpılmalı ve küçültülmelidir.
- Yükleme öncesinde görselleri makul bir maksimum genişliğe küçültün.
- WordPress’in farklı boyutlarda otomatik oluşturduğu kopyalardan yararlanın.
- Tarayıcının cihaza uygun boyutu seçmesini sağlayan srcset yapısının çalıştığını kontrol edin.
Kendi sitemizde hizmet ikonlarını 150 piksellik kopyalarla, ana sayfa arka planını mobilde 768 piksellik ayrı bir kopyayla sunarak mobil yükü belirgin şekilde azalttık.
Sıkıştırma
Format ve boyutun yanında sıkıştırma kalitesi de önemlidir. Fotoğraflarda kalite ayarını biraz düşürmek, çoğu zaman gözle fark edilmeyen ama dosya boyutunda büyük kazanç sağlayan bir adımdır. WordPress’te görsel optimizasyon eklentileri, yüklenen görselleri otomatik olarak sıkıştırıp WebP’ye çevirebilir.
Tembel Yükleme ve Ana Görsel
- Ekranın altında kalan görsellere tembel yükleme uygulayın; WordPress bunu varsayılan olarak yapar.
- Sayfanın ana görseline, yani LCP öğesine tembel yükleme uygulamayın; aksine önceden yükleyin.
- Görsellere genişlik ve yükseklik değeri verin; böylece sayfa yüklenirken içerik kaymaz.
Ana görselin hıza etkisini Core Web Vitals yazımızda anlattık.
Alt Metin: SEO ve Erişilebilirlik
Optimizasyon yalnızca boyutla ilgili değildir. Her görsele içeriği anlatan bir alt metin yazmak, hem görme engelli kullanıcıların içeriği anlamasını sağlar hem de görsellerin Google Görseller’de bulunmasına yardımcı olur. Dosya adlarını da anlamlı ve Türkçe karaktersiz vermek iyi bir alışkanlıktır.
Yeni Görsellerde Disiplin
Bir kez optimize edilen site, yeni yüklenen ağır görsellerle zamanla eski hâline döner. Bu yüzden görsel yükleme kuralını ekibinizle paylaşın: fotoğraflar yüklenmeden önce makul bir genişliğe küçültülsün, optimizasyon eklentisinin otomatik dönüştürme özelliği açık kalsın ve her görsele alt metin yazılsın. Bu basit alışkanlık, hız optimizasyonunun kalıcı olmasını sağlar.
Sıkça Sorulan Sorular
WebP’ye çevirmek görsel kalitesini düşürür mü?
Uygun kalite ayarıyla fark genellikle gözle görülmez. Çok yüksek sıkıştırma ise bulanıklığa yol açabilir; sonucu kontrol etmek gerekir.
Eski görsellerimi toplu olarak dönüştürebilir miyim?
Evet. Görsel optimizasyon eklentilerinin çoğu, mevcut medya kütüphanesini toplu olarak sıkıştırıp WebP sürümlerini oluşturabilir.
Retina ekranlarda görseller bulanık görünmez mi?
Yüksek çözünürlüklü ekranlar için görselin biraz daha büyük kopyası srcset ile sunulur. Aşırı küçültme bu ekranlarda bulanıklığa yol açabilir.
Görsel CDN kullanmalı mıyım?
Çok sayıda görseli olan ve farklı bölgelerden ziyaretçi alan siteler için faydalı olabilir. Ayrıntıları CDN yazımızda anlattık.
Görsellerinizi Hafifletelim
KNN Yazılım olarak sitenizdeki görselleri kaliteden ödün vermeden optimize ediyor, yeni yüklenen görsellerin de otomatik olarak hafif kalmasını sağlıyoruz. Ayrıntılar için Web Sitesi Hızlandırma ve Web Tasarım sayfalarımızı inceleyebilirsiniz.
Hemen arayın: 0505 365 35 71 ya da iletişim sayfamızdan teklif alın.
