Web Siteniz İçin Görsel Optimizasyonu: 2026 İçin Eksiksiz Rehber

Görseller ortalama bir web sayfasının toplam ağırlığının yaklaşık %40'ını oluşturur. Bunları doğru şekilde optimize edin ve sayfa boyutunuzu yarıya düşürebilir, 2,5 saniyenin altında Largest Contentful Paint elde edebilir ve arama sonuçlarında daha üst sıralara çıkabilirsiniz. İşte sürecin tamamını adım adım.

Görsel Optimizasyonu Neden Her Zamankinden Önemli?

HTTP Archive verilerine göre medyan web sayfası mobilde yaklaşık 2,5 MB ağırlığında ve görseller bunun yaklaşık 1 MB'ını oluşturuyor. Google'ın Core Web Vitals ölçümlerinden biri olan Largest Contentful Paint (LCP) en büyük görünür elementin ne kadar hızlı yüklendiğini doğrudan ölçer. Çoğu sayfada bu element bir görseldir.

Referans değer: 2,5 saniye veya altında LCP "iyi" sayılır. 4 saniye üstü "zayıf" sınıfındadır. Görsel tabanlı LCP elemanlarının 75'inci yüzdedilimi, metin tabanlı LCP sayfalarına göre neredeyse iki kat yavaştır. İyi optimize edilmiş bir hero görsel ile şişmiş bir görsel arasındaki fark, genellikle yeşil ve kırmızı Core Web Vitals puanı arasındaki farktır.

Adım 1: Doğru Formatı Seçin

Format seçimi dosya boyutu üzerindeki en büyük etkiye sahiptir. Gerçek sıkıştırma karşılaştırmalarına dayanan ana web formatları:

Çoğu web sitesi için WebP en güvenli varsayılandır. Hem fotoğrafları hem grafikleri iyi işler, agresif sıkıştırır ve her yerde çalışır. Altyapınız destekliyorsa, <picture> elemanı ile AVIF'i birincil olarak sunun ve WebP'yi yedek olarak kullanın. Vizua ile JPG'yi WebP'ye veya AVIF'e dönüştürme yapabilirsiniz — yükleme gerekmez, her şey tarayıcınızda çalışır.

Daha detaylı karşılaştırma için JPEG vs PNG analizimize ve kayıplı vs kayıpsız sıkıştırma açıklamamıza bakın.

Adım 2: Gerçek Görünüm Boyutlarına Yeniden Boyutlandırın

Kameranızdan alınan 4000 x 3000 piksellik bir fotoğraf, web sitenizde 800 x 600 olarak gösterildiğinde piksellerinin yaklaşık %80'ini boşa harcar. Bu görünmez pikseller yine de bant genişliği ve işleme süresi maliyetine neden olur.

Kural: görselleri görüntüleme boyutlarında veya yakınında sunun. Standart ekranda piksel boyutlarını tam olarak eşleştirin. 2x Retina ekranda netlik için görünüm genişliğinin iki katı boyutunda görsel sunun — ama daha fazla değil.

Pratik hedefler:

