Optimasi gambar

Format foto mana yang dipakai: JPG, PNG, WebP, atau AVIF?

Standar saat ini adalah memprioritaskan WebP atau AVIF untuk foto, dan SVG untuk logo · ikon. web.dev menyarankan memakai WebP dan AVIF jika memungkinkan karena umumnya kompresinya lebih baik daripada format lama (JPG · PNG).

Namun saat memakai AVIF, lebih aman menyediakan file cadangan seperti JPG untuk lingkungan yang tidak bisa membacanya. GIF bergerak ukurannya sangat besar, jadi menggantinya dengan file video pendek jauh lebih ringan.

Sering kali Anda tidak perlu memilih format sendiri. Tergantung cara pembuatan situs web, ada fitur yang otomatis mengubah JPG yang diunggah menjadi WebP atau AVIF sesuai browser pelanggan.

Logo yang butuh latar transparan atau foto produk yang latarnya dihapus juga sering jadi lebih ringan jika disimpan sebagai WebP alih-alih PNG.

Berapa piksel dan berapa KB ukuran foto untuk situs web?

Tidak ada angka baku untuk semua foto; ukurannya ditentukan berdasarkan ‘ukuran yang benar-benar tampil di layar’. Untuk foto yang memenuhi lebar layar ponsel, piksel sekitar dua kali lebar itu sering sudah cukup tajam bahkan di layar beresolusi tinggi.

Foto asli kamera ponsel sering lebih dari 4.000 piksel lebarnya, jadi jika diunggah apa adanya ke situs web, sebagian besar pikselnya terbuang. Sebaiknya foto banner besar dan thumbnail daftar kecil dibuat dengan ukuran terpisah.

Ukuran file foto yang sama pun sangat berbeda tergantung format dan tingkat kompresinya, jadi lebih akurat menentukannya sambil melihat kualitas di layar daripada menghafal angka. Foto layar pertama terutama harus dibuat ringan agar kesan pertama muncul cepat.

Per jenis usaha, bagian yang paling mudah jadi berat adalah galeri menu untuk kafe · restoran, foto sebelum-sesudah untuk salon, dan foto detail produk untuk penjualan online. Mengecek bagian ini lebih dulu memberi efek besar.

Apa itu gambar responsif dan lazy loading?

Gambar responsif adalah cara menyiapkan foto yang sama dalam beberapa ukuran lalu hanya mengirim satu ukuran yang pas dengan layar pelanggan. Dengan pengaturan HTML bernama srcset · sizes, browser memilih file yang pas berdasarkan ukuran layar.

Lazy loading adalah cara memuat foto di bagian bawah layar saat pelanggan menggulir mendekatinya. Namun web.dev menyarankan agar foto yang terlihat di layar pertama, terutama foto terbesar, tidak diberi lazy loading, karena layar pertama justru jadi lebih lambat muncul.

Menuliskan lebar · tinggi (width · height) setiap foto juga penting. Jika ukurannya tidak diketahui, saat foto muncul teks terdorong ke bawah, dan pelanggan bisa salah menekan tombol yang ingin ditekan.

Lazy loading dan gambar responsif umumnya diatur di tahap pembuatan, jadi Anda tidak perlu melakukan apa pun setiap kali mengunggah foto. Namun mintalah pengecekan sekali sebelum rilis apakah sudah diatur dengan benar.

Bagaimana cara memperkecil foto yang diunggah sendiri?

Jika situs web Anda otomatis memperkecil foto di panel admin, mengunggah file asli pun tidak masalah. Jika tidak, biasakan memperkecilnya sekali mengikuti urutan di bawah sebelum mengunggah.

Untuk foto yang sering diunggah seperti menu baru kafe atau karya studio kerajinan, lebih praktis jika patokannya ditetapkan sekali. Catat patokan yang disepakati dengan pembuat situs, seperti ‘foto galeri lebar sekian piksel, WebP’, lalu perkecil dengan cara yang sama setiap kali.

Foto dari ponsel kadang menyimpan informasi seperti lokasi pemotretan. Jika alat pengecil foto punya pengaturan untuk menghapus informasi ini, aktifkan; baik untuk ukuran file maupun privasi.

1. 01Cek seberapa besar tempat foto (banner, galeri, daftar produk) terlihat di layar.
2. 02Di aplikasi edit foto atau alat kompres gambar gratis, perkecil lebarnya sesuai tempat itu.
3. 03Pilih format simpan WebP, lalu turunkan kualitas sampai perbedaannya tidak terlihat mata.
4. 04Ganti nama file agar isinya terlihat, misalnya ‘yeonnam-cafe-handdrip.webp’ alih-alih ‘IMG_1234’.
5. 05Setelah diunggah, buka halaman dengan data seluler (Wi-Fi dimatikan) dan cek kecepatannya.

Bagaimana menulis keterangan gambar (alt) dan nama file?

Tulis keterangan gambar seolah memberi tahu orang yang tidak bisa melihat foto ‘isi yang disampaikan foto ini’ dalam satu kalimat. Google Search Central menganggap keterangan gambar sebagai atribut terpenting dari informasi gambar, dan menyarankan agar tidak menjejalkan kata kunci.

Foto tanpa isi seperti motif hiasan atau latar memang sebaiknya dikosongkan keterangannya. Panduan gambar W3C juga meminta nilai keterangan dikosongkan untuk foto dekoratif. Sebaliknya, foto yang memuat tulisan seperti daftar menu harus memuat tulisan itu apa adanya di keterangan.

Nama file juga menjadi petunjuk kecil. Google menyarankan nama file yang singkat dan menjelaskan isi daripada nama seperti ‘IMG00023.JPG’. Jika memakai huruf kecil Latin dan tanda hubung (-), alamat tidak rusak dan pengelolaan lebih mudah.

• Contoh baik: ‘sepotong kue krim stroberi dengan tiga stroberi segar di atasnya’
• Contoh kurang: ‘kue enak rekomendasi kue pesan kue’ (hanya deretan kata kunci)
• Contoh kurang: ‘foto1’, ‘image’ (tidak ada informasi sama sekali)

Apa kesalahan umum dalam optimasi gambar?

Kesalahan paling umum adalah situs yang ringan saat rilis menjadi lambat lagi karena foto asli menumpuk sedikit demi sedikit selama operasional. Ini sering terjadi terutama di usaha yang galeri · testimoni · produknya sering bertambah.

Mengunggah daftar menu · daftar harga · info acara hanya sebagai satu foto juga bermasalah. Selain berat, mesin pencari dan pembaca layar tidak bisa membaca isinya.

Kecepatan bisa dicek cukup dengan memasukkan alamat ke alat gratis seperti Google PageSpeed Insights. Jika hasilnya menampilkan saran perbaikan terkait gambar, mulailah dari foto.

Jika foto galeri berjumlah puluhan, ada cara menampilkan beberapa foto dulu lalu memuat sisanya saat ‘Lihat lainnya’ ditekan. Layar pertama jadi jauh lebih ringan.

Apa yang perlu ditanyakan ke pembuat situs soal optimasi gambar?

Foto terus bertambah setelah rilis, jadi tanyakan empat hal di bawah ini dengan membedakan saat unggah pertama dan saat operasional.

• Apakah foto yang diunggah lewat panel admin otomatis diperkecil dan diubah formatnya?
• Apakah memakai gambar responsif yang mengirim foto sesuai ukuran layar?
• Apakah kecepatan muat foto layar pertama diukur sebelum rilis?
• Apakah setelah rilis juga dicek bahwa foto berat tidak bertambah?