Web sitesi görsel optimizasyonu

Görseller, çoğu web sayfasında en çok bayt tutan öğelerdir. İyi haber şu ki görsel optimizasyonu, site hızını artırmanın en anlaşılır ve en az riskli yollarından biridir: kodu baştan yazmadan, yalnızca doğru hazırlanmış dosyalar ve birkaç HTML özelliğiyle bile belirgin kazanç sağlanabilir. Bu rehber, adım adım uygulayabileceğin pratik bir yol haritası sunuyor.

1. Doğru piksel ölçüsü

En sık görülen sorun, kameradan ya da telefondan çıkan 4000 piksellik fotoğrafın sayfada 800 piksellik bir alanda gösterilmesidir. Tarayıcı bu fotoğrafı tamamen indirir ve küçültür; ziyaretçi ise hiç görmeyeceği milyonlarca piksel için bekler.

Ölçüyü belirlerken yüksek yoğunluklu ekranları da hesaba kat. Telefonların ve birçok dizüstü bilgisayarın ekranı, bir CSS pikseli için 2 ya da 3 fiziksel piksel kullanır. Sayfada 800 piksel genişliğinde görünen bir görselin bu ekranlarda keskin görünmesi için yaklaşık 1600 piksel genişliğe ihtiyaç vardır.

Her ziyaretçiye en büyük sürümü göndermek yerine srcset ile birden fazla ölçü sunup tarayıcının seçmesine izin ver. Örnek bir etiket:

• <img src="kapak-800.webp" srcset="kapak-400.webp 400w, kapak-800.webp 800w, kapak-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Görselin açıklaması">

Burada srcset mevcut dosyaları genişlikleriyle listeler, sizes ise görselin sayfada ne kadar yer kaplayacağını söyler. Tarayıcı ekran genişliğine ve piksel yoğunluğuna göre uygun dosyayı indirir. Farklı ölçüleri hazırlamak için Yeniden boyutlandır aracının en uzun kenar modunu kullanabilirsin; dikey ve yatay fotoğraflardan oluşan karışık gruplarda bile her dosyanın uzun kenarı aynı değere iner.

2. Modern format

WebP ve AVIF, fotoğraflarda JPG'ye göre genellikle daha küçük dosya üretir ve güncel tarayıcıların tamamında desteklenir. WebP'ye dönüştür aracı JPG, PNG, AVIF, HEIC, TIFF ve diğer formatları WebP'ye çevirir ve her dosyadaki kazancı gösterir. Hangi formatı ne zaman seçeceğini ve <picture> ile yedekli kullanımı WebP mi AVIF mi rehberinde anlattık.

Logolar, simgeler ve düz çizimler için SVG'yi düşün: vektör olduğu için her ekranda keskindir ve basit grafiklerde çok küçük dosya tutar. Formatın ayrıntıları SVG sayfasında.

3. Doğru kalite ayarı

Kayıplı formatlarda 70–85 aralığı, çoğu fotoğraf için kalite ve boyut arasında iyi bir dengedir. 90'ın üstü dosyayı belirgin şekilde büyütür ama ekranda fark nadiren görülür; 60'ın altında ise ayrıntı kaybı göze batmaya başlar. Kesin değer görsele göre değişir; birkaç deneme yapıp sonucu İki resmi karşılaştır aracında orijinalle yan yana incelemek pratik bir yöntemdir.

Çok sayıda görselle tek tek uğraşmak yerine Toplu sıkıştırma aracını kullanabilirsin. Bir klasördeki dosyaları seçer, çıktı formatını (orijinali koru, JPG ya da WebP), kaliteyi ve en fazla genişliği (3840'tan 800 piksele kadar hazır seçenekler) belirlersin; sonuç tek ZIP olarak iner. Dosya adlarına -small gibi bir son ek de ekleyebilirsin. İşlem tarayıcında yapılır, dosyaların bir sunucuya gönderilmez.

4. Lazy loading: gerektiğinde yükle

Sayfanın altında kalan görsellerin, ziyaretçi oraya kaydırana kadar indirilmesine gerek yoktur. <img> etiketine loading="lazy" eklemek, tarayıcıya bu görselleri ertelemesini söyler. Uzun blog yazılarında ve ürün listelerinde bu basit özellik, ilk yüklemedeki veri miktarını ciddi biçimde azaltabilir.

Önemli bir istisna var: sayfa açılır açılmaz görünen ana görsele, örneğin büyük kapak fotoğrafına, loading="lazy" ekleme. Bu görselin mümkün olduğunca erken yüklenmesi gerekir; geciktirmek sayfanın daha yavaş görünmesine yol açar. Böyle bir görsel için fetchpriority="high" özelliği, tarayıcıya önceliği belirtmenin bir yoludur.

5. width ve height ile kaymayı önle

Görselin boyutu HTML'de belirtilmemişse tarayıcı, görsel inene kadar ona yer ayırmaz. Görsel yüklendiğinde altındaki metin aşağı itilir ve okuyucu kaldığı yeri kaybeder. Bu düzen kayması hem can sıkıcıdır hem de ölçülen bir performans metriğidir.

Çözüm: her <img> etiketine görselin gerçek oranını yansıtan width ve height değerlerini yaz. Duyarlı tasarımda görselin ekrana sığması için CSS'te max-width: 100% ve height: auto kullanmaya devam edebilirsin; modern tarayıcılar bu değerlerden oranı hesaplayıp alanı önceden ayırır.

Core Web Vitals ile bağlantısı

Google'ın Core Web Vitals olarak adlandırdığı ölçümlerden ikisi doğrudan görsellerle ilgilidir:

• LCP (Largest Contentful Paint): Sayfanın görünür alanındaki en büyük öğenin ekrana gelme süresi. Bu öğe birçok sayfada bir görseldir. Google'ın belgelerinde iyi kabul edilen eşik 2,5 saniye veya altıdır.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken oluşan düzen kaymalarının toplam ölçüsü. İyi kabul edilen değer 0,1 veya altıdır. Eksik width ve height değerleri bu ölçümü bozan yaygın sebeplerden biridir.

LCP görselini hızlandırmak için onu doğru ölçüde ve modern formatta sun, lazy loading uygulama ve mümkünse HTML içinde doğrudan <img> olarak ver. Yalnızca CSS arka planı olarak tanımlanan görseller tarayıcı tarafından daha geç keşfedilir.

Kontrol listesi

1. Her görseli, gösterileceği en büyük ölçünün yaklaşık iki katını aşmayacak şekilde boyutlandır.
2. Farklı ekranlar için birkaç ölçü üret ve srcset ile sun.
3. Fotoğrafları WebP'ye, istersen ek olarak AVIF'e çevir; eski tarayıcılar için JPG yedeği tut.
4. Kaliteyi 70–85 aralığında ayarla ve sonucu gözle kontrol et.
5. Logo ve simgelerde SVG ya da renk sayısı azaltılmış PNG kullan.
6. Ekranın altında kalan görsellere loading="lazy" ekle, ana görsele ekleme.
7. Her <img> etiketine width, height ve anlamlı bir alt metni yaz.
8. Fotoğraflardaki gereksiz meta verileri Konum & EXIF sil ile temizle; birkaç kilobayt kazandırır ve konum gibi bilgileri yanlışlıkla yayınlamanı önler.
9. Değişikliklerden sonra sayfayı bir hız ölçüm aracında test et ve LCP öğesinin hangisi olduğunu kontrol et.