Panduan

Gambar untuk situs web yang cepat: ukuran, format, dan praktik baik

Gambar sering menyumbang lebih dari separuh ukuran halaman web. Jika tidak disiapkan, situs Anda dimuat lambat, pengunjung pergi, dan mesin pencari menyadarinya. Kabar baiknya, mengoptimalkan gambar adalah salah satu perbaikan paling sederhana dengan dampak terbesar. Panduan ini merangkum resep praktisnya.

Mengapa gambar penting bagi kecepatan

Halaman dengan sepuluh foto 4 MB memaksa pengunjung mengunduh 40 MB, sangat lambat di ponsel dengan data seluler. Waktu muat yang lama meningkatkan pengunjung yang pergi dan merusak pengalaman. Mesin pencari menganggap kecepatan sebagai faktor kualitas, terutama di perangkat seluler.

Mengurangi ukuran gambar tidak memerlukan pengetahuan teknis: cukup menerapkan beberapa kriteria sederhana secara konsisten.

Dimensi: jangan unggah lebih banyak piksel daripada yang ditampilkan

Penyebab paling umum gambar berat adalah mengunggah foto persis seperti keluar dari kamera. Jika di halaman Anda gambar ditampilkan selebar 800 piksel, mengunggah yang 4000 tidak memperbaiki apa pun yang terlihat dan melipatgandakan ukuran. Hitung lebar maksimum yang akan dipakai di layar dan unggah versi selebar itu, atau dua kali lipat jika ingin tajam di layar berkepadatan tinggi.

Nilai acuan: gambar utama sampul, 1600 hingga 1920 piksel; gambar artikel, 1000 hingga 1200; gambar mini produk, 400 hingga 600; ikon, sekecil yang diperlukan.

Target ukuran menurut jenis gambar

Sebagai sasaran wajar, gambar sampul sebaiknya di bawah 200 hingga 300 KB, gambar isi antara 60 dan 150 KB, dan gambar mini di bawah 40 KB. Ini bukan batas ketat, melainkan sasaran agar ukuran total halaman tetap terkendali, idealnya di bawah 1 hingga 2 MB.

Gunakan alat kompres gambar atau alat ukuran tepat untuk mendekati nilai ini sambil memastikan kualitas tetap baik.

Format yang tepat

Pilih WebP atau JPG untuk foto, PNG atau WebP untuk grafik bertransparansi, dan SVG untuk logo dan ikon vektor, yang tetap tajam di ukuran apa pun dan sangat ringan. Hindari GIF animasi yang berat: video pendek dalam format modern biasanya jauh lebih ringan.

Beri setiap gambar nama deskriptif huruf kecil dengan tanda hubung, misalnya 'sepatu-lari-biru.webp', lebih baik daripada 'IMG_2043.jpg'.

Pemuatan tertunda dan teks alternatif

Gambar yang berada di luar layar awal tidak perlu dimuat saat halaman dibuka. Atribut pemuatan tertunda (lazy loading) pada browser membuatnya diunduh hanya ketika pengunjung mendekatinya. Untuk gambar utama, yang langsung terlihat, jangan terapkan pemuatan tertunda.

Selalu sertakan teks alternatif yang menjelaskan gambar. Ini membantu pengguna pembaca layar, muncul jika gambar gagal dimuat, dan memberi konteks bagi mesin pencari.

Resep untuk mulai hari ini

Pertama, ubah ukuran gambar ke lebar yang benar-benar akan dipakai. Kedua, konversikan ke WebP atau JPG dengan kualitas 75 hingga 85. Ketiga, pastikan masing-masing memenuhi target ukuran. Keempat, beri nama yang jelas dan tambahkan teks alternatif. Kelima, uji halaman Anda di ponsel dengan koneksi normal.

Lakukan proses ini setiap kali memublikasikan konten baru dan, jika situs Anda sudah punya banyak gambar berat, mulailah dari halaman yang paling banyak dikunjungi.

Coba alatnya: Kompres gambar

Pertanyaan umum

Panduan lainnya