WordPress’te bir görsel yüklenince aynı dosyanın küçük boyutları da üretilebilir. Fakat temanın görseli nasıl çağırdığı, bu boyutların ziyaretçiye gerçekten sunulup sunulmayacağını belirler. Medya kütüphanesinde ALT açıklaması girmek, kapak atamak ve responsive görüntü üretmek birbirleriyle ilişkili ama farklı işlerdir. Düzenli bir görsel akışı hem yazı hazırlamayı hem sonradan içerik taşımayı kolaylaştırır.

Kaynağı yüklemeden önce hazırlayın

Dosya adını içerikle ilişkilendirin; IMG_9845 yerine makine-yerlesim-on-gorunum gibi bir ad daha anlaşılır olabilir. Türkçe dosya adlarının sistemler arasında davranışını düşünerek sade isimler tercih edin. Yayın boyutuna göre gereksiz büyük dosyayı azaltın, ancak daha sonra kullanılabilecek düzenlenebilir orijinali kendi arşivinizde koruyun.

Bir görseli yalnızca temanın kartına sığdırmak için yanlış biçimde kırpmayın. Fotoğrafın önemli nesnesi bütün olarak görünmeli mi, yoksa portre kadrajı mı isteniyor? Tema object-fit: cover kullanıyorsa dosya doğru olsa bile ekranda kesilebilir. Görsel hazırlanmasıyla görüntü alanının davranışını ayrı kontrol edin.

Başlık, açıklama ve ALT aynı alan değildir

Medya başlığı yönetim kolaylığı sağlayabilir. Altyazı, sayfada okuyucuya ek bilgi verir. ALT ise görüntünün anlamını metinle aktarır. Bu yüzden hepsine aynı anahtar kelime listesini yazmak iyi bir yöntem değildir. “Paslanmaz karıştırıcı makinesinin ön görünümü” gibi kısa ve bağlama uygun bir açıklama çoğu durumda daha yararlıdır.

Görsel yalnızca dekoratifse boş ALT bilinçli olarak kullanılabilir. Her boş ALT otomatik hata değildir. Buna karşılık yazının önemli teknik detayını anlatan bir fotoğrafın açıklamasız kalması, görseli göremeyen okuyucunun bilgi kaybetmesine neden olur. Açıklamayı dosya adına bakarak değil, görüntünün sayfadaki görevine göre yazın.

Kapağı içerikle ilişkilendirin

Öne çıkarılmış görseli yazı düzenleyicisinden atayın. Aynı resmi içerikte tekrar eklemek kapağı otomatik atamakla aynı değildir. Tema kartları ve sosyal paylaşım etiketleri genellikle öne çıkarılmış görseli kullanır. Paylaşım görseli görünmüyorsa önce yazıda kapak gerçekten atanmış mı ve tema bu alanı çağırıyor mu diye kontrol edin.

Bir yazıda kapak ile içerik görseli aynı olduğunda gereksiz tekrar oluşabilir. Temanın tekil yazı şablonu kapağı zaten üstte gösteriyorsa ilk paragrafın üstüne aynı fotoğrafı tekrar koymak sayfayı uzatır. Görsel sayısını artırmak yerine her görselin hangi bilgiyi eklediğini düşünün.

Temada medya fonksiyonunu kullanın

Ek dosya adresini elle yazmak yerine WordPress’in medya fonksiyonları responsive özelliklerin üretilmesine yardımcı olur. Aşağıdaki örnekte $image_id, medya kütüphanesindeki gerçek görsel kimliğidir.

<?php
echo wp_get_attachment_image($image_id, 'large', false, [
    'class' => 'article-image',
    'sizes' => '(max-width: 720px) 100vw, 720px',
    'decoding' => 'async',
]);

sizes görselin sayfadaki beklenen genişliğini tarif eder; CSS tasarımını kendi başına kurmaz. WordPress’in üretebildiği srcset adayları mevcut medya boyutlarına bağlıdır. Eski yüklemelerde gereken boyutlar yoksa temaya bir satır eklemek bütün küçük dosyaları geriye dönük oluşturmayabilir.

Lazy loading kararını konuma göre verin

Sayfanın altında kalan görselleri gecikmeli yüklemek yararlı olabilir. Ancak ilk ekranda görünen ana görsele düşünmeden lazy loading vermek önemli içeriğin geç gelmesine yol açabilir. WordPress’in sürüme ve bağlama göre yaptığı otomatik kararları inceleyin. Bütün görsellere aynı özelliği zorlamak yerine ana görselle aşağıdaki galeriyi ayrı değerlendirin.

Son kontrolde gerçek dosyayı görün

Tarayıcı kaynak kodunda srcset, sizes, genişlik, yükseklik ve ALT alanlarını inceleyin. Dar ekranla geniş ekranda indirilen dosyanın farklı olması beklenebilir; küçük aday yoksa davranış değişmeyebilir. Görselin yalnızca CSS ile küçülmesi, ağdan daha küçük dosya geldiğini kanıtlamaz. Yönetim alanı, tema çıktısı ve tarayıcı davranışı birlikte kontrol edildiğinde sorun daha kolay bulunur.

Kaynaklar: WordPress — Responsive Images, wp_get_attachment_image.