Gunakan elemen HTML '<'picture> untuk menyajikan format modern dengan fallback otomatis โ browser memilih format pertama yang mereka dukung:
<picture> <!-- Best compression (AVIF) โ ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) โ ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) โ 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset untuk berbagai lebar viewportloading="lazy" untuk gambar di bawah foldUntuk informasi lebih lanjut tentang optimasi, lihat panduan Optimasi Gambar kami.
AVIF menawarkan kompresi terbaik (20-50% lebih baik dari WebP, 50-80% lebih baik dari JPEG) tetapi memiliki dukungan browser sedikit lebih sedikit dari WebP. WebP didukung oleh semua browser modern (95%+ secara global). Gunakan elemen '<'picture> dengan AVIF sebagai sumber utama, WebP sebagai fallback, dan JPEG/PNG sebagai fallback akhir.
Gunakan PNG ketika Anda membutuhkan: (1) transparansi/saluran alfa, (2) kualitas lossless untuk tangkapan layar atau gambar yang banyak teks, (3) gambar dengan tepi tajam seperti logo atau diagram. Gunakan JPEG untuk foto di mana beberapa data warna dapat dibuang.
SVG sangat ideal untuk logo, ikon, dan ilustrasi. Berbasis vektor berarti tajam di resolusi apa pun dan ukuran file kecil. Jika SVG tidak memungkinkan, gunakan WebP atau PNG dengan transparansi.
Gunakan elemen <picture>: pertama <source type='image/avif'>, lalu WebP, dan terakhir JPEG/PNG sebagai elemen <img>. Browser secara otomatis memilih format yang didukung.