Web Siteniz Icin Gorsel Optimizasyonu: 2026 Icin Eksiksiz Rehber

Gorseller ortalama bir web sayfasinin toplam agirliginin yaklasik %40'ini olusturur. Bunlari dogru sekilde optimize edin ve sayfa boyutunuzu yariya dusurabilir, 2,5 saniyenin altinda Largest Contentful Paint elde edebilir ve arama sonuclarinda daha ust siralara cikabilirsiniz. Iste surecin tamamini adim adim.

Gorsel Optimizasyonu Neden Her Zamankinden Onemli?

HTTP Archive verilerine gore medyan web sayfasi mobilde yaklasik 2,5 MB agirliginda ve gorseller bunun yaklasik 1 MB'ini olusturuyor. Google'in Core Web Vitals olcumlerinden biri olan Largest Contentful Paint (LCP) en buyuk gorunur elementin ne kadar hizli yuklendigini dogrudan olcer. Cogu sayfada bu element bir gorseldir.

Referans deger: 2,5 saniye veya altinda LCP "iyi" sayilir. 4 saniye ustu "zayif" sinifindadir. Gorsel tabanli LCP elemanlarinin 75'inci yuzdedilimi, metin tabanli LCP sayfalarina gore neredeyse iki kat yavasdir. Iyi optimize edilmis bir hero gorsel ile sismis bir gorsel arasindaki fark, genellikle yesil ve kirmizi Core Web Vitals puani arasindaki farkdir.

Adim 1: Dogru Formati Secin

Format secimi dosya boyutu uzerindeki en buyuk etkiye sahiptir. Gercek sikistirma karsilastirmalarina dayanan ana web formatlari:

Cogu web sitesi icin WebP en guvenli varsayilandir. Hem fotograflari hem grafikleri iyi isler, agresif sikistir ve her yerde calisir. Altyapiniz destekliyorsa, <picture> elemani ile AVIF'i birincil olarak sunun ve WebP'yi yedek olarak kullanin. Vizua ile JPG'yi WebP'ye veya AVIF'e donusturme yapabilirsiniz — yukleme gerekmez, her sey tarayicinizda calisir.

Daha detayli karsilastirma icin JPEG vs PNG analizimize ve kayipli vs kayipsiz sikistirma aciklamamiza bakin.

Adim 2: Gercek Gorunum Boyutlarina Yeniden Boyutlandirin

Kameranizdan alinan 4000 x 3000 piksellik bir fotograf, web sitenizde 800 x 600 olarak gosterildiginde piksellerinin yaklasik %80'ini bosa harcar. Bu gorunmez pikseller yine de bant genisligi ve isleme suresi maliyetine neden olur.

Kural: gorselleri goruntuleme boyutlarinda veya yakininda sunun. Standart ekranda piksel boyutlarini tam olarak eslestirin. 2x Retina ekranda netlık icin gorunum genisliginin iki kati boyutunda gorsel sunun — ama daha fazla degil.

Pratik hedefler:

