Panduan praktis ukuran dan format file gambar untuk web

Setiap gambar memakai sumber daya jaringan, dekode, memori, dan rendering. Anggaran yang berguna bersifat khusus halaman: mempertimbangkan peran gambar, audiens, cache, viewport, dan kualitas. Rentang berikut adalah titik awal untuk diuji, bukan batas lulus yang universal.

Anggaran awal menurut kegunaan

Rentang ini menggambarkan anggaran pengiriman web yang hemat. Hasil JPEG, WebP, atau AVIF Anda dapat berada di atas atau bawahnya; sesuaikan menurut sumber, encoder, ukuran tampilan, kinerja lapangan, dan pemeriksaan visual.

Mengubah rentang awal menjadi anggaran Anda

Laporan bobot halaman HTTP Archive menyediakan data distribusi terbaru, tetapi median global bukan audiens Anda. Ambang LCP “baik” yang diterbitkan Google adalah 2,5 detik pada persentil ke-75 kunjungan. Gunakan data lapangan dan waterfall untuk membagi waktu antara respons server, penemuan sumber daya, transfer, dekode, dan penundaan rendering.

Mulailah dari anggaran transfer tingkat halaman dan berikan lebih banyak kepada gambar dengan nilai pengguna tertinggi. Tinjau kembali rentang tabel ketika tata letak, jumlah gambar, audiens, atau kebutuhan kualitas berubah.

Format adalah salah satu variabel utama

Sumber yang sama dapat menghasilkan ukuran sangat berbeda menurut encoder dan sasaran kualitas. Tabel ini menunjukkan perilaku untuk dibandingkan, bukan hasil tolok ukur universal bagi foto 1200 piksel.

WebP atau AVIF dapat mengungguli keluaran JPEG dalam beberapa perbandingan, tetapi tidak ada persentase tetap untuk semua sumber dan encoder. Kedua format modern mendukung transparansi. Lihat panduan WebP dan AVIF.

Buat kandidat dengan JPG ke WebP, Konversi ke AVIF untuk format masukan yang tercantum, atau Konversi massal bagi format yang ditampilkan alat itu.

Dimensi Piksel: Pengali yang Sering Diabaikan

Jumlah piksel, isi gambar, kedalaman bit, metadata, format, encoder, dan pengaturan memengaruhi ukuran. Mengurangi dimensi yang tidak perlu sering memberi jauh lebih sedikit data untuk direpresentasikan encoder.

Gambar 4000 × 3000 memiliki 12 juta piksel; 1200 × 900 memiliki 1,08 juta, atau 91% lebih sedikit. Dengan jumlah kanal dan presisi sama, data raster tanpa kompresi untuk encoder jauh berkurang, meskipun penghematan byte akhir tetap bergantung pada isi dan pengaturan.

Pedoman responsif: sediakan kandidat mendekati lebar dan kepadatan tampilan yang mungkin. Jika slot konten selebar 720 piksel CSS, kandidat 1440px mungkin cocok untuk layar 2×, tetapi zoom, pemotongan, perubahan tata letak, dan kepadatan lebih tinggi dapat mengubah pilihan. Gunakan srcset dan sizes untuk menjelaskan opsi.

Gunakan alat Ubah Ukuran Gambar Vizua untuk membuat kandidat pada dimensi yang dibutuhkan tata letak. Lalu uji kompresor JPEG atau PNG yang sesuai; sumber yang sudah optimal mungkin tidak mengecil.

Kualitas Kompresi: Menemukan Titik Optimal

Setelah gambar Anda berukuran dan berformat tepat, kualitas kompresi adalah pengaturan terakhir. Berikut skenario praktis yang menunjukkan bagaimana ketiga faktor ini bekerja bersama:

Alur ilustratif: mulai dengan master 4000 × 3000 dan simpan di luar set pengiriman.

1. Ubah ukuran ke kandidat seperti 1200 × 900 jika sesuai dengan slot dan kepadatan tujuan
2. Ekspor kandidat WebP pada kualitas awal pilihan dan periksa file sebenarnya
3. Ekspor kandidat AVIF bila stack mendukungnya, lalu bandingkan ukuran, tampilan, dan biaya pengodean

Pilih kandidat terkecil yang memenuhi kegunaan. Penghematan akhir dan perbedaan terlihat berasal dari sumber serta keluaran sebenarnya, bukan dimensi contoh saja.

Untuk rekomendasi kualitas per format secara lebih rinci, lihat panduan kami: Cara mengompres gambar tanpa kehilangan kualitas.

Kasus Khusus

Halaman produk e-commerce

Foto produk harus tetap berguna pada zoom yang didukung toko. Buat kandidat responsif dari master terlindungi, uji detail halus, dan tetapkan anggaran terpisah untuk kisi, tampilan utama, dan zoom. Persyaratan unggahan marketplace dapat berbeda dari pengiriman toko.

Portofolio fotografi

Portofolio dapat mengirim pratinjau responsif dan menawarkan tampilan resolusi tinggi yang disengaja jika sesuai. Tentukan dimensi dan anggaran byte dari tata letak serta layar yang diharapkan, kemudian periksa tekstur, gradasi, dan profil warna.

Berbagi sosial (Open Graph)

Rekomendasi dan format gambar Open Graph berbeda antarplatform dan dapat berubah. JPEG atau PNG 1200 × 630 adalah titik awal lintas platform yang umum, tetapi periksa panduan dan pratinjau tujuan terbaru. Crawler mengambil file ini terpisah dari lazy loading halaman.

Total Anggaran Gambar per Halaman

Susun anggaran halaman dari sasaran kinerja. Salah satu alokasi awal untuk diuji adalah:

• 1 gambar hero: ~150 KB
• 3–4 gambar konten: ~100 KB masing-masing, total ~300–400 KB
• Thumbnail, avatar, ikon: ~50 KB gabungan

Contoh ini bukan jaminan kecepatan. Galeri dan kisi produk dapat menunda gambar luar layar yang sesuai, tetapi sumber daya lazy-load tetap memakai data saat diminta dan dapat memengaruhi pengguliran. Ukur kinerja awal dan interaksi pada perangkat serta jaringan representatif.

Pertanyaan yang Sering Diajukan