Blog kapak görsellerinde tasarım ile sayfa hızı nasıl dengelenir?

Bir yazı için kapak görseli hazırlarken önce kompozisyona, sonra dosya boyutuna bakıyordum. Fakat mobilde büyük görselin geç yüklenmesi kullanıcı deneyimini bozunca işin yalnızca estetik olmadığını fark ettim. Siz tasarım tesliminde görsel performansını da kontrol ediyor musunuz?

Benim iş akışımda üç nokta fark yarattı:

• Metni görsele gömmemek: Başlık görselin içinde küçük ekranda okunmayabiliyor; ayrıca arama motoru bu metni sayfadaki başlık kadar güvenilir biçimde değerlendiremez. Görseli atmosfer ve konu anlatımı için kullanıp asıl başlığı HTML metin olarak bırakıyorum.
• Doğru formatı seçmek: Fotoğraf ağırlıklı kapaklarda WebP çoğu zaman iyi bir seçenek. Şeffaflık gereken logo ve ikonlarda SVG veya uygun başka bir format daha mantıklı olabilir. Tek bir formatı her görsele zorlamak yerine çıktı kalitesini ve dosya boyutunu birlikte kontrol ediyorum.
• Alt metni açıklayıcı yazmak: Alt metin, anahtar kelime doldurma alanı değil; görselin içeriğini ve sayfadaki işlevini tarif etmeli. Sırf SEO için dekoratif görsellere uzun açıklamalar eklemek de doğru yaklaşım değil.

Bence tasarım sistemi içinde kapak görseli oranı, mobil kırpma alanı ve dosya boyutu için baştan kurallar belirlemek sonradan düzeltme yükünü azaltıyor. Siz hangi görsel sıkıştırma ve dışa aktarma ayarlarını kullanıyorsunuz; özellikle mobilde kalite kaybını nasıl yönetiyorsunuz?