Web sitesi görsel kontrolü
Web görsellerini optimize edin: Yayın öncesi sayfayı kontrol edin
Tarayıcının gerçekten ne yüklediğini görmek, her görsel için doğru boyutu seçmek, HTML'yi düzeltmek ve yayınlamadan önce sayfayı kontrol etmek için bu rehberi kullanın.
Hızlı yanıt
Başka dosya dışa aktarmadan önce canlı sayfayı kontrol et
En hızlı görsel düzeltme genellikle yeni bir dönüştürücü değildir. Önce ağır istekleri, eksik boyutları, tembel yüklenen LCP görselini veya hala eski dosyaya işaret eden meta verileri bulun. Sayfadan başlayın, sonra sadece değişmesi gerekenleri dışa aktarın.
Önce kontrol et
Tarayıcının indirdiğiyle başlayın
Tasarım dosyaları ve medya klasörleri kullanıcıların gerçekte ne aldığını göstermez. Tarayıcı hangi görsel URL'sinin yüklendiğini, ne kadar büyük göründüğünü, sayfanın alan ayırıp ayırmadığını ve büyük bir dosyanın küçük bir dosyanın yeterli olduğu yerde tekrar kullanılıp kullanılmadığını gösterir.
Hangi URL yükleniyor?
Sayfayı açın ve gerçek görsel URL'sini, transfer boyutunu, gösterilen boyutu ve tarayıcının beklenen sürümü seçip seçmediğini not edin.
Görsel ne kadar büyük?
Kaynak dosyadan tahmin etmek yerine görünen alanı ölçün. Kartlar, içerik sütunları ve sosyal görseller aynı dışa aktarımı paylaşmamalı.
İlk ekranda mı?
Muhtemel LCP görselini bulun, yanlışlıkla tembel yüklemeden kaçının ve daha az önemli görselleri ilk yüklemeden çıkarın.
Meta veriler uyuyor mu?
Alt metni, Open Graph görselini, JSON-LD görselini, yakın metni ve dosya adını kontrol edin, böylece sayfa tek bir net hikaye anlatır.
Görsel planı
Her önemli görseli dönüştürmeden önce planla
Bir görsel planı, bu rehberi dönüştürücü makalelerden ayrı tutar. Her görsel alanının ihtiyacı olan boyut, yükleme sırası, yedek, meta veri rolü ve sayfanın doğru dosyayı kullandığını kanıtlayan son kontrolü sorar.
| Görsel alanı | Karar | Risk | Kontrol |
|---|---|---|---|
| Ana görsel | Muhtemel LCP görselini, kesin ölçüleri, yükleme sırasını ve yedek yolu belirle. | Tembel yükleme veya aşırı büyük dosyalar ilk faydalı görseli geciktirebilir. | İlk ekranda gösterilen boyut, istek boyutu ve yükleme davranışını karşılaştırın. |
| Makale içerik görseli | İçerik genişliği sürümlerini belirleyin ve genişlik ile yükseklikle alan ayırın. | Sayfa, okuma sütunundan çok daha geniş bir kaynak görseli yükleyebilir. | Masaüstü ve mobil genişlikleri kontrol edin, seçilen srcset adayını doğrulayın. |
| Tekrarlanan kart görseli | Listeler, merkezler, ilgili kartlar ve arşiv sayfaları için küçük sürümler oluşturun. | Tekrar kullanılan bir makale görseli listeleme sayfasına çok fazla yük ekleyebilir. | Listeleme sayfasını tarayın ve tekrarlanan kartların tam makale görsellerini yüklemediğini doğrulayın. |
| Meta veri görseli | Open Graph ve JSON-LD görsellerini planlanan dosyalar olarak hazırlayın, rastgele kalıntılar olarak değil. | Arama ve paylaşım önizlemeleri eski, kırpılmış veya alakasız görseller gösterebilir. | Son URL için oluşturulan meta etiketleri ve yapılandırılmış verileri inceleyin. |
Plan dosyaların yeni sürümlere ihtiyacı olduğunu söylediğinde, sonraki adımı seçmek için görsel dönüştürme rehberi kullanın. Normal WebP çalışmaları için JPG'den WebP'ye rehber kullanın, AVIF rehberi ise hala daha fazla tasarruf gereken büyük fotoğraflar içindir.
Görsel boyutları
Her görsel alanı için net boyutlar belirle
Duyarlı görseller, HTML düzenle eşleştiğinde çalışır. Alanı ölçün, birkaç faydalı genişlik seçin, en-boy oranını ayırın ve sadece var diye büyük orijinal göndermekten kaçının.
Basit kontrol: 360 px kart 2400 px dosya indiriyorsa, sıkıştırma ana sorun değildir. Sayfa daha küçük bir görsel sürümüne ihtiyaç duyar veya HTML yanlış dosyaya işaret eder.
Yükleme sırası
İlk görsel kasıtlı olarak yüklensin
İlk ekranı şekillendiren görsel, sayfanın altındaki görsellerden farklı bir kurala ihtiyaç duyar. Muhtemel LCP görselini bulun, yanlışlıkla tembel yüklemeden kaçının ve alt görselleri ihtiyaç duyulana kadar sessiz tutun.
- 1
LCP görselini adlandır
İlk anlamlı görsel muhtemelen Largest Contentful Paint olacaksa, yanlışlıkla lazy loading yapmayın.
- 2
Alt görseller sessiz kalsın
İlk görünümün altındaki görseller genellikle tembel yükleme ve asenkron kod çözme kullanmalıdır.
- 3
CSS arka planlarını kontrol et
Kırpılmış bir arka plan yine de büyük bir dosya indirebilir. Görünen alan için doğru boyutta dosya kullanın.
- 4
Tekrarlanan istekleri kontrol et
Aynı büyük dosya onlarca kez tekrarlandığında küçük kart görseli maliyetli olur.
HTML
Ölçülen alan için duyarlı HTML kullanın
Önemli görseller için tarayıcı seçimini net yapın. Aşağıdaki örnek genişlik seçenekleri, boyutlar, sabit ölçüler ve yedeği gösterir. Yükleme davranışını alışkanlığa değil, alana göre değiştirin.
<picture>
<source
type="image/avif"
srcset="/images/article/product-640.avif 640w,
/images/article/product-960.avif 960w,
/images/article/product-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/article/product-640.webp 640w,
/images/article/product-960.webp 960w,
/images/article/product-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/article/product-960.jpg"
alt="Yükleme akışını gösteren kontrol paneli ekran görüntüsü"
width="960"
height="540"
loading="lazy"
decoding="async" />
</picture>Arama ve paylaşım
Görseller, alt metin ve meta veriler tek bir hikaye anlatsın
Görsel SEO sadece anahtar kelime eklemek değildir. Görünen görsel, yakın metin, faydalı alt metin, Open Graph etiketleri ve JSON-LD görsel bağlantıları aynı sayfayı net şekilde anlatmalıdır. Dekoratif görseller dekoratif kalmalıdır.
Kontrol zayıf sosyal önizlemeler bulduğunda Grafik resim kılavuzunu aç ile devam edin. Şema ve meta etiketler sorun olduğunda, JSON-LD ve sayfa meta verilerini tutarlı tutmak için Blazor meta veri rehberi kullanın.
Adımlar
Her sayfa için basit bir görsel kontrolü
- 1
Gerçek sayfayı aç
Varlık klasörü değil, mevcut URL'den başlayın. Gerçekten yüklenen görselleri kaydedin.
- 2
Görsel planını oluştur
Her önemli görsel için hedef genişlik, en-boy oranı, yükleme sırası, yedek ve meta veri rolünü not edin.
- 3
Sadece değişeni dönüştür
Tüm medya klasörünü yeniden dışa aktarmak yerine, kontrolün bulduğu dosyalar için dönüştürme araçlarını kullanın.
- 4
HTML ve meta verileri güncelle
srcset, boyutlar, ölçüler, Open Graph ve JSON-LD görsel bağlantılarını hazırlanmış dosyalara yönlendirin.
- 5
Tarayıcı çıktısını doğrula
Sayfayı, ağ isteklerini, sosyal meta verileri, yapılandırılmış verileri ve mobil düzeni kontrol et.
- 6
Kuralı sonraki sefer için sakla
Görsel kararlarını belgeleyin, böylece gelecekteki güncellemeler tahmine dayalı başlamasın.
Araç ipucu
Hangi dosyaların dönüştürüleceğini bildikten sonra PixelPress kullanın
Kontrol bir klasörün yeni WebP veya AVIF dosyalarına ihtiyacı olduğunu gösterdiğinde, PixelPress bunları yerel olarak dönüştürebilir. Orijinaller dokunulmadan kalır ve çıktı klasörü kolayca incelenir.
Kontrol listesi
Yayın öncesi görsel kontrol listesi
Bir makale, açılış sayfası veya ürün sayfası yayına girmeden önce bu listeyi kullanın. Dönüştürmenin tek başına kaçırabileceği sayfa sorunlarını yakalar.
SSS