Mengoptimalkan Gambar dengan @sveltejs/enhanced-img
Sajikan gambar berukuran tepat dan generasi terbaru dengan komponen enhanced:img.
Mengoptimalkan Gambar dengan @sveltejs/enhanced-img adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Optimasi Gambar
Plugin @sveltejs/enhanced-img menghasilkan gambar responsif dengan format modern saat proses build.
Instalasi
Tambahkan ke dependensi pengembangan dan daftarkan dalam konfigurasi Vite.
npm install -D @sveltejs/enhanced-imgKonfigurasi Vite
Tambahkan plugin ke vite.config.js.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]Gunakan Komponen
Impor gambar dengan kueri khusus dan gunakan <enhanced:img>.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />srcset Otomatis
Plugin ini menghasilkan berbagai ukuran dan format (AVIF, WebP) untuk srcset.
Pemuatan Malas
Tambahkan loading="lazy" untuk gambar di bawah bagian yang terlihat saat halaman pertama kali dibuka.
<enhanced:img src={Hero} alt="..." loading="lazy" />Rasio Aspek
Plugin ini menyertakan lebar dan tinggi untuk mencegah pergeseran tata letak.
Hosting CDN
Untuk gambar dinamis, pertimbangkan Cloudinary, Imgix, atau Optimasi Gambar Vercel untuk pengubahan ukuran saat runtime.
Format Modern
AVIF dan WebP mengurangi ukuran berkas sebesar 30–70% dibandingkan JPEG/PNG.
Dampak terhadap Kinerja
Optimasi gambar sering kali menjadi peningkatan kinerja tunggal terbesar pada situs berbasis konten.
Biaya Build
Pemrosesan gambar memperpanjang waktu build. Simpan keluaran dalam cache untuk build inkremental.
Pemeriksaan Singkat
Apa yang dihasilkan enhanced-img?
Ringkasan
Gunakan @sveltejs/enhanced-img untuk menghasilkan gambar responsif saat build, lengkap dengan format modern dan srcset.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengoptimalkan Gambar dengan @sveltejs/enhanced-img” gratis?
Ya — teks lengkap “Mengoptimalkan Gambar dengan @sveltejs/enhanced-img” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengoptimalkan Gambar dengan @sveltejs/enhanced-img”?
Sajikan gambar berukuran tepat dan generasi terbaru dengan komponen enhanced:img. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mengoptimalkan Gambar dengan @sveltejs/enhanced-img” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pemisahan Kode dan Impor Dinamis
- Mengoptimalkan Gambar dengan @sveltejs/enhanced-img
- Pemuatan Komponen Malas
- Membuat Profil Aplikasi SvelteKit