Format Gambar untuk Website

Format gambar untuk website dipilih dari isi gambarnya. Foto paling hemat disimpan sebagai WebP, dengan JPG sebagai cadangan yang paling luas diterima. Logo, ikon, dan tangkapan layar disimpan sebagai PNG atau WebP karena keduanya menjaga garis tetap tajam dan bisa menyimpan latar tembus pandang. Kalau berkas Anda masih dalam format lain, ubah dulu lewat Konversi Format Gambar, yang menangani enam pasangan dua arah antara JPG, PNG, dan WebP.

Format bukan satu-satunya hal yang menentukan berat halaman. Dimensi piksel dan tingkat pemadatan sama berpengaruhnya, dan keduanya diatur saat berkas disiapkan. Artikel ini fokus pada pilihan formatnya. Urusan memperkecil dan menyajikan gambar dibahas di cara mengoptimalkan gambar untuk website.

Satu batas perlu diketahui sejak awal: layanan ini hanya menangani JPG, PNG, dan WebP. Format lain seperti GIF, AVIF, SVG, BMP, TIFF, HEIC, dan RAW tidak didukung. Kalau berkas Anda salah satunya, ubah dulu dengan aplikasi atau pengaturan perangkat yang menanganinya, baru masuk ke tool di sini.

Tiga format dan tempatnya di website

WebP adalah format yang paling ringan untuk web. Pada mutu yang sama, ukurannya paling kecil di antara ketiga format yang didukung, dan ia bisa menyimpan latar tembus pandang. Kekurangannya, belum semua aplikasi di luar peramban bisa membukanya. Peramban modern sudah mendukungnya, tetapi aplikasi perkantoran versi lama dan sebagian portal unggahan belum.

JPG adalah format yang paling luas diterima. Hampir semua aplikasi, sistem, dan portal bisa membukanya. Ukurannya kecil untuk foto, dan detail yang dibuang saat pemadatan tidak terlihat pada gambar bertekstur. Kekurangannya, JPG tidak menyimpan transparansi, dan garis tipis atau huruf kehilangan ketajamannya. Karena itu JPG kurang cocok untuk logo dan tangkapan layar.

PNG menyimpan gambar tanpa membuang detail. Garis tetap tajam, huruf tetap bersih, dan latar tembus pandang tetap utuh. Sebagai gantinya, ukuran berkas PNG untuk foto jauh lebih besar daripada JPG. PNG paling tepat untuk logo, ikon, grafik, diagram, dan tangkapan layar, bukan untuk foto yang memenuhi halaman.

Perbandingan singkatnya:

Cara memilih berdasarkan isi gambar

Untuk foto yang memenuhi bagian halaman, pilih WebP. Kalau situs Anda harus melayani aplikasi lama atau penerima yang belum tentu bisa membuka WebP, sediakan JPG sebagai cadangan. Foto produk, foto artikel, dan gambar suasana termasuk kelompok ini.

Untuk logo, ikon, dan elemen antarmuka yang punya latar tembus pandang, pilih PNG atau WebP. Keduanya menyimpan transparansi. WebP memberi ukuran lebih kecil, sedangkan PNG lebih aman kalau gambar itu akan dibuka aplikasi penyunting lama.

Untuk tangkapan layar, grafik, dan diagram, pilih PNG kalau ketajaman huruf yang utama. Kalau ukuran berkas lebih penting dan penerimanya peramban, WebP bisa memakai pemadatan tanpa kehilangan mutu untuk gambar bergaris tajam, sehingga hasilnya identik piksel per piksel dengan ukuran yang lebih kecil.

Untuk banner yang memuat teks di dalam gambar, hindari JPG. Huruf pada banner akan kehilangan ketajaman, dan teks itu jadi sulit dibaca, terutama di layar ponsel. Pakai PNG atau WebP. Kalau teksnya memang penting untuk mesin pencari dan pembaca, pertimbangkan menulis teksnya sebagai teks halaman, bukan sebagai bagian dari gambar.

Kapan format perlu diubah

Format perlu diubah kalau berkas sumber tidak sesuai dengan tempat pemakaiannya. Misalnya foto JPG yang harus dipasang di situs yang ingin semua asetnya WebP, atau logo PNG yang harus dikirim ke portal yang hanya menerima JPG.

Tiga hal yang terverifikasi dan perlu diketahui sebelum mengubah format. Pertama, latar transparan menjadi putih saat PNG dikonversi ke JPG, karena JPG tidak punya tempat menyimpan informasi transparansi. Kedua, konversi ke PNG membuat ukuran berkas hampir selalu lebih besar daripada JPG asalnya. Ketiga, mutu yang hilang saat foto disimpan sebagai JPG tidak bisa dikembalikan, termasuk oleh konversi ke format apa pun.

Langkah mengubah formatnya:

