Optimize Edilmemis Görsellerin Gerçek Maliyeti

Gecen Kasim ayinda, en az uc aydir production'da calisan on iki JekCMS sitesini denetledim. Her birinde ayni sorun vardi: görseller sayfa agirligina en büyük katkiyi sagliyordu ve cogu site, 480px genisliginde bir küçük resmin yeterli olacagi yerlerde tam cozunurluklu orijinalleri sunuyordu. Bir site — 340 yayinli bir hobi blogu — ana sayfada 8.7MB görsel yukluyordu cunku yazi kartlari orijinal 4000x3000 JPEG yüklemelerini kullaniyordu.

Bu rehberdeki teknikleri on iki sitenin tamaminda uyguladiktan sonra, ortalama sayfa agirligi 4.2MB'dan 680KB'a dustu ve ortalama Largest Contentful Paint mobilde 4.1 saniyeden 1.6 saniyeye iyilesti. Bunlar secilmis rakamlar degil — on ikisinin ortanca degerleri.

Bu rehber, optimizasyon surecinde görsel performansi hakkinda ogrendigimiz her seyi, JekCMS uygulamasindan gerçek kodlarla kapsamaktadir.

Native Lazy Loading: %90 Cozum

loading="lazy" ozelligi Chrome'da surum 76'dan, Firefox'ta 75'ten ve Safari'de 15.4'ten beri desteklenmektedir. Bu, 2026 basi itibariyla kuresel tarayıcı trafiginin yaklasik %94'unu kapsar. Bir görsel etiketine eklemek cok basittir:

<img src="/uploads/images/2026/03/yazi-küçükresim.avif"
     alt="Makale küçük resmi"
     width="480" height="300"
     loading="lazy">

Bunun yaptigi: tarayıcı, görsel gorunum alanindan belirli bir mesafe icine girene kadar yüklemeyi erteler (Chrome'da genellikle 1250px, ancak bu degisir). Sayfanin ust kisimindaki görseller hemen yuklenir. Daha asagidaki görseller kullanıcı kaydırdikca yuklenir.

Surekli gordugum kritik hata: geliştiricilerin hero görsel ve ilk görünen içerik görseli dahil sayfadaki her görsele loading="lazy" eklemesidir. Bu aslinda performansa zarar verir cunku tarayıcınin yüklemeye karar vermeden once elemanin konumunu degerlendirmesi gerekir ve LCP elemaniza gereksiz gecikme ekler.

Genel kural: Baslangic gorunum alaninda görünen görselleri asla tembel yüklemeyin. Tipik bir blog düzeni için bu, ilk 1-3 görselin istekli olarak yuklenmesi gerektigi (varsayilan davranis) ve asagidaki her seyin loading="lazy" almasi anlamina gelir.

IntersectionObserver Yedegi

Native lazy loading'i desteklemeyen geriye kalan %6'lik tarayıcılar için (cogunlukla eski iOS cihazlari ve bazi gomulu webview'ler), yedek olarak IntersectionObserver kullaniyoruz. JekCMS'in assets/js/lazy-load.js dosyasindan uygulama:

if (!("loading" in HTMLImageElement.prototype)) {
    const lazyImages = document.querySelectorAll('img[data-src]');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                if (img.dataset.srcset) {
                    img.srcset = img.dataset.srcset;
                }
                observer.unobserve(img);
            }
        });
    }, { rootMargin: '200px 0px' });
    lazyImages.forEach(img => observer.observe(img));
}

Buradaki onemli detay ilk satirdaki özellik algilamasidir. Once native destegi kontrol ediyoruz ve yalnizca tarayıcı ihtiyac duyarsa observer'i baslatiyoruz. Bu, loading="lazy" işlemini yerel olarak zaten yapan modern tarayıcılarda görsellerin cift yuklenmesini onler.

Width ve Height: 30 Saniyede CLS Duzeltmesi

Cumulative Layout Shift (CLS), sayfa yuklenirken icerigin ne kadar hareket ettigini olcer. Acik boyutlari olmayan görseller CLS sorunlarinin bir numarali nedenidir cunku tarayıcı, görsel indirilip dosya basliklarini okuyuncaya kadar ne kadar alan ayirmasi gerektigini bilemez.

Duzeltme son derece basittir — her <img> etiketine width ve height özellikleri ekleyin:

<!-- KOTU: Boyut yok, duzen kaymasi yapar -->
<img src="foto.avif" alt="Foto">

<!-- IYI: Tarayici tam alani ayirir -->
<img src="foto.avif" alt="Foto" width="800" height="500">

Tarayici width ve height gordugunde, en boy oranini (800:500 = 16:10) hesaplar ve görsel yuklenmeden once duzende tam o miktarda alan ayirir. Kayma olmaz.

Aspect-Ratio CSS: Modern Yaklasim

aspect-ratio CSS ozelligi (Chrome 88, Firefox 89, Safari 15'ten beri desteklenir), özellikle render sirasinda tam boyutlari bilmediginizde görseller için alan ayirmanin daha temiz bir yolunu sağlar.

Bunu JekCMS'de görsel kaplari için yaygin olarak kullaniyoruz:

.card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}

.gallery-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card-image img,
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

aspect-ratio ozelligi object-fit: cover ile birlestirildiginde, kap gerçek görsel boyutlarindan bağımsız olarak her zaman seklini korur. Bir portre ve bir manzara fotosu ayni kart düzeninde dogru sekilde görüntulenir ve tarayıcı ilk boyamadan itibaren dogru miktarda alan ayirir.

LQIP: Dusuk Kaliteli Görsel Yer Tutuculari

