@sveltejs/enhanced-img ile Görselleri İyileştirme
enhanced:img bileşeniyle doğru boyutlandırılmış, yeni nesil görseller sunun.
@sveltejs/enhanced-img ile Görselleri İyileştirme, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. 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, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Görsel Optimizasyonu
@sveltejs/enhanced-img eklentisi, derleme sırasında duyarlı ve modern biçimli görseller oluşturur.
Yükleme
Geliştirme bağımlılıklarına ekleyin ve Vite yapılandırmasına kaydedin.
npm install -D @sveltejs/enhanced-imgVite'ı Yapılandırma
Eklentiyi vite.config.js dosyasına ekleyin.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]Component'i Kullanma
Özel sorguyla bir görseli içe aktarın ve <enhanced:img> kullanın.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />Otomatik srcset
Eklenti, srcset için birden çok boyut ve biçim (AVIF, WebP) oluşturur.
Tembel Yükleme
Ekranın alt kısmında bulunan görseller için loading="lazy" ekleyin.
<enhanced:img src={Hero} alt="..." loading="lazy" />En-Boy Oranı
Eklenti, düzen kaymalarını önlemek için genişlik ve yükseklik bilgilerini içerir.
CDN Barındırma
Dinamik görseller için çalışma zamanında yeniden boyutlandırma amacıyla Cloudinary, Imgix veya Vercel'in Görsel Optimizasyonu'nu değerlendirin.
Modern Biçimler
AVIF ve WebP, JPEG/PNG'ye kıyasla dosya boyutlarını %30-70 oranında azaltır.
Performans Etkisi
Görsel optimizasyonu, içerik sitelerinde çoğu zaman performans açısından elde edilebilecek en büyük tek kazanımdır.
Derleme Maliyeti
Görsel işleme, derleme sürelerini uzatır. Artımlı derlemeler için çıktıyı önbelleğe alın.
Hızlı Kontrol
enhanced-img ne oluşturur?
Özet
Modern biçimler ve srcset ile derleme sırasında duyarlı görsel oluşturmak için @sveltejs/enhanced-img kullanın.
Sıkça Sorulan Sorular
“@sveltejs/enhanced-img ile Görselleri İyileştirme” dersi ücretsiz mi?
Evet — “@sveltejs/enhanced-img ile Görselleri İyileştirme” 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 Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“@sveltejs/enhanced-img ile Görselleri İyileştirme” dersinde ne öğreneceğim?
enhanced:img bileşeniyle doğru boyutlandırılmış, yeni nesil görseller sunun. Sveltejs 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.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs 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 2. dersidir.
“@sveltejs/enhanced-img ile Görselleri İyileştirme” 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 Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs 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
- Kod Bölme ve Dinamik İçeri Aktarmalar
- @sveltejs/enhanced-img ile Görselleri İyileştirme
- Bileşenleri Tembel Yükleme
- SvelteKit Uygulamalarında Profil Oluşturma