Performa Gambar untuk Web
Gambar adalah penyumbang terbesar ukuran halaman web. Optimasi gambar bisa mengurangi load time secara drastis.
Format Gambar Modern
| Format | Kegunaan | Ukuran |
|---|---|---|
| WebP | Foto + ilustrasi | 25-35% lebih kecil dari JPEG |
| AVIF | Foto (terbaik) | 50% lebih kecil dari JPEG |
| SVG | Ikon, logo, ilustrasi | Scalable, ukuran kecil |
| PNG | Transparansi | Lebih besar, gunakan hanya jika perlu |
| JPEG | Foto (fallback) | Format lama, masih universal |
Responsive Images
Kirim ukuran gambar yang tepat untuk setiap device:
<img
srcset="hero-480.webp 480w,
hero-800.webp 800w,
hero-1200.webp 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1200px"
src="hero-800.webp"
alt="Hero image"
loading="lazy"
/>
Lazy Loading
Hanya load gambar yang terlihat di viewport:
<!-- Browser native lazy loading -->
<img src="photo.webp" loading="lazy" alt="..." />
Jangan lazy load:
- Hero image / gambar above-the-fold
- Logo
Tips Optimasi
- Compress semua gambar — tools: Squoosh, Sharp, ImageOptim
- Gunakan
<picture>untuk format fallback:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="..." />
</picture>
- Set dimensi eksplisit — mencegah Cumulative Layout Shift (CLS)
object-fit: cover— crop tanpa distorsi untuk gambar dengan rasio berbeda- CDN + caching — serve gambar dari CDN terdekat dengan user
Tokopedia dan Traveloka mengoptimasi gambar produk secara agresif — thumbnail pakai WebP berkualitas rendah, full image load saat diklik.
