Gambar biasanya adalah hal terberat di sebuah halaman, yang menjadikannya tuas kecepatan terbesar yang Anda kendalikan. Buat dimensi dan bobot file-nya benar dan halaman terasa instan. Buat salah dan Anda gagal Core Web Vitals sebersih apa pun kode Anda. Berikut targetnya dan alur kerja untuk mencapainya.
Target dimensi
Sesuaikan ukuran piksel gambar dengan tempat ia sebenarnya muncul. Panduan kasar:
- Hero selebar penuh: lebar 1600–2000 px mencakup kebanyakan tata letak desktop. Lebih lebar jarang membantu dan memakan banyak byte.
- Foto dalam konten: lebar kolom konten Anda, umumnya 800–1200 px.
- Gambar thumbnail / kartu: 300–500 px.
- Avatar / ikon: 48–200 px pada ukuran tampilnya.
Menyajikan gambar 4000px ke slot 800px berarti browser mengunduh dan mendekode 25× piksel yang akan pernah ditampilkannya. Itu pemborosan murni — dan mendekode gambar besar juga membuat main thread tersendat.
Target bobot
Dimensi menetapkan plafon; kompresi menetapkan bobot sebenarnya. Targetkan:
- Gambar hero: di bawah 200 KB (idealnya 100–150 KB).
- Foto dalam konten: 80–150 KB.
- Thumbnail: 10–30 KB.
- Total gambar per halaman: usahakan tetap di bawah ~1 MB untuk seluruh halaman.
Jika satu gambar melebihi ~300 KB, perlakukan itu sebagai bug untuk diselidiki.
Mengapa ini menggerakkan Core Web Vitals
Largest Contentful Paint (LCP) dari Google mengukur berapa lama sampai elemen terbesar di layar dirender — dan di kebanyakan halaman, elemen terbesar itu adalah sebuah gambar (biasanya hero). Hero yang berat dan kelebihan ukuran langsung menggelembungkan LCP. LCP yang baik adalah di bawah 2,5 detik; hero yang bengkak bisa melampaui itu di koneksi mobile hanya dengan sendirinya.
Dua kemenangan terkait gambar lagi:
- Setel atribut width dan height agar browser mencadangkan ruang — itu melindungi skor Cumulative Layout Shift (CLS) Anda.
- Prioritaskan hero (jangan lazy-load gambar LCP) dan lazy-load semua yang ada di bawah lipatan.
Alur kerja dua langkah
Langkah 1 — ubah ukuran ke lebar tampil sebenarnya. Gunakan Pengubah Ukuran Gambar untuk menurunkan setiap gambar ke ukuran ia muncul. Kunci-aspek aktif, penurunan skala berkualitas tinggi. Ini saja sering memangkas bobot 80–90%.
Langkah 2 — kompres. Umpankan file yang telah diubah ukurannya ke Pengompres Gambar: kualitas 75–85 untuk foto (secara visual lossless), kuantisasi 256-warna untuk PNG. Ia tak pernah menghasilkan file lebih besar dari aslinya, menangani batch, dan punya batas lebar opsional agar Anda bisa melakukan kedua langkah sekaligus secara efektif. Untuk browser modern, mengonversi foto ke WebP memeras 25–35% lagi.
Ukur, jangan menebak
Setelah gambar Anda dioptimalkan, konfirmasikan halaman memang jadi lebih cepat. Page QA milik IMG.DIY mengaudit URL langsung melalui Google PageSpeed Insights dan melaporkan bobot gambar halaman agar Anda bisa menemukan file yang masih terlalu berat. Satu catatan: Page QA butuh koneksi internet — tidak seperti alat gambar, ia memanggil API PageSpeed Google, jadi tak bisa berjalan offline. Gunakan setelah Anda melakukan deploy untuk memeriksa LCP nyata dan anggaran gambar Anda.
Pribadi secara bawaan
Alat ubah ukuran, kompres, dan konversi berjalan sepenuhnya di browser Anda dengan Canvas dan WebAssembly — tidak ada yang diunggah, dan setelah kunjungan pertama Anda semuanya disimpan cache dan berfungsi offline. Anda bisa menyiapkan gambar untuk seluruh situs tanpa koneksi, lalu menjalankan Page QA online begitu halaman tayang.
Rekap cepat: beri ukuran dimensi yang tepat, kompres ke target bobot, prioritaskan hero untuk LCP, dan verifikasi dengan Page QA.