Format Gambar Terbaik untuk Website: WebP, AVIF, PNG, atau JPG?

Kamu udah capek-capek desain website, pilih warna, nulis konten, tapi pas dicek, loadingnya lama. Pengunjung kabur sebelum halaman kebuka.

Salah satu biang keroknya sering diabaikan: format gambar yang salah.

Bukan soal gambarnya jelek atau bagus. Tapi soal jenis filenya. Sebuah foto produk yang diupload sebagai PNG bisa berukuran 3–4 MB, padahal versi WebP nya cuma ~400 KB dengan kualitas yang hampir sama. Kalau halaman kamu punya 10 gambar seperti itu, kamu udah nyuruh pengunjung download puluhan MB cuma buat lihat satu halaman.

Google juga baca ini. Page speed masuk ke perhitungan ranking, dan skor Core Web Vitals yang jelek susah bersaing di hasil pencarian, bahkan kalau kontennya bagus sekalipun.

Artikel ini akan kasih kamu rekomendasi format gambar terbaik untuk tiap situasi, tabel perbandingan biar nggak bingung pilih yang mana, plus cara convert gambar tanpa ribet.

Baru mulai bikin website? Buat akun DomaiNesia gratis dulu biar nanti bisa lanjut pilih domain & hosting. → Daftar Gratis

Jawaban Cepat (Kalau Kamu Lagi Buru-buru)

Tidak semua orang mau baca panjang. Ini ringkasannya:

Soal kompatibilitas: format gambar AVIF sudah didukung semua browser modern, Chrome, Firefox, Safari 16+, Edge. Tapi kalau kamu target pengguna di perangkat lama atau browser lawas, fallback ke JPG tetap aman dan tidak ada ruginya.

Nah, tabel di atas bisa langsung kamu jadikan acuan tiap kali upload gambar. Sudah punya website? Tinggal terapkan. Belum punya? Biasanya mulai dari satu hal dulu: cek nama domain yang tersedia.

Cek Nama Domain Disini!

Kenalan Dulu: Raster vs Vector

Dua kategori ini sering disebutkan tapi jarang dijelaskan dengan benar.

Raster adalah gambar yang tersusun dari piksel. JPG, PNG, WebP, AVIF semuanya raster. Zooming in terlalu jauh? Gambar pecah, karena yang membesar bukan detailnya, tapi kotaknya. Vector beda cara kerjanya. SVG menyimpan instruksi matematika, bukan piksel. “Gambar lingkaran di sini, ukuran sekian.” Hasilnya tajam di ukuran apa pun, dari favicon 16px sampai spanduk 3 meter.

Dampaknya di website cukup konkret. Foto produk, gambar artikel, hero image. semuanya raster, dan memang tidak ada pilihan lain. Yang bisa dikontrol adalah seberapa efisien kompresinya. Tapi logo, ikon, ilustrasi dengan bentuk geometris, coba SVG dulu sebelum pakai PNG. Filenya lebih kecil, tajam di layar retina, dan warnanya bisa diubah langsung lewat CSS tanpa ganti file sama sekali.

Singkatnya: foto pakai raster, logo dan ikon coba SVG dulu.

Format Gambar yang Paling Relevan untuk Website

Banyak artikel soal format gambar ikut-ikutan bahas PSD, AI, INDD. Format-format itu untuk kerja desain, bukan web. Di sinilah fokus ke yang serius kamu butuhkan.

WebP

WebP adalah format gambar yang Google kembangkan sejak 2010 dan sekarang jadi standar de facto untuk web. Ukurannya bisa 25–35% lebih kecil dari JPG dengan kualitas yang setara secara visual. Bisa transparansi, bisa animasi, dan didukung semua browser modern sejak 2020.

Pakai WebP untuk foto artikel, banner, ilustrasi ringan, dan hampir semua gambar yang bukan foto produk utama. Satu hal yang perlu diingat: WebP bukan format untuk file master. Kalau kamu masih perlu edit ulang, simpan versi originalnya dulu sebelum convert.

AVIF

AVIF adalah format gambar paling efisien sekarang untuk foto. Ukurannya bisa 50% lebih kecil dari JPG, pada kualitas yang sama secara visual. Untuk hero image atau foto produk beresolusi tinggi, selisih ukuran filenya terasa banget.