1. Tentukan format tujuan dari tempat pemakaian: WebP untuk web, PNG untuk ketajaman dan transparansi, JPG untuk kompatibilitas.
2. Buka Konversi Format Gambar, lalu pilih pasangan yang sesuai.
3. Unggah berkasnya. Beberapa berkas sekaligus akan dikemas dalam arsip ZIP.
4. Jalankan proses, lalu periksa pratinjau.
5. Unduh hasilnya dan periksa pada ukuran tampil yang sebenarnya.
6. Kalau ukurannya masih terlalu besar, kecilkan dimensinya lewat Kompres Foto.

Simpan berkas asli sebelum dikonversi. Mutu yang sudah turun tidak kembali, dan berkas asli adalah satu-satunya jalan untuk mengulang kalau hasilnya ternyata kurang pas.

Hubungan format dengan kecepatan halaman

Format memengaruhi kecepatan karena menentukan ukuran berkas yang harus diunduh pengunjung. Pada mutu yang sama, WebP menghasilkan berkas lebih kecil daripada JPG, dan PNG untuk foto jauh lebih besar daripada keduanya. Selisih itu terasa saat halaman memuat banyak gambar sekaligus.

Tetapi format bukan penyebab tunggal halaman lambat. Gambar berukuran ribuan piksel yang ditampilkan kecil tetap berat meskipun formatnya WebP. Gambar tanpa atribut lebar dan tinggi membuat tata letak bergeser saat gambarnya selesai dimuat. Gambar di bawah layar yang dimuat sejak awal membuang kuota. Semua itu dijelaskan di kenapa gambar memperlambat website.

Format yang tidak didukung dan cara menanganinya

GIF tidak didukung. Untuk GIF bergerak, gunakan aplikasi yang bisa mengekspor ke WebP atau video, karena layanan ini tidak menerima GIF sama sekali. AVIF juga tidak didukung, meskipun ukurannya kecil; kalau sumber Anda AVIF, ubah dulu dengan aplikasi yang menanganinya.

SVG tidak didukung karena ia bukan format piksel, melainkan gambar vektor. SVG biasanya dipakai untuk logo dan ikon di kode halaman, dan penyiapannya berbeda dari gambar biasa. HEIC dari iPhone juga tidak didukung. Cara paling sederhana adalah mengubah pengaturan kamera agar menyimpan foto sebagai JPG sebelum dipindahkan ke komputer.

BMP, TIFF, dan RAW tidak didukung. Ketiganya umumnya berkas kerja dari kamera atau pemindai. Untuk RAW, proses dulu di aplikasi pengolah foto dan ekspor hasilnya sebagai JPG atau PNG.

Batas paket

Batas paket berlaku sama untuk seluruh tool gambar di layanan ini. Tanpa akun, satu hari menerima 20 pemrosesan dengan batas 5 MB per gambar dan 10 berkas per proses. Paket Gratis memberi 30 pemrosesan per hari, 5 MB per gambar, dan 20 berkas. Paket Berbayar memberi pemrosesan tanpa batas jumlah, 20 MB per gambar, dan 20 berkas. Rinciannya ada di halaman harga.

Pertanyaan yang sering muncul

Apakah WebP sudah bisa dibuka semua peramban? Peramban modern sudah mendukungnya, termasuk Chrome, Firefox, Safari, dan Edge versi beberapa tahun terakhir. Yang belum merata adalah aplikasi di luar peramban, seperti perangkat lunak perkantoran lama dan sebagian portal unggahan.

Apakah saya perlu menyediakan JPG sebagai cadangan? Perlu kalau gambar itu juga akan diunduh, dikirim lewat surel, atau dibuka aplikasi lama. Kalau gambar hanya tampil di halaman web dan pengunjung memakai peramban modern, WebP saja sudah cukup.

Apakah mengubah JPG ke WebP menurunkan mutu? Proses konversi menulis ulang berkas, jadi ada satu pemadatan baru. Mutunya dipilih server pada titik di mana ukuran turun banyak tanpa perubahan yang terlihat. Simpan berkas asli kalau nanti perlu versi lain.

Apakah satu situs boleh memakai campuran format? Boleh, dan itu justru lazim. Foto sebagai WebP atau JPG, logo dan ikon sebagai PNG atau WebP. Yang penting setiap gambar memakai format yang sesuai isinya.

Mulai dari format yang sesuai

Tentukan dulu setiap gambar akan dipakai di mana, lalu pilih formatnya. Kalau perlu diubah, buka Konversi Format Gambar, pilih pasangannya, dan periksa hasilnya sebelum diunggah. Untuk memahami sifat ketiga format sebelum memilih, baca Perbedaan JPG PNG dan WebP. Peta lengkap kelompok ini ada di Gambar untuk Web, dan panduan besarnya di Panduan Gambar dan Foto.