Görsel optimizasyonu, bir dosyanın yalnızca kilobaytını küçültmek değildir. Doğru boyut, okunabilir kalite, erişilebilir açıklama ve yükleme sırası birlikte düşünülmelidir. Bir ürün fotoğrafı, dekoratif arka plan ve teknik ekran görüntüsü farklı ihtiyaçlar taşır. Küçük boyuta zorlanan kurulum ekranında yazılar okunmuyorsa dosya hafiflese bile rehberin faydası azalır. Önce görselin hangi bilgiyi sunduğunu belirleyin; ardından bu bilgiyi farklı cihazlarda koruyacak yayın ayarlarını seçin.
Başlamadan önce
Özgün dosyaları ayrı saklayın. Yayında kullanılacak görsel alanının masaüstü ve mobil genişliğini ölçün. Şeffaf arka plan gerekiyorsa seçilen formatın alfa kanalını koruduğunu kontrol edin. Gerçek panel ekranı paylaşacaksanız kullanıcı, parola, API anahtarı ve kişisel bilgileri içermediğini inceleyin. Temsili bir teknoloji görselini gerçek veri merkezi veya ürün ekranı olarak tanıtmayın; alt metni de bu ayrımı doğru anlatmalıdır.
Uygulama adımları
- Kullanım alanına uygun ölçü seçin
Kart içindeki küçük görsel için çok büyük bir kaynak göndermek gereksiz aktarım oluşturur. Ekran görüntüsündeki yazılar ve yüksek yoğunluklu ekranlar için gereken netliği hesaba katın. Tek bir ölçünün her bileşene uygun olacağını varsaymayın; hero, kart ve makale görsellerini ayrı değerlendirin.
- Formatı içeriğe göre belirleyin
Fotoğraf ve temsili ürün çizimlerinde WebP gibi formatları kalite kontrolüyle deneyin. Vektör logolar için mevcut güvenilir SVG daha uygun olabilir. Raster bir görseli yalnızca uzantısını değiştirerek dönüştürmeyin; gerçek kodlama ve tarayıcıda açılma testini yapın.
- Anlamlı alt metin yazın
Bilgi taşıyan görselin işlevini kısa ve doğru bir cümleyle açıklayın. Teknik ekran için hangi ayarın gösterildiğini belirtin. Süsleme amaçlı görsellerde boş alt metin uygun olabilir. Her görsele aynı hosting kelimelerini eklemek açıklama kalitesini artırmaz ve ekran okuyucu kullanımını zorlaştırır.
- Ölçü ve responsive seçim ekleyin
Width ve height değerleri doğru en boy oranını tanımlayarak alan ayrılmasına yardımcı olur. Farklı kaynak ölçüleri kullanıyorsanız srcset ve sizes değerlerinin yerleşimle uyumlu olduğundan emin olun. CSS ile görseli küçültmek, tarayıcının küçük dosyayı indirdiğini tek başına göstermez.
- Yükleme önceliğini ayırın
Ekranın ilk bölümündeki ana görseli gecikmeli yüklemek önemli içeriği bekletebilir. Sayfa altındaki görsellerde lazy loading uygun olabilir. Bütün görsellere yüksek öncelik vermek yerine gerçekten ilk görünümü oluşturan kaynağı belirleyin ve ağ kaydında sonucunu inceleyin.
- Görsel ve aktarımı birlikte test edin
Tarayıcının ağ panelinde dosya boyutunu, seçilen kaynak adresini ve yanıt durumunu inceleyin. Mobil ve masaüstünde kırpma, keskinlik ve renkleri karşılaştırın. Arka plan değiştiğinde şeffaf görselin kenarları bozuluyorsa dönüşüm sırasında alfa kanalı veya sıkıştırma ayarı kaybolmuş olabilir.
Sonucu doğrulama
Yavaş bağlantı benzetiminde ilk ekran görselinin zamanında görünmesini, alt bölümlerin kaydırıldığında yüklenmesini ve yerleşimin sıçramamasını kontrol edin. Alt metni yalnızca kaynak kodunda değil görselin içerikteki rolüyle birlikte okuyun. Bir ekran görüntüsünde gerçek ayar okunabilmelidir. Görsel dosyalarının 404 vermemesi, yanlış MIME türüyle gönderilmemesi ve izinsiz başka alanlara bağlı olmaması da doğrulamanın parçasıdır.
Sık karşılaşılan sorunlar
Görsel boş görünüyorsa kaynak adresi ve ağ yanıtını kontrol edin. Şeffaflık siyaha dönmüşse format dönüşümü yanlış olabilir. Büyük dosya hâlâ indiriliyorsa srcset veya sizes eşleşmesini inceleyin. Hero geç yükleniyorsa lazy loading, JavaScript ile geç ekleme veya CSS arka plan keşfi neden olabilir. Kaliteyi körlemesine düşürmekten önce ölçüyü küçültün ve farklı kalite düzeylerini aynı görünümde karşılaştırın.
Uygulama örneği
1200 piksel genişliğindeki bir teknoloji illüstrasyonu hero için hazırlanıp kartlarda daha küçük varyantla sunulabilir. Buna karşılık DNS kayıt tablosunu gösteren bir ekran görüntüsünü çok sıkıştırmak A ve AAAA alanlarını okunmaz yapabilir. Rehberde gerekli ayrıntıyı koruyun, dosyanın temsili veya gerçek ekran olduğunu açıklayın ve kişisel bilgileri yayımlamadan önce kontrol edin.
Sık sorulan sorular
Bütün görseller WebP olmalı mı?
Hayır. İçeriğin türü, desteklenen tarayıcılar ve kalite gereksinimi belirleyicidir. Mevcut temiz SVG logo veya metin ağırlıklı ekran görüntüsü için farklı biçim daha uygun olabilir. Kararı ölçüm ve görsel kontrolle verin.
Dosya adı alt metnin yerini tutar mı?
Hayır. Dosya adı kaynak yönetimini kolaylaştırır; alt metin görselin kullanıcı açısından anlamını ifade eder. İkisini de kısa ve açıklayıcı tutun, fakat aynı anahtar kelimeleri tekrar eden uzun adlar üretmeyin.
İlgili rehberler
Süreç özeti
İşlem ve doğrulama sırası
| Adım | Kontrol |
|---|---|
| 1 | Amacı ve boyutu belirle |
| 2 | Optimize edilmiş dosya hazırla |
| 3 | Alt ve ölçü ekle |
| 4 | Ağ ve görünümü test et |