Kekurangannya ada dua. Pertama, encodingnya lebih lambat dari WebP, bukan masalah kalau kamu convert manual satu-satu, tapi terasa kalau prosesnya otomatis di server. Kedua, dukungan browsernya belum selengkap WebP, terutama di Safari versi lama. Siapin fallback WebP atau JPG.

JPG

JPG adalah format gambar “aman”, kompatibel di semua browser, semua perangkat, semua platform tanpa terkecuali. Cocok untuk foto dengan banyak gradasi warna. Kompresinya lossy, jadi setiap kali kamu save ulang, kualitasnya turun sedikit.

Kapan pakai JPG? Sebagai fallback. Kalau browser pengunjung belum support AVIF atau WebP, JPG yang tampil. Jangan jadikan JPG pilihan pertama untuk gambar baru, tapi jangan hapus juga dari workflow kamu.

PNG

PNG menyimpan gambar tanpa kompresi lossy, jadi teks dan tepi yang tajam tetap bersih. Bagus untuk screenshot tutorial, gambar dengan banyak teks, dan elemen UI tertentu. Transparansinya juga lebih bersih dibanding JPG.

Masalahnya satu: ukuran filenya besar. Foto biasa dalam format PNG bisa 5–10x lebih besar dari versi JPGnya. Jadi PNG bukan pilihan untuk foto, hanya untuk gambar yang butuh ketajaman teks atau transparansi presisi.

SVG

SVG bukan gambar dalam arti tradisional, ini file kode XML yang berisi instruksi cara menggambar bentuk. Ukurannya kecil, tajam di semua resolusi, dan bisa dimanipulasi lewat CSS maupun JavaScript.

Untuk logo dan ikon, SVG hampir selalu menang. Satu file SVG bisa tampil sempurna di favicon 16px dan di header 400px sekaligus.

Satu catatan soal keamanan: jangan izinkan pengguna upload SVG sembarangan ke website kamu tanpa sanitasi. SVG bisa menyisipkan script, dan itu celah XSS yang nyata. Kalau kamu pakai WordPress dan upload SVG sendiri sebagai admin, risikonya minimal, tapi tetap pakai plugin sanitasi seperti Safe SVG.

GIF

GIF sudah ada sejak 1987 dan sampai sekarang masih dipakai, terutama untuk meme dan animasi pendek di media sosial. Tapi untuk website, GIF punya dua masalah besar: ukuran filenya besar dan palet warnanya terbatas di 256 warna saja.

Animasi WebP menghasilkan file yang jauh lebih kecil dengan kualitas warna penuh. Kalau animasinya agak panjang atau butuh kualitas bagus, pertimbangkan pakai video MP4 pendek, ukurannya bisa 10x lebih kecil dari GIF yang setara. GIF masih relevan kalau kamu butuh sesuatu yang gampang dibagikan di luar website, tapi untuk performa halaman, hindari.

WebP vs AVIF: Mana yang Harus Kamu Pilih?

Dua format gambar ini sering bikin bingung karena keduanya bagus. Bedanya ada di detail.

AVIF menang di kompresi. Pada kualitas visual yang sama, ukuran file AVIF bisa 30–50% lebih kecil dari WebP. Untuk foto dengan banyak gradasi, kulit, langit, tekstur, perbedaannya cukup kentara. Encodingnya lebih lambat, dan itu terasa kalau kamu convert banyak gambar sekaligus atau pakai plugin WordPress yang otomatis convert saat upload.

WebP lebih cepat di encoding dan dukungan browsernya lebih luas. Safari baru support AVIF mulai versi 16 yang rilis 2022, artinya pengguna iPhone dengan iOS lama belum bisa. WebP sudah aman di semua browser sejak 2020.

Ini perbandingan lengkapnya:

Untuk pemula, mulai dari WebP dulu. Lebih gampang diconvert, dukungan browser lebih luas, dan hasilnya sudah jauh lebih baik dari JPG. Kalau websitenya mulai serius soal performa, baru pertimbangkan AVIF untuk hero image dan foto produk. AVIF bukan keharusan hari pertama.

Gambar ringan memang bikin halaman lebih cepat, tapi percuma kalau server response timenya tinggi. Pastikan website kamu juga ditopang server yang cepat, misalnya dengan menggunakan Web Hosting DomaiNesia supaya hasilnya maksimal.

