Bir görselin telefonda küçük görünmesi, küçük dosyanın indirildiğini kanıtlamaz. WordPress’te srcset ve sizes alanlarını incelemek, tarayıcıya hangi kaynak seçeneklerinin sunulduğunu anlamaya yardımcı olur. Kontrolü gerçek sayfa ve indirilen dosya üzerinden yapın.
İki alanın görevini ayırın
WordPress, oluşturduğu görsel HTML’ine srcset ve sizes nitelikleri ekleyerek farklı kaynak boyutlarını tarayıcıya sunabilir. Srcset aday dosyaları, sizes ise görselin sayfada kaplayacağı alana ilişkin bilgiyi taşır. WordPress responsive görsel belgesi.
Kontrol sırası
- Yazıdaki görsel öğesini ve görüntülendiği genişliği belirleyin.
- HTML’de srcset ve sizes alanlarının bulunup bulunmadığını inceleyin.
- Tarayıcının seçtiği currentSrc değerini veya ağ kaydındaki dosyayı kontrol edin.
- İndirilen görselin piksel ölçüsü ve dosya boyutunu kaydedin.
- Dar ve geniş görünümde ana konunun korunup korunmadığını karşılaştırın.
Genişlik ile kırpımı ayrı değerlendirin
Varsayımsal bir kapak görseli masaüstünde geniş yatay, telefonda daha dar bir alanda gösterilebilir. Kaynak dosyanın küçülmesi ile görselin başka bir kırpımının kullanılması farklı işlemlerdir. Tarayıcının hangi dosyayı seçtiğini ve temanın o dosyayı nasıl yerleştirdiğini ayrı kaydedin.
Tema ve eklenti etkisini kontrol edin
Lazy-load veya görsel optimizasyon araçları veri niteliklerini ve kaynak sunumunu değiştirebilir. Özgün HTML ile sayfa yüklendikten sonraki görseli karşılaştırın. Format seçimi de gerekiyorsa WebP ve AVIF test planını aynı kaynak ölçüleriyle uygulayın.
Düzeltmeyi doğru katmanda yapın
Eksik dosya türevi, yanlış sizes değeri veya tema kırpımı için aynı çözümü varsaymayın. İlgili tema ya da eklentinin desteklenen ayar yolunu kullanın ve değişiklikten sonra seçilen dosyayı yeniden kontrol edin.
Web tasarım ve görsel sunumu kapsamında kapakların mobil boyutlarını ve kaynak seçimini birlikte test edebiliriz.
Projenizin kapsamını birlikte değerlendirmek için +90 544 180 19 23 numarasından arayabilir veya WhatsApp üzerinden Post Modern Medya’ya yazabilirsiniz.
1 Comment
[…] kaydına WordPress yedeğinin geri yükleme testini ve mobil görsel kaynağı kontrolünü ekleyin. Böylece yedeğin kullanılabilirliği ile küçük ekrandaki görsel seçimi ayrı test […]