Cara membuat gambar di situs webmu dimuat lebih cepat (tanpa jadi buram)

Di sebagian besar situs, gambar adalah bagian terbesar dari apa yang diunduh pengunjung — sering kali lebih banyak daripada semua yang lain digabung. Memperbaikinya adalah peningkatan kecepatan termurah yang ada, dan itu membantu pengunjung sekaligus peringkatmu di mesin pencari. Berikut daftar periksa praktis, dari perubahan yang paling berdampak sampai sentuhan akhir.

Oleh tim CrispPicDiperbarui 25 September 20263 mnt baca

Konversi JPG ke WebP Kompres ke bobot target Ubah ukuran ke piksel yang tepat

Mengapa bobot gambar penting

Yang paling lambat di sebuah halaman biasanya gambar terbesarnya, dan itu sering kali yang diukur browser sebagai Largest Contentful Paint (LCP). Core Web Vitals dari Google menganggap LCP di bawah 2,5 detik sebagai baik. Satu foto hero 3 MB pada koneksi seluler bisa menghabiskan seluruh anggaran itu sendirian.

1. Sajikan gambar pada ukuran tampilannya

Tidak ada gunanya mengirim foto 4000 piksel ke tempat yang menampilkannya selebar 800 piksel. Sebagai aturan praktis, gambar sebaiknya paling lebar sekitar dua kali lebar tampilannya, yang menjaganya tetap tajam pada layar berkepadatan tinggi. Lebar tipikal: 1600–2000 px untuk hero selebar penuh, 800–1200 px untuk gambar artikel, 300–400 px untuk thumbnail.

2. Pakai format modern

File WebP biasanya 25–35% lebih kecil daripada JPG dengan kualitas serupa, dan semua browser saat ini mendukungnya. Pakai PNG hanya di tempat kamu memerlukan grafik lossless atau transparansi. Jika harus mendukung perangkat lunak lama, sediakan JPG sebagai cadangan. Lihat JPG vs PNG vs WebP untuk rinciannya.

3. Kompres ke bobot yang wajar

Ini target kasar, bukan aturan: gambar hero di bawah sekitar 200 KB, gambar di dalam artikel di bawah sekitar 100 KB, dan thumbnail di bawah sekitar 30 KB. Tetapkan targetnya dan biarkan alat mencari kualitas tertinggi yang memenuhinya, alih-alih mengira-ngira dengan penggeser.

4. Muat gambar di bawah lipatan layar secara malas

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Pemuatan malas (lazy loading) menunda gambar sampai pengunjung menggulir mendekatinya. Jangan terapkan pada gambar hero di bagian atas halaman — gambar itu harus dimuat segera, karena biasanya itulah elemen LCP.

5. Selalu atur lebar dan tinggi

Dengan dimensi di HTML, browser menyisihkan ruang yang tepat sebelum gambar tiba, sehingga halaman tidak melompat saat dimuat (lompatan itu diukur sebagai Cumulative Layout Shift). Atribut alt yang deskriptif membantu aksesibilitas dan pencarian gambar.

6. Tawarkan beberapa ukuran dengan srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Browser memilih file terkecil yang cukup tajam untuk layar pengunjung, sehingga ponsel tidak mengunduh versi desktop.

Cara memeriksa hasil kerjamu

Jalankan halaman lewat PageSpeed Insights atau Lighthouse di alat pengembang Chrome. Keduanya menandai gambar yang terlalu besar dan belum dioptimalkan, dan memperkirakan berapa byte persisnya yang akan kamu hemat.

Menyiapkan file

Konversi gambar ke WebP.
Atur lebar yang kamu butuhkan di alat ubah ukuran — dengan rasio terkunci.
Tetapkan ukuran file maksimum dan periksa hasilnya dengan penggeser sebelum/sesudah.
Ekspor satu file untuk setiap lebar yang ingin kamu pakai di srcset.

Bekerjalah dari file asli pada setiap ekspor. Mengompresi ulang salinan yang sudah terkompresi menghilangkan lebih banyak kualitas daripada mengompresi sumbernya sekali saja.

Pertanyaan yang sering diajukan

Berapa ukuran gambar terbaik untuk situs web?

Ukuran tempat gambar itu ditampilkan, dengan kelonggaran hingga sekitar dua kali lebar itu demi ketajaman pada layar berkepadatan tinggi. Untuk hero selebar penuh, 1600–2000 piksel adalah tipikal.

Format gambar apa yang terbaik untuk situs web?

WebP untuk sebagian besar foto dan grafik, dengan JPG sebagai cadangan, dan PNG hanya di tempat kualitas lossless atau transparansi penting.

Apakah ukuran gambar memengaruhi SEO?

Secara tidak langsung. Gambar berat memperlambat halaman, yang merugikan Core Web Vitals seperti LCP, dan pengalaman halaman adalah salah satu sinyal yang dipertimbangkan mesin pencari.

Haruskah saya mengompresi gambar secara otomatis dengan plugin?

Itu bisa menghemat waktu di situs besar, tetapi kamu tetap harus menyajikan dimensi yang benar. Mengubah ukuran biasanya keuntungan terbesar dan tidak bergantung pada plugin apa pun.

Coba dengan pengaturan yang tepat yang sudah diterapkan

Halaman-halaman ini membuka alat CrispPic yang sudah diatur untuk kasus yang persis seperti ini. Gambarmu diproses di browser kamu sendiri: tidak pernah diunggah ke mana pun.