Pakai Format Apa untuk Bagian Website Ini?

Teori sudah, sekarang yang praktis. Tiap elemen website punya karakteristik berbeda dan format gambar yang salah di satu bagian saja bisa menambah beban halaman tanpa kamu sadari.

Nah, kalau tabel di atas sudah mulai bikin kamu kebayang struktur website yang mau dibangun, blog, portofolio, atau toko online, langkah pertama yang paling konkret biasanya satu: pastikan nama domain yang kamu mau masih tersedia. Cek sekarang sebelum keduluan orang lain di DomaiNesia.

Cara Mengecilkan Ukuran Gambar Tanpa Bikin Pecah

Banyak pemula langsung compress tanpa resize dulu. Hasilnya file masih besar, dimensinya tetap 4000px lebar, cuma kualitasnya yang turun.

Urutannya: resize dulu, baru compress.

Kalau kolom konten artikel kamu lebarnya 800px, upload gambar 3000px itu buang-buang bandwidth. Browser tetap tampilkan di 800px, tapi ukuran file dihitung penuh. Resize ke lebar maksimal yang dibutuhkan layout, baru compress.

Angka yang bisa langsung dipakai:

• Artikel blog: 1200px lebar, sudah cover retina 600px
• Hero image: 1600–1920px, karena biasanya full-width
• Foto produk: 800–1200px tergantung layout
• Kualitas kompresi WebP: 75–85% hampir tidak keliatan bedanya secara visual dibanding 100%, tapi ukuran file bisa setengahnya

Dua hal lain yang perlu kamu tahu sebelum upload.

Pertama, srcset, atribut HTML yang bikin browser pilih ukuran gambar sesuai layar pengunjung. Kamu sediakan beberapa versi, browser yang milih. WordPress sudah generate ini otomatis, jadi tidak perlu mengatur manual.

Kedua, lazy load. Gambar yang belum masuk layar belum didownload browser. Halaman terasa lebih cepat karena gambar di bawah fold tidak ikut dimuat saat pertama dibuka. Caranya: tambah loading="lazy" di tag <img>. WordPress sudah terapkan ini secara default sejak versi 5.5.

Cara Convert JPG/PNG ke WebP atau AVIF

Gambar sudah diresize, sekarang tinggal convert. Ada dua cara, pilih yang sesuai kebiasaan kamu.

Cara Paling Mudah: Tool Online

Squoosh adalah pilihan paling praktis. Dibuat Google, gratis, dan semua proses terjadi di browser, gambar kamu tidak diupload ke server siapapun.

Caranya:

• Buka squoosh.app

• Drag & drop gambar ke halaman
• Di panel kanan, klik dropdown format, pilih WebP atau AVIF

• Geser slider kualitas ke 75–85
• Klik tombol download di pojok kiri bawah

Selesai. Ada preview perbandingan before/after langsung di layar, plus info selisih ukuran filenya.

Alternatif lain yang juga bagus: Convertio dan CloudConvert. Keduanya support batch convert, berguna kalau kamu perlu convert banyak file sekaligus. Tapi karena file diupload ke server mereka, hindari pakai untuk gambar yang sensitif.

Untuk yang Sedikit Teknis (Opsional)

Kalau kamu nyaman pakai command line, cwebp adalah tool resmi dari Google untuk convert format gambar ke WebP. Install sekali, pakai berkali-kali tanpa buka browser.

Contoh perintah paling dasar:

Angka 80 adalah kualitas, rangenya 0–100. Untuk AVIF, tool yang setara namanya avifenc, tapi instalasinya sedikit lebih repot. Kalau kamu pakai Mac, keduanya bisa diinstall lewat Homebrew dalam satu baris perintah.

Untuk pengguna WordPress, cara paling praktis sebetulnya lewat plugin, ShortPixel, Imagify, atau WebP Express bisa otomatis convert gambar saat upload tanpa kamu perlu sentuh command line sama sekali.

Checklist Optimasi Gambar untuk Website

Sebelum klik upload, cek dulu satu per satu. Satu item kelewat bisa bikin effort optimasi sebelumnya tidak maksimal.

