Mulai dari ukuran piksel, bukan kualitas
Kesalahan paling umum adalah mengunggah foto langsung dari kamera. Foto berukuran 4000 piksel lebar yang hanya ditampilkan di kolom selebar 800 piksel membuang sebagian besar datanya sia-sia.
Langkah pertama adalah mengecilkan dimensinya. Pakai Resize Gambar untuk menetapkan lebar sesuai tempat gambar tampil. Sisakan sedikit ruang lebih (sekitar dua kali lipat) bila Anda ingin gambar tetap tajam di layar beresolusi tinggi.
Pilih format yang tepat
Format menentukan seberapa efisien gambar disimpan:
- JPG cocok untuk foto dan gambar dengan banyak gradasi warna. Ukuran kecil, tetapi tidak mendukung transparansi.
- PNG cocok untuk logo, ikon, tangkapan layar, dan gambar dengan transparansi. Hasilnya tajam, tetapi ukuran file untuk foto biasanya besar.
- WebP umumnya menghasilkan file lebih kecil daripada JPG dan PNG pada kualitas yang serupa, mendukung transparansi, dan dikenali browser modern.
Atur kualitas kompresi
Untuk JPG dan WebP, pengaturan kualitas di rentang sekitar 70 sampai 85 persen sering kali sudah tampak identik dengan aslinya, padahal ukuran filenya jauh lebih kecil. Angka ini pedoman, bukan aturan baku: bandingkan hasilnya langsung di layar, lalu pilih ukuran terkecil yang masih Anda terima.
Kompres Gambar memperlihatkan perbandingan ukuran sebelum dan sesudah, dan prosesnya berjalan di browser Anda, jadi foto tidak diunggah ke server mana pun. Bila format asli kurang efisien, ubah dulu dengan Konversi Format Gambar.
Berapa ukuran file yang wajar?
Sebagai pedoman praktis, usahakan gambar di dalam artikel tetap di bawah 200 KB, dan gambar besar di bagian atas halaman tidak jauh melewati 300 sampai 500 KB. Setiap situs punya kebutuhan berbeda, tetapi angka ini cukup untuk menjaga halaman terasa ringan di ponsel.
Hal lain yang sering terlewat
Selain ukuran file, beberapa kebiasaan kecil membuat gambar bekerja lebih baik untuk pengunjung dan mesin pencari:
- Tentukan lebar dan tinggi gambar di HTML agar halaman tidak melompat saat gambar selesai dimuat.
- Gunakan loading="lazy" untuk gambar yang berada di bawah layar pertama, tetapi jangan untuk gambar utama di bagian atas.
- Tulis teks alternatif (alt) yang menjelaskan isi gambar secara singkat. Teks ini membantu pembaca layar dan pencarian gambar.
- Beri nama berkas yang deskriptif, misalnya kantor-tipamedia-depok.webp, bukan IMG_4821.jpg.
Butuh website yang cepat sejak awal?
Optimasi gambar hanyalah satu bagian dari website yang cepat. Bila Anda ingin website yang dirancang cepat sejak awal, lihat jasa pembuatan website kami di Depok.