Görsel optimizasyonu: WebP, AVIF, boyut ve alt metin
Görseller web sayfasının anlaşılmasını ve görünümünü güçlendirir, ancak gereğinden büyük dosyalar yüklenmeyi yavaşlatabilir. İyi optimizasyon yalnız sıkıştırma yüzdesini artırmak değildir. Görselin gösterim boyutu, formatı, yükleme önceliği ve açıklaması birlikte değerlendirilmelidir. Amaç içeriği anlaşılır tutarken gereksiz veri aktarımını azaltmaktır.
Önce gerçek kullanım boyutunu belirleyin
Sayfada küçük kart içinde gösterilen görsel için çok büyük bir kaynak dosyası sunmak çoğu zaman gereksizdir. Masaüstü ve mobil yerleşimde gereken genişlikleri ölçün. Yüksek piksel yoğunluklu ekranları dikkate alırken her kullanıcıya en büyük dosyayı göndermeyin. Uygun srcset ve sizes kullanımı tarayıcının daha doğru kaynağı seçmesine yardımcı olabilir.
Görselin en ve boy bilgisini tanımlamak, yüklenmeden önce alan ayrılmasını sağlar. Böylece metnin görsel geldikten sonra aşağı kayması azaltılabilir. Kırpma yapılacaksa önemli nesne ve yazıların mobil görünümde kaybolmadığını kontrol edin. Yalnız dosya boyutunu değil, gerçek sayfa görünümünü de değerlendirin.
Format seçimi
WebP ve AVIF birçok web görselinde verimli sonuç verebilir, fakat bütün görseller için tek format zorunlu değildir. Fotoğraf, saydam arka plan ve keskin çizgili grafik farklı sonuçlar verir. Sıkıştırılmış dosyayı orijinaliyle gözle karşılaştırın; yüzlerde, ince yazılarda veya ürün detayında bozulma varsa ayarı değiştirin. Bir formatın adı tek başına küçük dosya veya iyi kalite garantisi değildir.
Uygulama adımları
- Kaynak görseli koruyun. Dönüştürülmüş kopya üretin; yüksek kaliteli aslı üzerine yazmayın.
- Boyutlandırın. Kullanılacağı alanın gereksinimine uygun piksel ölçüsü seçin.
- Formatları karşılaştırın. Dosya boyutu ve görünür kaliteyi birlikte değerlendirin.
- Anlamlı ad verin. Konuyu anlatan kısa dosya adı kullanın; anahtar kelime yığını oluşturmayın.
- Alt metni yazın. Görselin sayfadaki anlamını kısa ve doğal biçimde açıklayın.
- Yükleme davranışını test edin. Mobil bağlantı koşullarında ana içeriğin ne zaman göründüğünü ölçün.
Alt metin nasıl yazılır?
Alt metin, görseli göremeyen kullanıcı için anlam aktarır. Bir SSH rehberindeki anahtar ve terminal çizimini “SSH anahtarıyla sunucu bağlantısını anlatan illüstrasyon” gibi açıklamak uygundur. Görselde olmayan başarı sonucu veya gerçek panel ekranı iddiası eklemeyin. Aynı anahtar kelimeyi tekrar tekrar yazmak yerine bağlama odaklanın. Tamamen dekoratif görsellerde boş alt metin kullanılması değerlendirilebilir.
Lazy loading her yerde kullanılmaz
Ekranın aşağısındaki görselleri gecikmeli yüklemek başlangıç aktarımını azaltabilir. Ancak sayfa açılır açılmaz görünen ana görseli, özellikle LCP öğesini geciktirmek performansı kötüleştirebilir. Hangi görselin ilk görünümde yer aldığını ölçerek karar verin. Bütün görsellere yüksek öncelik vermek de önceliklendirme amacını zayıflatır.
Yayın sonrası kontrol
Tarayıcıda indirilen gerçek dosyayı, boyutunu ve istek zamanını inceleyin. Sistem yüklediğiniz WebP’yi başka biçime dönüştürüyor veya çok büyük türev seçiyor olabilir. CDN önbelleği eski dosyayı sunabilir. Masaüstü ve mobilde görselin netliğini, kırpmasını ve çevresindeki metnin kayıp kaymadığını kontrol edin. Teknik ölçüm ile görsel kalite birlikte kabul edilmelidir.
Sık sorulan sorular
Her görsel 100 KB altında mı olmalı? Sabit sınır yerine kullanım boyutu, detay ve kaliteyi değerlendirin; gereksiz büyük dosyalardan kaçının.
Dosya adında çok anahtar kelime kullanmalı mıyım? Hayır. Kısa ve açıklayıcı isim daha anlaşılırdır.
Yapay zekâ görseli ekran görüntüsü gibi sunulabilir mi? Kavramsal illüstrasyonu gerçek panel görüntüsü olarak tanıtmayın; adımlar için doğrulanmış arayüz bilgisi kullanın.
İlgili teknik kaynaklar
İlgili rehberler
Thanks for your feedback!