• Format gambar sudah WebP atau AVIF, bukan JPG/PNG mentah hasil export langsung
• Dimensi sudah diresize sesuai layout, bukan langsung dari kamera atau Figma
• Sudah di compress di kualitas 75–85%
• Nama file deskriptif: foto-produk-sepatu-lari.webp bukan IMG_4872.jpg
• Alt text diisi, satu kalimat pendek yang mendeskripsikan isi gambar
• loading="lazy" di semua gambar kecuali hero image, hero pakai loading="eager" supaya LCP cepat
• Kalau pakai WordPress, pastikan plugin compress aktif

CDN dan caching sering dilewat. CDN sajikan file gambar dari server terdekat pengunjung, bukan dari server utama kamu. Pengunjung di Surabaya dapat gambar dari node Jakarta, bukan dari server di Singapura. Caching simpan versi gambar di browser, jadi kunjungan kedua tidak perlu download ulang. Hosting yang sudah include CDN dan caching built-in mengurangi satu hal yang perlu kamu pikirkan.

Kalau checklist ini sudah masuk akal dan kamu baru mau mulai bikin website, langkah pertama yang paling konkret: punya domain dan hosting dulu. Daftar akun gratis di DomaiNesia, lanjut pilih paket sesuai kebutuhan.

Optimasi Format Gambar Selesai. Websitenya Sendiri Udah Siap?

Format gambar yang tepat bukan hal yang rumit, cukup tahu kapan pakai WebP, kapan AVIF, kapan PNG, dan kapan SVG. Resize sebelum compress. Ukuran file di bawah 150 KB per gambar. Sisanya tinggal konsisten.

Tapi format gambar ringan cuma satu bagian dari website yang cepat. Kalau websitenya sendiri belum ada, belum ada domain, belum ada hosting, semua optimasi ini belum bisa diterapkan ke mana-mana.

Langkah paling gampang untuk mulai: daftar akun gratis di DomaiNesia. Dari sana kamu bisa cek nama domain yang tersedia dan pilih paket hosting sesuai kebutuhan, tanpa harus langsung bayar apapun.

Jujur, nggak ada waktu yang “tepat” untuk mulai bikin website. Selalu ada satu hal lagi yang rasanya perlu dipelajari dulu. Tapi kalau kamu udah sampai sini dan paham cara kerja format gambar, kamu udah lebih siap dari yang kamu kira.

Sign Up Gratis · Cek Domain · Lihat Hosting

FAQ

Format gambar terbaik untuk website apa?

Tergantung jenis gambarnya. Untuk foto, AVIF adalah yang paling efisien sekarang, ukuran file paling kecil pada kualitas yang sama. Tapi kalau mau yang lebih aman dari sisi kompatibilitas browser, WebP adalah pilihan yang solid. JPG masih relevan sebagai fallback.

WebP vs AVIF, mana yang lebih bagus?

AVIF menang di kompresi, WebP menang di kompatibilitas dan kecepatan encoding. Untuk pemula yang baru mulai, WebP dulu, lebih gampang diconvert dan sudah didukung semua browser modern sejak 2020. Migrasi ke AVIF bisa belakangan kalau websitenya sudah jalan.

PNG vs JPG, kapan pakai yang mana?

JPG untuk foto dengan banyak gradasi warna. PNG untuk screenshot, gambar dengan teks, atau apapun yang butuh transparansi dan ketajaman tepi. Satu aturan praktis: kalau gambarnya ada teks di dalamnya, pakai PNG.

Apakah SVG aman untuk WordPress?

SVG yang kamu buat sendiri dan upload sebagai admin, risikonya minimal. Yang berbahaya adalah izinkan pengguna lain upload SVG sembarangan, SVG bisa menyisipkan script dan itu celah XSS nyata. Pasang plugin Safe SVG sebelum aktifkan upload SVG di WordPress.

Berapa ukuran ideal gambar untuk artikel blog?

Lebar 1200px dengan kompresi 75–85% di WebP. Ukuran file idealnya di bawah 150 KB per gambar, kalau masih di atas itu, resize atau turunkan kualitas kompresnya sedikit.

Apakah semua browser support AVIF dan WebP?

WebP: semua browser modern sejak 2020, termasuk Chrome, Firefox, Safari, dan Edge. AVIF: hampir semua, Safari baru support mulai versi 16 yang rilis 2022, jadi pengguna iPhone dengan iOS lama belum bisa. Untuk amannya, sediakan fallback JPG di tag <picture>.