Web Sitelerinde Görsel Optimizasyonu: Lazy Loading, WebP ve AVIF ile Sayfa Hızlandırma Rehberi

Konu İçeriği — Hızlı Bakış ( cPanel / Web • ⏱ ~7 dk okuma • Kod: CSS)
01. 1. Lazy Loading Nedir?
02. 2. Lazy Loading Her Görselde Kullanılmalı mı?
03. 3. WebP ve AVIF Görsel Formatları Nedir?
04. 4. HTML ile AVIF, WebP ve JPEG Desteği Sağlama
05. 5. Mobil Cihazlara Göre Farklı Görsel Boyutları Kullanma
06. 6. Görsellerin Genişlik ve Yükseklik Değerlerini Belirtme

Genişletmek için tıkla ...

Web sitelerinin açılış hızını etkileyen en önemli faktörlerden biri, kullanılan görsellerin boyutu ve yüklenme şeklidir. Özellikle yüksek çözünürlüklü JPEG ve PNG dosyalarının optimize edilmeden kullanılması, sayfaların geç açılmasına ve mobil kullanıcıların gereksiz veri tüketmesine neden olabilir.

Günümüzde görselleri hızlandırmak için kullanılan en etkili yöntemler arasında Lazy Loading (tembel yükleme), WebP ve AVIF gibi modern görsel formatları, duyarlı görseller ve doğru kaynak önceliklendirmesi bulunuyor.

Bu rehberde görsel optimizasyonunun nasıl yapıldığını ve HTML üzerinden uygulanabilecek yöntemleri inceleyeceğiz.

# 1. Lazy Loading Nedir?

Lazy Loading, web sayfasındaki görsellerin tamamını aynı anda yüklemek yerine, kullanıcı ilgili bölüme yaklaştığında yüklenmesini sağlayan bir tekniktir.

Örneğin 30 görsel bulunan bir sayfaya giriş yapıldığında, tüm görsellerin hemen indirilmesi yerine ekranın dışında kalan görsellerin indirilmesi ertelenebilir.

Bu yöntem sayesinde:

• İlk sayfa yüklenmesinde indirilen veri miktarı azalır.
• Gereksiz ağ istekleri ertelenir.
• Mobil kullanıcıların veri tüketimi azaltılabilir.
• Tarayıcı önemli içeriklere daha fazla kaynak ayırabilir.
• Doğru uygulandığında sayfanın algılanan açılış hızı iyileşebilir.

Lazy Loading kullanımı oldukça basittir.


Burada kullanılan loading="lazy" özelliği, tarayıcıya görselin yüklenmesini ihtiyaç duyulana kadar ertelemesini söyler.

Chrome, Firefox, Safari ve Edge gibi modern tarayıcılar bu özelliği yerel olarak desteklemektedir. Bu nedenle standart görsel yüklemeleri için ayrıca JavaScript kütüphanesi kullanmak çoğu zaman gerekli değildir.

# 2. Lazy Loading Her Görselde Kullanılmalı mı?

Hayır. Lazy Loading kullanımında en sık yapılan hatalardan biri, sayfadaki bütün görsellere bu özelliğin eklenmesidir.

Özellikle sayfanın en üstünde bulunan büyük banner, kapak görseli veya ana ürün görselinin geç yüklenmesi, sayfanın açılış performansını olumsuz etkileyebilir.

Google'ın Core Web Vitals metriklerinden biri olan Largest Contentful Paint (LCP), sayfanın görünür alanındaki en büyük içerik öğesinin ne kadar sürede görüntülendiğini ölçer.

Bu nedenle ana görsellerde Lazy Loading yerine yüksek indirme önceliği kullanılabilir.


Burada:

• loading="eager": Görselin normal şekilde, ertelenmeden yüklenmesini sağlar.
• fetchpriority="high": Tarayıcıya görselin yüksek öncelikli olduğunu bildirir.

fetchpriority="high" özelliğini yalnızca gerçekten kritik görseller için kullanmak gerekir. Çok sayıda görsele yüksek öncelik verilmesi performans avantajını azaltabilir.

# 3. WebP ve AVIF Görsel Formatları Nedir?

Geleneksel JPEG ve PNG formatları günümüzde kullanılmaya devam etse de WebP ve AVIF formatları, birçok görselde benzer görüntü kalitesini daha düşük dosya boyutuyla sunabilmektedir.

