İçeriğe atla
Bizi takip edin:
MODERN WEB MİMARİSİ VE TEKNİK SEO REHBERİ
WEB & DİJİTAL DÖNÜŞÜM KOCAELİ & GEBZE SANAYİ BÖLGESİ

Arama Motorları İçin Görsel Optimizasyonu: WebP, AVIF ve Hız

HEDEF SAHA & SEKTÖR Kurumsal Şirketler, İhracatçılar & B2B Sanayi
MİMARİ & STANDART Astro SSG · Core Web Vitals · Schema.org
TEMEL İŞ KAZANIMI Süreç Hızı ve Sıfır Manuel Hata
Yönetici Özeti: Web sitelerinde yüksek çözünürlüklü görselleri kayıpsız WebP ve AVIF formatlarına dönüştürme, native responsive resimler ve lazy loading teknikleri. Detaylı ...

Hızlı Özet (TL;DR)

Bir kurumsal web sitesinin toplam sayfa boyutunun ortalama %60 ile %80’ini görseller oluşturur. Fotoğraf makinesinden çıktığı gibi 5 MB boyutunda yüklenen PNG ve JPEG dosyaları mobil kullanıcının kotasını eritir ve sayfa açılışını 8-10 saniye geciktirir. Modern web geliştirmede yeni nesil WebP ve AVIF formatları kullanılarak görsel kalitesinden ödün vermeden dosya boyutları %70-%90 oranında küçültülür. Doğru görsel optimizasyonu hem PageSpeed skorunu zirveye taşır hem de Google Görseller aramasından nitelikli organik trafik çeker.

Görsel Formatları Karşılaştırması

FormatSıkıştırma VerimliliğiŞeffaflık (Alpha)Tarayıcı Desteğiİdeal Kullanım
JPEGStandart (Eski)Desteklemez%100Eski tarayıcı fallback’leri
PNGDüşük (Büyük dosya boyutu)Mükemmel%100Vektörel olmayan şeffaf ikonlar
WebPÇok Yüksek (%30 daha küçük)Destekler%97+Kurumsal web fotoğrafları ve banner’lar
AVIFEn Yüksek (%50 daha küçük)Destekler%93+Yeni nesil yüksek dinamik aralıklı görseller
SVGSonsuz ölçeklenebilir (Kod tabanlı)Doğal destek%100Logo, ikon ve grafik çizimleri

Responsive Resim Mimarisi: picture ve srcset

Tek bir görseli tüm ekranlara zorlamak yerine, cihazın çözünürlüğüne uygun boyuttaki görseli tarayıcıya sunmak bant genişliğini korur:

<picture>
  <source srcset="/img/banner-mobil.avif" media="(max-width: 600px)" type="image/avif" />
  <source srcset="/img/banner.webp" type="image/webp" />
  <img src="/img/banner.jpg" width="1200" height="600" loading="lazy" decoding="async" alt="Kurumsal Web Tasarım" />
</picture>

Görsel SEO’sunun 3 Temel İlkesi

  1. Anlamlı Dosya Adı: IMG_4819.jpg yerine b2b-kurumsal-web-tasarim-hizmetleri.webp şeklinde içeriği açıklayan dosya adları tercih edilmelidir.
  2. Eksiksiz Alt Metni (Alt Tag): Ekran okuyucular ve arama motorları için görselin ne anlattığını net belirten betimleyici alt metinleri yazılmalıdır.
  3. Lazy Loading: İlk ekranın altında kalan tüm resimler için loading=lazy özniteliği kullanılarak sayfa ilk açılışı hızlandırılmalıdır.

Işık hızında açılan görsel optimizasyonlu web projeleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı inceleyin.

BİLGİ BANKASI & VAKALAR

İlginizi Çekebilecek Diğer Rehberler

Sanayi dijitalleşmesi, siber güvenlik ve kurumsal yazılım alanında kapsamlı analizler.

İşinize uygun çözümü birlikte çıkaralım

İhtiyacınızı dinleyelim, kapsamı ve bütçeyi netleştirelim. İlk görüşme ücretsizdir.

Teklif Formu

Size buradan dönüş yapacağız; WhatsApp numaranız olması işimizi kolaylaştırır.

Talebiniz Alındı!

Mesajınız [email protected] adresine başarıyla iletildi.
En kısa sürede sizinle iletişime geçeceğiz.