Web Sitesi Görselleri Nasıl Optimize Edilir? Görsel Optimizasyon Rehberi
Web sitesi görsellerini optimize etmek için gereksiz yüksek çözünürlükleri küçültmek, uygun dosya formatını seçmek, görselleri sıkıştırmak, responsive görseller kullanmak ve yükleme yöntemini doğru ayarlamak gerekir. Amaç görsel kalitesini kabul edilebilir seviyede korurken kullanıcının indirdiği veri miktarını azaltmaktır.
Özellikle çok sayıda banner, ürün fotoğrafı, kategori görseli veya içerik resmi bulunan sitelerde görsel optimizasyonu sayfa performansında önemli fark oluşturabilir.
1. Görselleri kullanılacağı boyuta göre hazırlayın
En sık yapılan hatalardan biri küçük bir alanda gösterilecek görseli gereksiz yüksek çözünürlükte yüklemektir.
Örneğin sayfada yaklaşık 600 piksel genişliğinde gösterilecek bir görseli 5000 piksel genişliğinde sunmak çoğu durumda gereksiz veri transferine neden olur.
Görselin kullanılacağı alanı belirleyin ve buna uygun çözünürlükte sürümler hazırlayın.
Yüksek piksel yoğunluklu ekranlar için daha büyük alternatifler gerekebileceğinden responsive görseller kullanmak tek bir sabit boyuta bağlı kalmaktan daha etkili olabilir.
2. Doğru görsel formatını seçin
Her görsel için aynı format en iyi sonucu vermeyebilir.
Yaygın formatlar:
- WebP: Fotoğraf ve birçok web görselinde verimli olabilir.
- AVIF: Uygun içeriklerde yüksek sıkıştırma verimliliği sağlayabilir.
- JPEG: Fotoğraf türündeki içeriklerde yaygın bir seçenektir.
- PNG: Kayıpsız grafik ve belirli şeffaflık ihtiyaçlarında kullanılabilir.
- SVG: Logo, ikon ve vektörel grafikler için oldukça uygundur.
Format seçerken yalnızca dosya uzantısına değil, ortaya çıkan dosya boyutu ve görsel kalitesine bakın.
3. Görselleri sıkıştırın
Yüksek kaliteli bir fotoğraf doğrudan kameradan veya tasarım programından çıktığında web için gereğinden büyük olabilir.
Görseli yayınlamadan önce sıkıştırmak dosya boyutunu önemli ölçüde azaltabilir.
Ancak aşırı sıkıştırma:
- Detay kaybı
- Bulanıklık
- Renk bozulması
- Bloklaşma
oluşturabilir.
Bu nedenle en düşük dosya boyutunu değil, kalite ile dosya boyutu arasındaki uygun dengeyi hedefleyin.
4. Sadece uzantıyı değiştirmek optimizasyon değildir
Örneğin:
foto.pngdosyasını:
foto.webpolarak yeniden adlandırmak görseli WebP formatına dönüştürmez.
Dosyanın uygun bir dönüştürme aracı veya encoder ile gerçekten yeni formatta oluşturulması gerekir.
Aynı şekilde görseli WebP'ye dönüştürmek de tek başına yeterli değildir. Çözünürlük ve kalite ayarları hâlâ önemlidir.
5. Responsive görseller kullanın
Masaüstü kullanıcıya 1600 piksel genişliğinde görsel gerekirken telefon ekranında çok daha küçük bir sürüm yeterli olabilir.
HTML'deki:
srcsetve:
sizesözellikleri farklı ekran koşullarında uygun görsel kaynağının seçilmesine yardımcı olabilir.
Örneğin aynı görselin:
- 480 px
- 800 px
- 1200 px
gibi farklı genişliklerde sürümleri hazırlanabilir.
Tarayıcı ihtiyacına göre uygun olanı seçebilir.
6. Görsellerin genişlik ve yükseklik değerlerini belirtin
HTML içerisinde:
widthve:
heightdeğerlerini belirtmek tarayıcının görsel yüklenmeden önce en-boy oranını hesaplamasına yardımcı olur.
Örneğin:
<img src="/images/banner.webp" width="1200" height="400" alt="Banner">Bu yaklaşım görsel yüklenirken sayfadaki diğer içeriklerin beklenmedik şekilde hareket etmesini azaltmaya ve CLS performansına yardımcı olabilir.
Responsive CSS ile görsel yine ekran boyutuna uyarlanabilir.
7. Görselleri responsive hale getirin
Büyük bir görselin mobil ekrandan taşmasını engellemek için yaygın olarak:
max-width: 100%;height: auto;kullanılabilir.
Bu sayede görsel kapsayıcısının genişliğini aşmaz ve oranını korur.
Ancak sitenin CSS mimarisine göre daha özel kurallar gerekebilir.
8. Lazy loading kullanın
Sayfanın aşağısında bulunan ve kullanıcı ekranında henüz görünmeyen görsellerin yüklenmesini ertelemek için:
loading="lazy"kullanılabilir.
Örneğin:
<img src="/images/gorsel.webp" loading="lazy" alt="Açıklama">Bu özellikle çok sayıda görsel bulunan uzun sayfalarda başlangıçta indirilen veri miktarını azaltabilir.
9. İlk ekrandaki önemli görselleri gereksiz yere lazy load etmeyin
Lazy loading her görsele uygulanmamalıdır.
Sayfanın en üstünde bulunan büyük hero görseli LCP öğesiyse lazy loading kullanılması görselin yüklenmesini geciktirebilir.
Genel yaklaşım:
- İlk ekrandaki kritik görseller → Öncelikli yükleme
- Sayfanın aşağısındaki görseller → Lazy loading
şeklinde düşünülebilir.
10. Hero görsellerine özellikle dikkat edin
Hero görselleri genellikle büyük oldukları ve sayfanın ilk bölümünde bulundukları için performans açısından önemlidir.
Hero görselini optimize ederken:
- Dosya boyutunu
- Çözünürlüğü
- Formatı
- Mobil sürümünü
- Tarayıcı tarafından ne zaman keşfedildiğini
- Lazy loading durumunu
kontrol edin.
LCP problemi yaşayan sitelerde ilk incelenmesi gereken öğelerden biri genellikle büyük üst bölüm görselleridir.
11. CSS background görsellerini kontrol edin
Bazı büyük görseller HTML
<img> yerine:background-imageile yüklenebilir.
Bu görseller de sayfa performansını etkileyebilir.
Özellikle büyük dekoratif arka planlarda:
- Çözünürlüğü düşürmek
- Sıkıştırmak
- Mobilde farklı görsel kullanmak
- Gereksiz arka planları kaldırmak
faydalı olabilir.
Kritik bir ana görselin yalnızca CSS içerisinden keşfedilmesinin yükleme davranışını nasıl etkilediğini de ölçmek gerekir.
12. Görseller için cache kullanın
Logo, ikon ve içerik görselleri her sayfa açılışında yeniden indirilmek zorunda değildir.
Uygun HTTP cache politikası ile tarayıcı daha önce indirdiği statik görselleri tekrar kullanabilir.
Uzun süre cache uygulanacak ve zaman zaman değiştirilecek görsellerde versioning veya hash'li dosya isimleri kullanmak güncellemelerin doğru şekilde dağıtılmasına yardımcı olur.
13. CDN ne zaman faydalı olabilir?
Kullanıcı kitlesi farklı coğrafi bölgelerde bulunuyorsa CDN statik görsellerin kullanıcılara daha yakın noktalardan sunulmasına yardımcı olabilir.
Bazı görsel CDN hizmetleri cihaz ve ekran boyutuna göre otomatik olarak farklı çözünürlük veya format da sağlayabilir.
Ancak CDN, kötü optimize edilmiş devasa bir görselin temel problemini ortadan kaldırmaz.
Önce görselin kendisini optimize etmek gerekir.
14. Thumbnail için orijinal görseli kullanmayın
200×200 piksel gösterilen küçük bir thumbnail için 4000×4000 piksel orijinal görseli indirmek gereksiz olabilir.
Thumbnail'ler için ayrı küçük boyutlar oluşturmak özellikle:
- Forum listeleri
- Ürün sayfaları
- Haber siteleri
- Galeriler
gibi çok sayıda görsel bulunan alanlarda ciddi veri tasarrufu sağlayabilir.
15. Kullanıcıların yüklediği görseller otomatik optimize edilmeli mi?
Kullanıcıların görsel yükleyebildiği forum ve sosyal platformlarda optimizasyonu yalnızca kullanıcıya bırakmak risklidir.
Kullanıcı doğrudan çok yüksek çözünürlüklü ve büyük boyutlu bir dosya yükleyebilir.
Sunucu tarafında uygun sistem kurulabiliyorsa:
- Maksimum dosya boyutu
- Maksimum çözünürlük
- Yeniden boyutlandırma
- Thumbnail oluşturma
- Format dönüştürme
- Güvenli dosya doğrulama
uygulanabilir.
Dosya uzantısına tek başına güvenilmemeli; yüklenen dosyaların güvenlik açısından da doğrulanması gerekir.
16. Görsel dosya isimleri nasıl olmalı?
Anlaşılır dosya isimleri içerik yönetimini kolaylaştırabilir.
Örneğin:
IMG_849302.webpyerine:
metin2-baslangic-rehberi.webpgibi açıklayıcı bir isim kullanılabilir.
Ancak yalnızca dosya adını anahtar kelimelerle doldurmak SEO açısından anlamlı bir strateji değildir.
Dosya adı kısa ve görselle ilişkili olmalıdır.
17. Alt etiketi unutmayın
Görsel içeriğin anlamını açıklamak için uygun
alt metni kullanılmalıdır.Örneğin:
alt="Metin2 başlangıç rehberi envanter ekranı"gibi görseli gerçekten açıklayan bir metin tercih edilebilir.
Dekoratif görsellerde ise erişilebilirlik açısından farklı yaklaşım gerekebilir.
Alt metnin amacı anahtar kelime doldurmak değil, görselin anlamını açıklamaktır.
18. Görseller CLS değerini nasıl etkiler?
Görsel yüklenmeden önce alan ayrılmamışsa görsel geldiğinde aşağıdaki içerikler hareket edebilir.
Bu durum CLS değerini yükseltebilir.
Bu nedenle görsel optimizasyonu yalnızca dosya boyutuyla ilgili değildir.
Doğru boyut veya en-boy oranı tanımlamak da sayfa stabilitesi açısından önemlidir.
19. Görseller LCP değerini nasıl etkiler?
Sayfanın en büyük görünür öğesi bir hero veya içerik görseliyse bu görsel LCP olarak değerlendirilebilir.
Büyük dosya boyutu veya geç başlayan yükleme LCP süresini artırabilir.
Böyle bir durumda:
1. LCP öğesini tespit edin.
2. Görsel çözünürlüğünü kontrol edin.
3. Dosya boyutunu azaltın.
4. Formatı değerlendirin.
5. Gereksiz lazy loading'i kaldırın.
6. Kaynağın erken keşfedildiğini kontrol edin.
20. Görsel optimizasyonu nasıl test edilir?
Optimizasyon sonrasında yalnızca dosyanın küçüldüğünü kontrol etmek yeterli değildir.
Şunları birlikte inceleyin:
- Dosya boyutu
- Görsel kalite
- Mobil görünüm
- Network transferi
- LCP
- CLS
- Sayfanın genel yüklenme davranışı
PageSpeed Insights, Lighthouse ve tarayıcı geliştirici araçları sorunlu görselleri belirlemeye yardımcı olabilir.
Görsel optimizasyonu için hızlı kontrol listesi
Web sitenizdeki görseller için:
1. Gereksiz yüksek çözünürlükleri küçültün.
2. İçeriğe uygun dosya formatını seçin.
3. Görselleri sıkıştırın.
4. Mobil için uygun boyutlar hazırlayın.
5.
srcset kullanımını değerlendirin.6.
width ve height değerlerini belirtin.7. Sayfanın aşağısındaki görsellerde lazy loading kullanın.
8. LCP görsellerini gereksiz yere lazy load etmeyin.
9. Thumbnail'ler için ayrı küçük dosyalar oluşturun.
10. Statik görseller için uygun cache politikası kullanın.
11. Kullanıcı yüklemelerini otomatik optimize etmeyi değerlendirin.
12. Sonuçları gerçek mobil cihazlarda test edin.
Özetle, web sitesi görsel optimizasyonu yalnızca JPEG dosyasını WebP'ye çevirmekten ibaret değildir. En iyi sonuç; doğru çözünürlük, uygun format, sıkıştırma, responsive görseller, lazy loading, cache ve doğru yükleme önceliğinin birlikte kullanılmasıyla elde edilir.
Özellikle görsel ağırlıklı sitelerde bu işlemler hem mobil kullanıcıların indirdiği veri miktarını azaltabilir hem de LCP ve genel sayfa yüklenme performansının iyileştirilmesine yardımcı olabilir.