WebP:

Google tarafından geliştirilen modern bir görsel formatıdır. Kayıplı ve kayıpsız sıkıştırma yöntemlerini destekler. Ayrıca şeffaflık ve animasyon desteği de bulunmaktadır.

AVIF:

AV1 görüntü kodlamasını temel alan modern bir görsel formatıdır. Özellikle fotoğraf ve karmaşık görsellerde yüksek sıkıştırma verimliliği sunabilir.

Genel format karşılaştırması:


WebP ve AVIF formatları çoğu fotoğrafta geleneksel JPEG formatına göre daha küçük dosya boyutları sağlayabilir. Ancak elde edilen kazanç görselin içeriğine, sıkıştırma ayarlarına ve seçilen kalite seviyesine göre değişir.

# 4. HTML ile AVIF, WebP ve JPEG Desteği Sağlama

Modern görsel formatlarını kullanırken eski tarayıcılarla uyumluluğu korumak için HTML picture etiketi kullanılabilir.


Bu kullanımda tarayıcı, desteklediği ilk uygun formatı seçer.

AVIF destekleyen tarayıcı AVIF, yalnızca WebP destekleyen tarayıcı WebP dosyasını kullanabilir. Bu formatları desteklemeyen tarayıcılar ise JPEG görselini yükleyebilir.

Böylece modern formatlardan faydalanırken geriye dönük uyumluluk da sağlanmış olur.

Not: Yukarıdaki örnek ekranın alt kısımlarındaki görseller içindir. Sayfanın ana LCP görselinde loading="lazy" kullanılmamalıdır.

# 5. Mobil Cihazlara Göre Farklı Görsel Boyutları Kullanma

Bir web sitesinde masaüstü kullanıcıları için hazırlanan 1600 piksel genişliğindeki görselin, küçük ekranlı bir telefona aynı boyutta gönderilmesi gereksiz veri kullanımına neden olabilir.

HTML'in srcset ve sizes özellikleriyle tarayıcının ekran genişliğine ve piksel yoğunluğuna uygun görseli seçmesi sağlanabilir.


Burada tarayıcı, görselin tahmini görüntülenme genişliğine ve cihazın piksel yoğunluğuna göre uygun dosyayı seçer.

Böylece her kullanıcıya aynı büyük dosyanın gönderilmesi önlenebilir.

# 6. Görsellerin Genişlik ve Yükseklik Değerlerini Belirtme

Görseller optimize edilirken dikkat edilmesi gereken başka bir konu da sayfa düzeninin kaymasını önlemektir.

Bir görselin genişlik ve yükseklik değerleri belirtilmediğinde, görsel yüklenirken sayfadaki metinler ve diğer öğeler yer değiştirebilir.

Bu durum Google'ın Cumulative Layout Shift (CLS) metriğini olumsuz etkiler.

Örnek:


Responsive tasarımlarda ise aşağıdaki CSS kullanılabilir.


Bu şekilde görsel, bulunduğu alana uyum sağlayabilir ve HTML'de belirtilen en-boy oranı korunarak sayfa kaymaları azaltılabilir.

# 7. Görselleri Yüklemeden Önce Sıkıştırma

Görselleri WebP veya AVIF formatına dönüştürmek tek başına yeterli değildir.

Görselin çözünürlüğü ve sıkıştırma seviyesi de önemlidir.

Örneğin bir içerik alanında en fazla 800 piksel genişliğinde gösterilecek görsel için 4000 piksel genişliğinde dosya kullanmak çoğu durumda gereksizdir. Ancak yüksek piksel yoğunluklu ekranlar için daha büyük alternatiflerin sunulması faydalı olabilir.

Görsel sıkıştırma ve dönüştürme işlemlerinde kullanılabilecek araçlar:

• Squoosh.
• TinyPNG.
• ImageMagick.
• Sharp.

Ayrıca görsellerin gereksiz EXIF verilerini temizlemek hem dosya boyutunu azaltabilir hem de fotoğraflarda bulunabilecek konum gibi kişisel bilgilerin yanlışlıkla paylaşılmasını önleyebilir.

# 8. CDN ve Önbellekleme ile Görselleri Hızlandırma

Görsel optimizasyonunun bir diğer önemli aşaması CDN ve önbellekleme kullanımıdır.

