Di kebanyakan situs, gambar menyumbang lebih dari separuh bitanya. Ia juga hal yang paling tak teknis untuk dibereskan: tak perlu mengubah kode, dan penghematannya langsung terasa.

1. Sajikan ukuran yang memang dipakai halamannya

Foto 4000 piksel yang ditampilkan di kolom selebar 600 piksel tetap membebani pengunjung dengan 4000 piksel penuh. Inilah penghematan tunggal yang terbesar sekaligus kekeliruan yang paling umum.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 900px) 100vw, 600px"
     width="800" height="450" alt="...">

Atribut sizes memberi tahu peramban berapa lebar gambarnya NANTI, supaya ia bisa memilih sebelum tata letaknya dihitung. Tanpa itu, perambannya mengira lebar penuh dan mengunduh yang terbesar.

2. WebP atau AVIF, bukan JPEG

cwebp -q 80 photo.jpg -o photo.webp

Pada mutu yang sama, WebP lazimnya 25-35% lebih kecil daripada JPEG dan didukung di semua tempat yang penting. AVIF lebih kecil lagi, tetapi lebih lambat disandikan.

3. Muat secara malas yang ada di bawah lipatan — dan JANGAN yang di atasnya

<img src="..." loading="lazy" decoding="async">
Jangan sekali-kali memuat gambar utamanya secara malas. Justru itulah yang ditunggu pengunjung, dan memuatnya secara malas menunda penggambaran terbesar — angka yang diukur Google.

Selalu berikan lebar dan tingginya

Tanpa keduanya, perambannya tak tahu berapa banyak ruang yang harus disisakan, sehingga semua yang ada di bawahnya melompat begitu gambarnya mendarat. Lompatan itu adalah pergeseran tata letak, dan ia diukur.

Periksalah apa yang sungguh-sungguh diunduh sebuah halaman: buka panel jaringannya, saring ke gambar, urutkan menurut ukuran. Yang terbesar biasanya sebuah kejutan, dan biasanya sebuah foto yang tak pernah diubah ukurannya oleh siapa pun.