• Tam genişlik hero: 1600-1920px genişlik (Retina için 2x'e kadar)
• Blog içerik görseli: 800-1200px genişlik
• Küçük resim: 300-400px genişlik
• Avatar: 64-128px (2x için 256px'e kadar)

Vizua'nın görsel boyutlandırma aracı ile görselleri sıkıştırmadan önce ihtiyacınız olan genişliğe küçültün. Bu tek başına dosya boyutunu %70-90 azaltabilir.

Adım 3: Doğru Kalite Ayarıyla Sıkıştırın

Format seçimi ve yeniden boyutlandırma sonrası, sıkıştırma kalan tasarrufu sıkacağınız adımdır. Kalite kaydırıcı çoğu kişinin düşündüğünden daha önemlidir — kalite ile dosya boyutu arasındaki ilişki doğrusal değildir. JPEG kalitesini 100'den 80'e düşürmek muazzam alan tasarrufu sağlar; 80'den 60'a düşürmek ise görünür kusurlarla azalan getiri sağlar.

Önerilen kalite ayarları:

• JPEG: 75-85 — fotoğraflar için ideal aralık. Kalite 80'de tipik bir JPEG, görünür fark olmadan sıkıştırılmamış orijinalden %60-80 daha küçüktür.
• WebP: 75-80 — JPEG 85 ile eşit görsel kalite, daha küçük dosya.
• AVIF: 60-75 — codec verimliliği sayesinde daha düşük sayılar bile harika görünür.
• PNG: Maksimum sıkıştırma seviyesi kullanın (kayıpsız). Ek tasarruf için grafik izin verdiğinde 8-bit'e (256 renk) düşürün.

Vizua'nın JPEG sıkıştırıcı aracı, kenarları ve geçişleri koruyan optimize edilmiş algoritmalar kullanarak bunu otomatik olarak halleder. Format bazında detaylı dönüşüm için kalite kaybetmeden sıkıştırma rehberimize bakın.

Adım 4: Görselleri Verimli Sunun

İyi sıkıştırma işinin yalnızca yarısıdır. Görselleri tarayıcıya nasıl sunduğunuz performans için en az o kadar önemlidir.

Açık boyutlar belirleyin

<img> etiketlerinize her zaman width ve height özelliklerini ekleyin (veya CSS aspect-ratio kullanın). Bu, içeriğin görseller yüklendikçe etrafa kaymasını önler ve doğrudan Cumulative Layout Shift (CLS) puanınızı etkiler.

Ekranın altındaki görsellere tembel yükleme uygulayın

Sayfa ilk yüklendiğinde görünmeyen her görsele loading="lazy" ekleyin. Tarayıcı, kullanıcı yakınına gelene kadar indirmeyi erteler ve ilk sayfa yüklemesinde bant genişliği tasarrufu sağlar.

Hero görselinize öncelik verin

En önemli ekran üstü görseliniz için tam tersini yapın: fetchpriority="high" ekleyin ve loading="lazy" olmadığından emin olun. Google'ın kendi testleri, önceden yüklenen LCP görsellerinin neredeyse mükemmel performans puanları elde ettiğini (75'inci yüzdedilim 364ms), tembel yüklenen LCP görsellerinin ise neredeyse iki kat yavaş olduğunu (720ms) gösteriyor.

Duyarlı görseller kullanın

srcset ve sizes özellikleri, tarayıcının kullanıcının ekran boyutu ve çözünürlüğü için en iyi görsel varyantını seçmesini sağlar. Tek bir <img> etiketinden telefona 400px, tablete 800px ve masaüstüne 1600px genişliğinde görsel sunun.

Adım 5: Denetleyin ve Ölçün

Optimizasyon tek seferlik bir iş değildir. Eklediğiniz her yeni görsel gerileme fırsatıdır.

• PageSpeed Insights: Google'ın PageSpeed Insights aracını önemli sayfalarınızda çalıştırın. LCP puanına ve "Görselleri yeni nesil formatlarda sunun" veya "Görselleri doğru boyutlandırın" önerilerine bakın.
• HTTP Archive incelemesi: Tarayıcınızın geliştirici araçlarında Ağ sekmesini kontrol edin. Boyuta göre sıralayın. 200 KB'yi aşan herhangi bir görsel varsa yeniden boyutlandırılabilir, sıkıştırılabilir veya daha iyi bir formata dönüştürülebilir mi sorusunu sorun.
• Otomatikleştirin: Görsel optimizasyonunu derleme hattınıza ekleyin. Büyük görselleri canlı yayına çıkmadan önce yakalayın.

Hızlı Kontrol Listesi

• Varsayılan format olarak WebP veya AVIF kullanın
• Görselleri gerçek görünüm boyutlarına küçültün (gerekenden geniş değil)
• Sıkıştırma: JPEG/WebP kalite 75-85, AVIF kalite 60-75
• Her <img>'de width ve height belirleyin
• Hero/LCP görselinizde fetchpriority="high"
• Katlamanın altındaki her şeyde loading="lazy"
• Duyarlı dağıtım için srcset/sizes kullanın
• Hero görselleri 200 KB altında, küçük resimler 80 KB altında tutun
• Gereksiz meta veriyi (EXIF, ICC profilleri) kaldırın — EXIF verisi gizlilik rehberimize bakın
• PageSpeed Insights ile düzenli denetim yapın

Sık Sorulan Sorular