CDN (Content Delivery Network), web sitesinin görsellerini farklı coğrafi konumlardaki sunuculardan ziyaretçilere ulaştırabilen bir içerik dağıtım ağıdır.

Özellikle farklı ülkelerden ziyaretçi alan sitelerde, kullanıcıya daha yakın bir sunucudan içerik sunulması gecikmeyi azaltabilir.

Ayrıca doğru yapılandırılmış tarayıcı önbelleklemesi sayesinde kullanıcıların daha önce indirdiği görseller tekrar indirilmek zorunda kalmayabilir.

Cloudflare gibi servisler CDN ve önbellekleme konusunda kullanılabilir. Görsel dönüştürme ve otomatik boyutlandırma gibi özelliklerin ise kullanılan hizmete ve plana göre değişebileceği unutulmamalıdır.

# 9. WordPress Sitelerde Görsel Optimizasyonu

WordPress kullananlar, görsel optimizasyonunun önemli bir bölümünü eklentiler aracılığıyla gerçekleştirebilir.

Kullanılabilecek çözümler arasında:

• ShortPixel
• Imagify
• EWWW Image Optimizer
• Smush
• Optimole
• NitroPack

bulunmaktadır.

Bu araçların desteklediği özelliklere ve yapılandırmasına bağlı olarak görseller sıkıştırılabilir, modern formatlara dönüştürülebilir ve uygun boyutlarda sunulabilir.

WordPress'in yeni sürümleri responsive görseller ve yerel lazy loading gibi optimizasyonlara zaten sahiptir. Bu nedenle birden fazla optimizasyon eklentisini aynı anda kullanmadan önce mevcut özelliklerin kontrol edilmesi önemlidir.

Özellikle ana kapak görselinin yanlışlıkla lazy loading ile yüklenmediğinden emin olunmalıdır.

# 10. Görsel Optimizasyonunun Başarısı Nasıl Ölçülür?

Yapılan optimizasyonların işe yarayıp yaramadığını anlamak için sayfa performansını ölçmek gerekir.

Bunun için kullanılabilecek araçlar:

Google PageSpeed Insights.

Google Lighthouse:

Chrome geliştirici araçları içerisinde kullanılabilir.

DebugBear.

Chrome DevTools:

Network bölümünde indirilen görsellerin dosya boyutları, formatları ve yüklenme zamanları incelenebilir.

Özellikle şu metrikler kontrol edilmelidir:

• LCP: En büyük görünür içerik öğesinin görüntülenme süresi.
• CLS: Sayfadaki beklenmedik düzen kaymaları.
• INP: Kullanıcı etkileşimlerine verilen görsel yanıtın gecikmesi.
• Toplam aktarılan veri miktarı ve görsel isteklerinin sayısı.

Optimizasyon öncesinde ve sonrasında aynı sayfayı benzer koşullarda test etmek, yapılan değişikliklerin etkisini daha doğru değerlendirmeye yardımcı olur.

# Sonuç

Görsellerin optimize edilmesi, web sitesi performansını iyileştirmek için uygulanabilecek önemli çalışmalardan biridir.

Lazy Loading ile ekran dışında kalan görsellerin yüklenmesi ertelenebilir, WebP ve AVIF ile dosya boyutları azaltılabilir, srcset sayesinde farklı ekranlara uygun çözünürlükler sunulabilir.

Bununla birlikte en önemli nokta, her görseli aynı yöntemle optimize etmeye çalışmamaktır.

Sayfanın üst bölümündeki önemli görseller öncelikli yüklenmeli, ekran dışında kalan içerikler gerektiğinde yüklenmeli ve bütün görseller için doğru boyutlandırma yapılmalıdır.

Bu yöntemlerin doğru kombinasyonu hem mobil hem de masaüstü kullanıcıları için daha hızlı ve stabil bir web deneyimi sağlayabilir.

Özet Değerlendirme: Web sitelerinin açılış hızını etkileyen en önemli faktörlerden biri, kullanılan görsellerin boyutu ve yüklenme şeklidir. Özellikle yüksek çözünürlüklü JPEG ve PNG dosyalarının optimize edilmeden kullanılması, sayfaların geç açılmasına ve mobil kullanıcıların gereksiz veri tüke...

Genişletmek için tıkla ...

Sıkça Sorulan Sorular (SSS)