Web Sitesinde Görsel Optimizasyonu Nasıl Yapılır? WebP ve Hız Rehberi

Ağır, optimize edilmemiş ve gereksiz devasa fotoğraflar, yavaş açılan web sitelerinin bir numaralı sorumlusudur. Birçok web sitesi sahibi fotoğraf makinesinden çıkan 5-10 MB’lık fotoğrafları doğrudan panele yükler; sonuçta site mobil cihazlarda dakikalarca açılmaz ve Google PageSpeed testinde kırmızı alarm verir.

Görsel kalitesinden zerre ödün vermeden web sitesi görsellerini tüy gibi hafifletmenin 5 adımlı mühendislik rehberi:

1. Yeni Nesil WebP ve AVIF Formatlarına Geçiş

Geleneksel JPEG ve PNG formatları 90’lı yılların teknolojisidir:

• WebP: Modern tarayıcıların %97’sinden fazlası tarafından desteklenir ve dosya boyutunu %80’e kadar küçültür.
• Kayıpsız (Lossless) ve Kayıplı (Lossy) Sıkıştırma: Fotoğraflarda insan gözünün fark edemeyeceği %80-85 kalite seviyesinde sıkıştırma yapmak en ideal dengeyi sağlar.

2. Doğru Çözünürlük ve Boyutlandırma

Görselin gösterileceği alan ile dosya çözünürlüğü eşleşmelidir:

• Ana hero banner genişliği maksimum 1920 piksel olmalıdır.
• Blog içi küçük görseller için 800 piksel genişlik fazlasıyla yeterlidir.
• Photoshop, Squoosh veya Sharp gibi modern araçlarla görselleri yüklemeden önce yeniden boyutlandırın.

3. Duyarlı Görseller: srcset ve sizes Kullanımı

Farklı ekranlar için farklı boyutlar servis edin:

<img src="gorsel-800.webp" 
     srcset="gorsel-400.webp 400w, gorsel-800.webp 800w, gorsel-1200.webp 1200w" 
     sizes="(max-width: 600px) 400px, 800px" 
     alt="İzmir Kurumsal Web Tasarımı ve Hız Optimizasyonu" 
     width="800" height="500" loading="lazy">

Bu kod sayesinde cep telefonları 400px’lik 20 KB’lık dosyayı indirirken masaüstü ekranlar 800px’lik dosyayı çeker.

4. Görsel SEO: Alt Etiketleri ve Dosya İsimleri

Google Görseller aramasından binlerce ziyaretçi çekmek için:

• IMG_8923.jpg gibi anlamsız dosya isimleri yerine izmir-web-tasarim-ajansi-ofis.webp gibi açıklayıcı ve tireli dosya isimleri kullanın.
• Her görselin alt etiketine görseli görme engelli birine tarif eder gibi somut bir açıklama yazın.

Görselleri otomatik optimize eden, sayfa yükleme rekorları kıran kurumsal web tasarım altyapımızla tanışabilir; hız metriklerini incelemek için core web vitals nedir yazımıza göz atabilirsiniz. Sitenizi optimize ettirmek için iletişim sayfamızdan bize ulaşın.