0Pricing
Frontend Academy · Ders

Görsel Optimizasyonu: tembel yükleme biçimleri WebP

Görsellere loading=lazy ekleyin, modern WebP ve AVIF biçimlerini sunun, srcset ve sizes ile duyarlı görseller kullanın ve yerleşim kaymasını önlemek için açık genişlik ve yükseklik belirleyin.

Görsel Optimizasyonu: tembel yükleme biçimleri WebP, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Görseller Sayfa Boyutuna Hâkimdir

Ortanca web sayfası yaklaşık 2 MB boyutundadır ve bunun kabaca yarısını görseller oluşturur. Görselleri iyileştirmek, performans üzerinde en büyük etkiyi sağlayan tek çalışmadır.

Modern Biçimler: WebP ve AVIF

WebP, benzer kalitede JPEG'den %25-35 daha küçüktür ve tüm modern tarayıcılar tarafından desteklenir. AVIF daha da küçüktür (%50 oranında azalma sağlar), ancak kodlaması daha yavaştır. Geri dönüş seçeneğiyle ikisini birlikte kullanın.

picture Öğesi

Destekleniyorsa AVIF, ardından WebP ve son geri dönüş seçeneği olarak JPEG sunmak için <picture> kullanın.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Yerel Gecikmeli Yükleme

Sayfanın alt bölümündeki görsellere loading="lazy" ekleyin. Tarayıcı, görsel görünüm alanına yaklaşana kadar yüklemeyi erteler; bunun için JavaScript gerekmez.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Kaynak Kümeleri ve Boyutlarla Duyarlı Görseller

Küçük ekranlara daha küçük görseller sunun. srcset, genişlikleriyle birlikte aday görselleri listeler; sizes ise tarayıcıya her kesme noktasında görselin ne kadar genişlikte görüntülendiğini söyler.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Açık Genişlik ve Yükseklik Belirtmenin Önemi

Tarayıcı, genişlik/yükseklik özniteliklerine göre alan ayırır ve görsel geldiğinde oluşacak düzen kaymasını önler. Modern tarayıcılar, en-boy oranını bu özniteliklerden otomatik olarak hesaplar.

Asenkron Kod Çözme

Tarayıcının görselin kod çözümünü ana iş parçacığının dışında yapmasına ve böylece diğer içerikleri ekrana çizmek için ana iş parçacığını serbest bırakmasına izin vermek üzere decoding="async" ekleyin.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

Görsel CDN'leri

Görsel CDN'leri (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) görselleri anında dönüştürür: yeniden boyutlandırır, WebP/AVIF biçimine dönüştürür, sıkıştırır ve uç önbelleklerden sunar.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Next.js Görsel Bileşeni

Next.js'in <Image> bileşeni, duyarlı kaynak kümelerini, WebP dönüştürmesini, gecikmeli yüklemeyi ve bulanık yer tutucuyu kullanıma hazır şekilde yönetir.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

JPEG ve PNG'leri Sıkıştırma

WebP'ye geçemiyorsanız en azından sıkıştırma yapın: tek seferlik görseller için Squoosh'u (squoosh.app), toplu işleme için ImageOptim'i veya derleme betiğinde sharp'ı kullanın.

Simgeler ve Logolar için SVG

Simgeler, logolar ve her türlü vektör çizimi için SVG kullanın. SVG'ler kusursuz biçimde ölçeklenir, çok küçüktür ve CSS ile biçimlendirilebilir. Ek bir HTTP isteğini önlemek için küçük SVG'leri satır içine yerleştirin.

Hızlı Kontrol

Tarayıcıya bir görseli görünüm alanına yaklaşana kadar yüklemeyi ertelemesini söyleyen HTML özniteliği hangisidir?

Özet: Görsel İyileştirme

picture öğesi aracılığıyla modern biçimleri (AVIF, WebP) kullanın. Sayfanın alt bölümünde loading="lazy", ana görselde fetchpriority="high" kullanın. CLS'yi önlemek için genişlik ve yüksekliği açıkça belirtin. Duyarlı görseller için srcset/sizes kullanın. Görsel CDN'leri dönüştürme işlemlerini otomatikleştirir. Next.js Image tüm bunları yönetir. Simgeler için SVG kullanın.

Sıkça Sorulan Sorular

“Görsel Optimizasyonu: tembel yükleme biçimleri WebP” dersi ücretsiz mi?

Evet — “Görsel Optimizasyonu: tembel yükleme biçimleri WebP” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Görsel Optimizasyonu: tembel yükleme biçimleri WebP” dersinde ne öğreneceğim?

Görsellere loading=lazy ekleyin, modern WebP ve AVIF biçimlerini sunun, srcset ve sizes ile duyarlı görseller kullanın ve yerleşim kaymasını önlemek için açık genişlik ve yükseklik belirleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Görsel Optimizasyonu: tembel yükleme biçimleri WebP” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Temel Web Verileri: LCP FID CLS
  2. Lighthouse Denetimleri ve Puanlama
  3. Görsel Optimizasyonu: tembel yükleme biçimleri WebP
  4. Kod Bölme ve Tembel Rotalar
← Frontend Academy Sayfasına Dön