Galeri Produk & Portofolio
Temukan inspirasi dari proyek-proyek kayu premium kami
Cara Menggunakan Gambar di Project Ini
- Simpan gambar di direktori
src/assets/images/dalam subfolder yang sesuai - Import gambar di komponen Astro:
import namaGambar from '../assets/images/kategori/nama-gambar.jpg'; - Gunakan komponen
PictureatauImageuntuk otomatisasi konversi ke WebP - Saat build, semua gambar akan dikonversi ke WebP untuk performa terbaik
Contoh Gambar Placeholder
Gambar akan muncul di sini setelah kamu menambahkan gambar ke src/assets/images/
Gambar otomatis dikonversi ke WebP saat build
Keunggulan Format WebP
- • Ukuran file lebih kecil (biasanya 25-35% lebih kecil dari JPEG)
- • Dukungan transparansi (seperti PNG)
- • Kualitas gambar tetap tinggi
- • Performa loading halaman lebih cepat
Struktur Galeri (Contoh)
Berikut adalah contoh struktur yang akan digunakan saat kamu menambahkan gambar:
---
import { Image } from 'astro:assets';
import contohGambar from '../assets/images/portfolio/nama-gambar.jpg';
const galleryImages = [
{ src: contohGambar, alt: "Deskripsi gambar", caption: "Caption opsional" }
];
---
<ImageGallery
images={galleryImages}
columns={3}
spacing="md"
/>