LQIP, tam surum yuklenirken görselin küçük, bulanik bir surumunu gosterir. Algisa bir numaradir — kullanıcı hemen son görsele benzeyen bir sey gorur ve gerçek yükleme süresi ayni olsa bile sayfa daha hizli hissedilir.

Uc yaygin LQIP yaklasimi vardir:

  • Duz renk: Baskin rengi cikarip arka plan olarak kullanin. Basit, sifir bayt ekler.
  • BlurHash: Bulanik bir degradeye cozumlenen 20-30 karakterlik bir dize. Duz renkten daha iyi görünür ancak cozumlemek için JavaScript gerektirir.
  • Kucuk görsel: Görselin 20x12 piksellik surumu, base64 kodlanmis satir ici. Görsel başına yaklasik 200-400 bayt.

JekCMS'de duz renk yaklasimini sectik cunku HTML'ye sifir ekstra bayt ekler ve JavaScript gerektirmez. Görsel yuklendiginde, Media sinifi baskin rengi cikarir ve veritabanında saklar. Şablonda arka plan rengi olarak kullanilir ve görsel onun uzerine yuklenir. Duzen kaymasi yok, JavaScript bagimliligi yok, ekstra ag istegi yok.

fetchpriority: Tarayiciya Neyin Onemli Oldugunu Soylemek

fetchpriority ozelligi (Chrome 102, Edge 102 ve Safari 17.2'den beri desteklenir), tarayıcıya hangi kaynaklarin once indirilmesi gerektigini belirtmenizi sağlar. LCP görseli için — genellikle hero görsel veya ilk görünen yazi karti görseli — bu, Largest Contentful Paint'ten 200-400ms düşürur.

JekCMS'de sayfa başına tam olarak bir görsele fetchpriority="high" atiyoruz — LCP elemani. Ana sayfada bu one cikan yazi görselidir. Tekil yazi sayfasinda ustteki one cikan görseldir. Arsiv sayfasinda ilk yazi karti görselidir.

JekCMS Picture Elemani: AVIF/WebP ve Yedek

AVIF, tipik olarak esdeger görsel kalitesinde WebP'den %30-50 ve JPEG'den %60-80 daha küçük dosyalar uretir. Ancak AVIF destegi hala yetisiyor — Safari yalnizca 16.1 surumunde tam destek ekledi ve bazi eski Android cihazlar desteklemiyor.

Cozumumuz birden fazla kaynaga sahip <picture> elemanidir. Tarayici destekledigi ilk formati secer: varsa AVIF, sonra WebP, son care olarak JPEG. Pratikte trafigimizin yaklasik %87'si AVIF, %11'i WebP aliyor ve %2'si JPEG'e geri donuyor (Subat 2026 sunucu kayitlarimiza dayanarak).

JekCMS bu varyantlari yükleme sirasinda otomatik olarak oluşturur. Media sinifi her yükleme için uc format ve uc boyut oluşturur, yuklenen görsel başına 9 dosya olusur.

Etkiyi Olcmek: Gerçek PageSpeed Sayilari

Optimize ettigimiz on iki siteden ucunun gerçek oncesi/sonrasi metrikleri. Tum testler mobil on ayariyla PageSpeed Insights'ta yapildi.

Site A (Haber blogu, 2800 yazi):

  • Performans puani: 38'den 89'a
  • LCP: 6.2s'den 1.8s'ye
  • CLS: 0.42'den 0.01'e
  • Sayfa agirligi: 5.1MB'dan 720KB'a

Site B (Hobi blogu, 340 yazi):

  • Performans puani: 41'den 92'ye
  • LCP: 4.8s'den 1.4s'ye
  • CLS: 0.31'den 0.00'a
  • Sayfa agirligi: 8.7MB'dan 580KB'a

Site C (Finans blogu, 1200 yazi):

  • Performans puani: 52'den 91'e
  • LCP: 3.9s'den 1.6s'ye
  • CLS: 0.18'den 0.02'ye
  • Sayfa agirligi: 3.4MB'dan 640KB'a

CLS iyileştirmeleri neredeyse tamamen width/height özellikleri ve aspect-ratio CSS eklemekten geldi. LCP iyileştirmeleri AVIF donusumu, dogru tembel yükleme (LCP görselini tembel yüklememek) ve fetchpriority birlesiminden geldi.

Kacinilmasi Gereken Yaygin Hatalar

  • LCP görselini tembel yükleme. Bu, en onemli görsel elemanizi geciktirir. Bunun yerine fetchpriority="high" kullanin.
  • Native çalışırken JavaScript tabanli lazy loading kullanma. Ekstra JavaScript ekstra ayristirma süresi demektir. Native lazy loading daha hizlidir cunku tarayıcı bunu dahili olarak yonetir.
  • Width/height'i CSS'de ama HTML özelliklerinde ayarlamamak. Tarayicinin CSS yuklenmeden once en boy oranini hesaplamak için HTML özelliklerine ihtiyaci vardir.
  • AVIF'i yedeksiz sunma. Trafigimizin yaklasik %2'si hala AVIF'i cozemez. Her zaman <picture> elemani icinde WebP veya JPEG yedegi ekleyin.
  • Kucuk resimler için devasa görseller kullanma. 400x250 küçük resim için 4000x2500 kaynak gerekmez. Dogru boyut varyantini kullanin.

Görsel optimizasyonu cumleci bir is degildir, ancak performans kazanimlari büyüktur ve hemen olculebilir. Bu rehberdeki her seyi uygularsaniz, sitenizin ne kadar görsel ağırlıkli olduguna bagli olarak PageSpeed Insights'taki Performans puaninizda %40-70 iyilesme gormelisiniz.