Web Siteleri için Görsel Optimizasyonu: Formatlar, Boyutlandırma ve Teslimat
Yavaş web siteleri genellikle çok sayıda görsel içerir. Aşırı büyük fotoğraflar, yanlış formatlar ve kötü teslimat, yükleme süresini uzatır, arama görünürlüğünü düşürür ve sitenin tasarımından daha kötü algılanmasına neden olur.
Çözüm tek bir sihirli format değil; doğru formatı seçmek, uygun boyutta dışa aktarmak, doğru varyantı sunmak ve meta veriler ile yayınlama adımlarını düzenli tutan yapılandırılmış bir iş akışıdır.
İçindekiler
Web sitesi görsel optimizasyonu neden önemlidir
Sayfanın yavaş hissetmesinin ana nedeni genellikle görsellerdir. Sayfadaki en büyük veri boyutları aşırı büyük fotoğraflar, yanlış formatlar veya zayıf duyarlı teslimattan kaynaklandığında, hem kullanıcı deneyimi hem de arama performansı olumsuz etkilenir.
Bu yüzden görsel optimizasyonu rastgele çözümler değil, sistematik bir plan gerektirir. Formatlar, boyutlandırma, teslimat ve bu varlıkları üreten yayınlama iş akışı için net bir plana ihtiyacınız vardır.
Daha Hızlı Sayfalar
Doğru boyutlandırılmış ve modern formatlardaki görseller, veri transferini azaltır ve önemli görsellerin daha hızlı yüklenmesini sağlar.
Performans
Daha İyi Arama Görünürlüğü
Daha temiz görsel teslimatı, güçlü meta veriler ve hızlı sayfalar, daha iyi tarama sinyalleri ve yüksek sayfa kalitesi sağlar.
Arama Etkisi
Daha Az Yayınlama Karmaşası
Yapılandırılmış bir görsel iş akışı, ekiplerin büyük orijinal dosyalar göndermesini, meta veri görsellerini atlamasını ve tutarsız dışa aktarımları engeller.
Operasyonel Netlik
Genellikle hangi web görsellerine ihtiyacınız var
Çoğu web sitesi daha fazla görsel türüne ihtiyaç duymaz. Doğru görsel rolleri, uygun boyutlandırma ve doğru etiketleme gerekir. Rastgele yüklemeler yerine iş odaklı düşünün.
Kahraman veya LCP görseli
Sayfanın üst kısmındaki ana görseldir. Genellikle En Büyük İçerik Boyama (LCP) öğesi olur, bu yüzden dikkatli boyutlandırılmalı ve varsayılan olarak tembel yüklenmemelidir.
Amaç: ilk izlenim ve LCP
Satır içi içerik görselleri
Bunlar makaleyi destekler. İçeriği açıklamalı, anlamlı alt metin kullanılmalı ve masaüstü ile mobil düzenlerde iyi ölçeklenmelidir.
Amaç: okuma akışını desteklemek
Kartlar, küçük resimler ve merkez görselleri
Bu küçük görseller kategori sayfalarında, ilgili makale modüllerinde ve navigasyon alanlarında görünür. Sayfa kahraman görselinden daha küçük varyantlar kullanılmalıdır.
Amaç: önizlemeler ve gezinme
Open Graph ve sosyal önizleme görseli
Bu görsel, sayfanın sohbet uygulamalarında ve sosyal platformlarda paylaşılırken nasıl görüneceğini belirler. Görünür kahramanın kopyası değil, meta veri varlığıdır.
Amaç: paylaşım önizlemeleri ve tıklama
JSON-LD için yapılandırılmış veri görseli
Makale ve ürün şeması, arama motorlarının sayfaya bağlı ana görsel varlığı anlaması için birincil görsele referans verebilir.
Amaç: şema tamlığı ve varlık netliği
Formatlar: İş için doğru dosya türünü seçin
En iyi format, görselin rolüne bağlıdır. Çoğu site için tek bir evrensel format değil, karışım gerekir.
| Format | En uygun | Neden önemli |
|---|---|---|
| WebP | Günlük web sitesi görselleri, kartlar, önizlemeler ve çoğu içerik görseli | WebP, kalite, sıkıştırma ve kolay tekrar kullanım dengesi nedeniyle pratik varsayılan formattır. |
| AVIF | Seçilen büyük fotoğrafik kahraman görselleri ve ekstra sıkıştırmanın önemli olduğu yüksek değerli görseller | AVIF daha küçük dosyalar sunabilir, ancak kodlama daha yavaştır ve genel varsayılan değil, seçici optimizasyon adımı olarak en iyi sonucu verir. |
| JPEG | Modern dışa aktarma öncesi eski uyumluluk ve kaynak dosyalar | JPEG hâlâ yaygın bir giriş formatıdır, ancak önemli web sitesi görselleri için nadiren son format olmalıdır. |
| PNG | Ekran görüntüleri, şeffaflık ve kayıpsız kenar gerektiren kullanıcı arayüzü varlıkları | PNG, arayüz grafiklerinde kullanışlıdır ancak normal fotoğrafik içerik için genellikle çok ağırdır. |
| SVG | Simge, diyagram, logo ve basit illüstrasyonlar | SVG, keskin çizgi tabanlı grafiklerde temiz ölçeklenir ve raster formatlardan genellikle üstündür. |
Günlük işler için WebP kullanın, maksimum tasarrufun önemli olduğu küçük fotoğrafik görseller için AVIF’i saklayın.
Günlük WebP yolu için, şunu okuyun: JPG'den WebP'ye iş akışı rehberi Seçici kahraman görseli sıkıştırması için, şunu kullanın: JPEG'den AVIF'ye rehberi .
Boyutlandırma: duyarlı görseller, boyutlar ve düzen kararlılığı
Yavaş web sitelerinin sadece format sorunu yoktur. Genellikle her ekran boyutuna aşırı büyük bir görsel gönderirler. Duyarlı boyutlandırma bunu çözer.
- Telefonlar, tabletler ve masaüstleri doğru varlığı alabilsin diye birden fazla genişlik oluşturun.
- Alan ayırmak ve düzen kaymasını azaltmak için genişlik ve yükseklik belirleyin.
- Kartlar ve ilgili içerikler için tam kahramanı her yerde kullanmak yerine daha küçük varyantlar tercih edin.
- Yakınlaştırma, indirme veya lightbox davranışı gerçekten gerektirdiğinde büyük orijinali saklayın.
Teslimat işaretleme örneği
İçerik görselleri için küçük, açık bir görsel ayarı kullanın ve gerçek kahraman için öncelikli yüklemeyi ayırın. Bu tür teslimat işaretlemesi, tarayıcı davranışı ve Lighthouse sonuçlarının anlaşılmasını kolaylaştırır.
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>Teslim öncelikleri: tembel yükleme, LCP ve Core Web Vitals
Formatlar ve boyutlar doğru olduğunda, teslimat sonraki önemli faktör olur. Ana kural basittir: katmanın üstündeki görseli öncelikli varlık olarak değerlendirin, sonradan düşünülmüş gibi değil.
Kahraman görseliniz için bunu yapın
Kahraman görselini sıkıştırılmış ve gerçek düzen için boyutlandırılmış tutun. Muhtemel En Büyük İçerik Boyama öğesi ise öncelikli yükleyin.
Modern formatlar kullanın, belirgin boyutlar verin ve katmanın üstünde çoklu dev afiş yığmaktan kaçının.
Teslimatı Zayıflatan Faktörler
Birincil kahraman görselini tembel yüklemek, masaüstü boyutundaki varlıkları telefonlara göndermek ve fotoğrafik içerik için aşırı büyük PNG kullanmak hâlâ yaygın hatalardır.
Bu sorunlar hem Lighthouse skorunu hem de gerçek kullanıcı deneyimini zayıflatır.
Bağlam: dosya adları, alt metin ve çevresindeki içerik
Görsel optimizasyon sadece veri boyutuyla ilgili değildir. Arama motorları ve kullanıcılar, görselin ne olduğunu ve sayfada neden yer aldığını da anlamalıdır.
- Kamera dışa aktarımları veya yer tutucu isimler yerine konuyu tanımlayan dosya adları kullanın.
- Görsel anlam katıyorsa alt metin yazın, anahtar kelime yığını olarak değil.
- Yakındaki başlıklar, açıklamalar ve metinler görselin gösterdiğiyle uyumlu olsun.
- Görsel rolünün sayfa konusunu desteklediğinden emin olun, rastgele görünmemelidir.
Meta Veri: Open Graph ve JSON-LD Görsellerinin Önemi
Bir sayfa tarayıcıda iyi görünebilir ancak meta veri görselleri ihmal edilirse keşif açısından zayıf olabilir. Bu, en kolay düzeltilebilen kalite boşluklarından biridir.
Open Graph görseli
Bu, sayfanın dışarıda paylaşıldığında nasıl görüneceğini kontrol eder. Güçlü bir Open Graph görseli, sosyal ve sohbet platformlarında algılanan kaliteyi ve tıklanma oranını artırır.
JSON-LD görsel özelliği
Yapılandırılmış veriler, arama motorlarına daha temiz bir içerik paketi sunar. İlgili bir görsel eklemek, başlık, açıklama ve ana görsel varlık arasındaki bağlantıyı güçlendirir.
Blazor ile geliştiriyorsanız, bu rehberi şu kaynakla eşleştirin: Blazor meta veri bileşeni rehberi böylece sayfa başlığı, açıklaması, canonical bağlantısı, Open Graph görseli ve yapılandırılmış veriler uyumlu kalır.
İş Akışı: Web Sitesi Görselleri için Yapılandırılmış Süreç
- Dışa aktarmadan önce görsel rolünü belirleyin: kahraman, satır içi, kart, Open Graph veya şema görseli.
- İş için formatı seçin: Günlük işler için WebP, seçilmiş ağır fotoğraflar için AVIF, vektörler için SVG, kayıpsız şeffaflık gerektiğinde PNG.
- Her yere aşırı büyük orijinal göndermek yerine, düzen için doğru boyutları dışa aktarın.
- Teslim önceliklerini belirleyin; kahraman görsel öncelikli varlık gibi davranmalı, ikincil görseller ise verimli kalmalıdır.
- Yayınlamadan önce meta veri görsellerini, alt metni ve dosya adlarını kontrol edin.
Bu iş akışı için araç seçiyorsanız, en iyi web görsel dönüştürücü rehberi yerel ve çevrimiçi kararını kapsar.
Web sitesi görsel optimizasyon kontrol listesi
- Her önemli sayfanın dışa aktarma başlamadan önce net bir görsel rol planı vardır.
- Daha güçlü seçici bir format gerekmedikçe WebP, günlük web sitesi görsellerini yönetir.
- Büyük fotoğrafik görseller, ekstra tasarruflar değerliyse AVIF kullanır.
- Kahraman görseller düzen için boyutlandırılır ve muhtemel LCP öğesi olduklarında tembel yüklenmezler.
- Kart ve merkez görselleri, sayfa kahramanından daha küçük varyantlar kullanır.
- Open Graph görselleri paylaşım ve önizlemeler için vardır.
- Yapılandırılmış veri ilgili bir ana görsel içerir.
- Düzen kaymalarını önlemek için genişlik ve yükseklik belirtilmiştir.
- Alt metin ve dosya adları görsel rolünü net şekilde tanımlar.
- İş akışı o kadar tutarlıdır ki aynı hatalar sonraki yayında tekrar etmez.