Görsel optimizasyonu yalnız dosyayı mümkün olduğunca küçültmek değildir. Okuyucunun görseli doğru boyutta, yeterli kalitede ve uygun zamanda görmesini sağlamaktır. Çok sıkıştırılmış bir ürün fotoğrafı veya okunamayan ekran görüntüsü, daha küçük dosya olsa bile sayfanın işini zorlaştırabilir. Bu yüzden her değişikliği görüntü kalitesi ve gerçek sayfa davranışıyla birlikte değerlendirin.
Çalışmaya sitenin bütün medya arşivini topluca dönüştürerek başlamayın. Önce ana sayfa, görsel ağırlıklı bir yazı ve varsa ürün sayfasından örnekler seçin. Orijinalleri saklayın, birkaç görselde yöntemi deneyin ve sonuçları doğruladıktan sonra kapsamı genişletin.
Hangi görsellerin sorun oluşturduğunu bulun
Tarayıcı geliştirici araçlarının ağ bölümünde yüklenen görselleri inceleyin. Dosya boyutu, piksel ölçüsü, aktarım süresi ve sayfadaki gösterim alanı birlikte anlamlıdır. Dar bir kart içinde gösterilen yüksek çözünürlüklü fotoğraf gereksiz aktarım yapıyor olabilir. Buna karşılık yakınlaştırmalı ürün incelemesi daha ayrıntılı kaynak gerektirebilir.
Sayfanın en büyük görünen öğesini de belirleyin. İlk ekrandaki büyük kapak görseli geç geliyorsa yalnız sıkıştırma değil, isteğin ne zaman başladığı da önemlidir. Görsel küçük olsa bile geç keşfediliyor veya gereksiz geciktiriliyorsa sayfanın ana içeriği geç tamamlanabilir.
Kullanım alanına uygun boyut seçin
- Görselin sayfadaki yaklaşık gösterim genişliğini belirleyin.
- Yüksek yoğunluklu ekran ihtiyacını da düşünerek uygun kaynak boyutu hazırlayın.
- Gereksiz boş kenarları kırpın; önemli ayrıntıları koruyun.
- WordPress’in ürettiği uygun boyutun sayfada kullanıldığını kontrol edin.
- Telefon ve masaüstünde görüntünün kesilmesini ve netliğini inceleyin.
Medya kütüphanesine büyük dosya yüklemek, her sayfada mutlaka o orijinalin gönderildiği anlamına gelmez. Tema ve blok ayarları farklı boyutlar seçebilir. Ancak yalnız editörde küçük görünmesi de küçük dosya sunulduğunu kanıtlamaz. Gerçek ağ isteğinde hangi dosyanın yüklendiğine bakın.
Formatı içerik türüne göre değerlendirin
| Görsel türü | Değerlendirilecek yaklaşım |
|---|---|
| Fotoğraf | JPEG, WebP veya AVIF çıktılarında kalite ve boyut karşılaştırması |
| Yazı içeren ekran görüntüsü | Keskinliği koruyan sıkıştırma ve okunabilirlik kontrolü |
| Şeffaf görsel | Şeffaflığı koruyan format ve kenar kontrolü |
| Basit logo veya çizim | Mevcut uygun vektör kaynağını koruma ya da temiz raster çıktı |
WebP veya AVIF her dosyada aynı kazanımı vermez. Sunucunun görüntü işleme desteği, kullanılan eklenti ve tarayıcıya sunulan çıktı birlikte kontrol edilmelidir. Dosya uzantısını değiştirmek dönüştürme değildir; içerik gerçek bir kodlayıcıyla uygun formatta üretilmelidir.
Sıkıştırma yüzdesini bütün arşive körlemesine uygulamayın. Bir fotoğrafta kabul edilebilir olan ayar, ince yazılı ekran görüntüsünü bozabilir. Görseli yalnız küçültülmüş önizlemede değil, okuyucunun inceleyeceği gerçek boyutta karşılaştırın. Orijinal dosyayı ayrı saklamak yeniden işleme için yararlıdır.
Responsive görseller ve ayrılmış alan
Farklı ekranlara uygun kaynak sunmak, telefona gereksiz büyük bir görsel göndermeyi azaltabilir. WordPress, tema ve eklentilerin ürettiği responsive görsel davranışını kontrol edin. Bir optimizasyon aracının etkin olması doğru kaynak seçiminin her şablonda çalıştığı anlamına gelmez.
Görsel yüklenmeden önce kaplayacağı alanın belirlenmesi sayfa kaymalarını azaltır. Doğru genişlik ve yükseklik oranı veya uygun yerleşim tanımı kullanılmalıdır. Tasarımda oran değiştirilmişse ürünün ya da ekran görüntüsünün önemli kısmının kırpılmadığından emin olun. İçeriğin açılırken düğmeleri aşağı itmesi özellikle telefonda kullanımı zorlaştırır.
Gecikmeli yüklemeyi doğru yerde kullanın
Sayfanın aşağısında kalan görsellerin ihtiyaç oldukça yüklenmesi ilk aktarımı azaltabilir. Ancak ilk ekranda görünen ana görsele, özellikle en büyük içerik öğesine, gecikmeli yükleme uygulamak yüklenmesini gereksiz yere erteleyebilir. Her görsele aynı kuralı uygulamak yerine konum ve önemine bakın.
Gecikmeli yüklenen içerik yalnız kullanıcı tıkladığında gelmemelidir; arama motorlarının sayfayla kullanıcı gibi etkileşmediğini hesaba katın. Görselin görünür alana geldiğinde yüklenmesini ve gerçek dosya adresinin erişilebilir olmasını doğrulayın. Birden fazla eklentinin aynı gecikmeli yükleme işini üstlenmesi teşhisi zorlaştırabilir.
Dosya adı ve alternatif metni anlamlı yazın
Açıklayıcı dosya adı medya yönetimini kolaylaştırır. Alternatif metin ise görselin sayfadaki anlamını anlatmalıdır. Bir ayar ekranının görüntüsünde hangi bölümün gösterildiğini belirtmek, genel “WordPress resmi” ifadesinden daha yararlıdır. Dekoratif bir görselin gereksiz uzun açıklamayla okuma akışını bölmemesi gerekir.
Önemli talimatları yalnız görselin içine gömmeyin; yazıda da açıklayın. Ekran görüntüsündeki küçük metin telefonda okunamayabilir. Bir adımın anlaşılması için büyütme gerekiyorsa uygun büyük sürüme erişim sağlayın. Sayfa düzeni için Blok Editörü rehberindeki temel yapıdan yararlanabilirsiniz.
Son kontrol ve yaygın hatalar
- Dosya boyutunun yanında görüntü kalitesini de karşılaştırın.
- Gerçek sayfada doğru boyut ve formatın yüklendiğini kontrol edin.
- İlk ekrandaki ana görselin gecikmediğini doğrulayın.
- Mobil görünümde bulanıklık, taşma ve yanlış kırpma arayın.
- Bozuk dosya adreslerini ve eski önbellek çıktısını inceleyin.
- Orijinal kopyaları ve toplu işlemin geri alma yöntemini koruyun.
Görseller düzeldikten sonra sayfa hâlâ yavaşsa sorunu yalnız dosya boyutunda aramayın. Sunucu yanıtı ve betik yükü ayrıca etkili olabilir. Site hızlandırma rehberi diğer nedenleri sırayla incelemenizi sağlar.
Sık sorulan sorular
Her görseli WebP’ye çevirmeli miyim?
Önce örnek çıktıları karşılaştırın. Uygun format, içeriğin türüne ve sitenin sunum desteğine bağlıdır; her dosyada aynı boyut veya kalite avantajı oluşmaz.
Görseli CSS ile küçültmek dosyayı da küçültür mü?
Tek başına küçültmez. Tarayıcı aynı büyük dosyayı indirip küçük gösterebilir. Yüklenen kaynak dosyasını ve responsive seçim davranışını kontrol edin.
Toplu optimizasyondan sonra görseller bozulursa ne yapmalıyım?
İşlemi durdurun, etkilenen örnekleri belirleyin ve saklanan orijinallerden geri dönün. Kalite ayarını küçük bir grupta yeniden test etmeden bütün arşivi tekrar işlemeyin.
Resmî kaynaklar
- Google görsel en iyi uygulamaları
- Ana içerik görselinin yüklenmesini iyileştirme
- Görsellerde performans ve boyutlandırma
- Gecikmeli yüklenen içeriği doğrulama