• Tam genislik hero: 1600-1920px genislik (Retina icin 2x'e kadar)
• Blog icerik gorseli: 800-1200px genislik
• Kucuk resim: 300-400px genislik
• Avatar: 64-128px (2x icin 256px'e kadar)

Vizua'nin gorsel boyutlandirma araci ile gorselleri sikistirmadan once ihtiyaciniz olan genislige kucultun. Bu tek basina dosya boyutunu %70-90 azaltabilir.

Adim 3: Dogru Kalite Ayariyla Sikistirin

Format secimi ve yeniden boyutlandirma sonrasi, sikistirma kalan tasarrufu sikacaginiz adimdir. Kalite kaydirici cogu kisinin dusundugunden daha onemlidir — kalite ile dosya boyutu arasindaki iliski dogrusal degildir. JPEG kalitesini 100'den 80'e dusurmek muazzam alan tasarrufu saglar; 80'den 60'a dusurmek ise gorunur kusurlarla azalan getiri saglar.

Onerilen kalite ayarlari:

• JPEG: 75-85 — fotograflar icin ideal aralik. Kalite 80'de tipik bir JPEG, gorunur fark olmadan sikistirilmamis orijinalden %60-80 daha kucuktur.
• WebP: 75-80 — JPEG 85 ile esit gorsel kalite, daha kucuk dosya.
• AVIF: 60-75 — codec verimlilig sayesinde daha dusuk sayilar bile harika gorunur.
• PNG: Maksimum sikistirma seviyesi kullanin (kayipsiz). Ek tasarruf icin grafik izin verdiginde 8-bit'e (256 renk) dusurun.

Vizua'nin JPEG sikistirici araci, kenarlari ve gecisleri koruyan optimize edilmis algoritmalar kullanarak bunu otomatik olarak halleder. Format bazinda detayli donusum icin kalite kaybetmeden sikistirma rehberimize bakin.

Adim 4: Gorselleri Verimli Sunun

Iyi sikistirma isinin yalnizca yarisidir. Gorselleri tarayiciya nasil sundudunuz performans icin en az o kadar onemlidir.

Acik boyutlar belirleyin

<img> etiketlerinize her zaman width ve height ozelliklerini ekleyin (veya CSS aspect-ratio kullanin). Bu, icerigin gorseller yuklendikce etrafa kaymasi olan duzwen kaymmasini onler ve dogrudan Cumulative Layout Shift (CLS) puaninizi etkiler.

Ekranin altindaki gorsellere tembel yukleme uygulayin

Sayfa ilk yuklendiginde gorunmeyen her gorsele loading="lazy" ekleyin. Tarayici, kullanici yakinina gelene kadar indirmeyi erteler ve ilk sayfa yuklemesinde bant genisligi tasarrufu saglar.

Hero gorselinize oncelik verin

En onemli ekran ustu gorseliniz icin tam tersini yapin: fetchpriority="high" ekleyin ve loading="lazy" olmadigindan emin olun. Google'in kendi testleri, onceden yuklenen LCP gorsellerinin neredeyse mukemmel performans puanlari elde ettigini (75'inci yuzdedilim 364ms), tembel yuklenen LCP gorsellerinin ise neredeyse iki kat yavasboldugunu (720ms) gosteriyor.

Duyarli gorseller kullanin

srcset ve sizes ozellikleri, tarayicinin kullanicinin ekran boyutu ve cozunurlugu icin en iyi gorsel varyantini secmesini saglar. Tek bir <img> etiketinden telefona 400px, tablete 800px ve masaustune 1600px genisliginde gorsel sunun.

Adim 5: Denetleyin ve Olcun

Optimizasyon tek seferlik bir is degildir. Eklediginiz her yeni gorsel gerileme firsatidir.

• PageSpeed Insights: Google'in PageSpeed Insights aracini onemli sayfalarinizda calistirin. LCP puanina ve "Gorselleri yeni nesil formatlarda sunun" veya "Gorselleri dogru boyutlandirin" onerillerine bakin.
• HTTP Archive incelemesi: Tarayicinizin gelistirici araclarinda Ag sekmesini kontrol edin. Boyuta gore siraalayin. 200 KB'yi asan herhangi bir gorsel varsa yeniden boyutlandirilabilir, sikistirilabilir veya daha iyi bir formata donusturulebilir mi sorusunu sorun.
• Otomtiklesstirin: Gorsel optimizasyonunu derleme hattiniza ekleyin. Buyuk gorselleri canli yayina cikmadan once yakalay in.

Hizli Kontrol Listesi

• Varsayilan format olarak WebP veya AVIF kullanin
• Gorselleri gercek gorunum boyutlarina kucultun (gerekendn genis degil)
• Sikistirma: JPEG/WebP kalite 75-85, AVIF kalite 60-75
• Her <img>'de width ve height belirleyin
• Hero/LCP gorselinizde fetchpriority="high"
• Katlamanin altindaki her seyde loading="lazy"
• Duyarli dagitim icin srcset/sizes kullanin
• Hero gorselleri 200 KB altinda, kucuk resimler 80 KB altinda tutun
• Gereksiz meta veriyi (EXIF, ICC profilleri) kaldirin — EXIF verisi gizlilik rehberimize bakin
• PageSpeed Insights ile duzenli denetim yapin

Sik Sorulan Sorular