Optimasi Gambar Website: Panduan Praktis untuk SEO & Kecepatan

Gambar biasanya menyumbang 50-80% berat halaman. Mengoptimasinya adalah perbaikan kecepatan dengan rasio effort-ke-impact terbaik — dan sekaligus peluang SEO melalui Google Images.

Ringkasan Singkat

✓Format modern (WebP/AVIF) memangkas ukuran 30-70% tanpa penurunan kualitas terlihat

✓Setiap gambar wajib: alt deskriptif, width/height, lazy-load kecuali hero

✓Filename deskriptif membantu SEO: nufanas-project-dashboard.png > IMG_1234.png

✓next/image (atau CDN gambar) mengotomatisasi hampir semuanya

Checklist per Gambar

Format — WebP atau AVIF. PNG untuk grafik dengan transparansi; JPEG/PNG tidak lagi default.
Ukuran — resize ke dimensi maksimum yang benar-benar ditampilkan, jangan upload 4000px untuk thumbnail 300px.
Alt text — deskripsikan apa yang terlihat ('Dashboard analytics penjualan Q3') — bukan keyword stuffing.
Width & height — selalu set eksplisit agar tidak ada layout shift (CLS).
Loading — lazy untuk semua gambar bawah fold; eager/priority hanya untuk gambar hero LCP.
srcset/sizes — browser memilih ukuran sesuai layar; jangan kirim gambar desktop ke ponsel.

Cara Cepat Mengecek Website Anda

Jalankan PageSpeed Insights — lihat bagian 'Opportunities': biasanya 'Serve images in next-gen formats' dan 'Properly size images' muncul pertama. Atau buka DevTools → Network → filter Img: jika ada file >500KB untuk gambar non-hero, itu masalah.

Di Next.js, komponen <Image> sudah menangani format modern, srcset, dan lazy-load secara otomatis — itulah kenapa semua gambar di situs ini melewatinya.

Optimasi Gambar Website: Panduan Praktis untuk SEO & Kecepatan

Ringkasan Singkat

Checklist per Gambar

Cara Cepat Mengecek Website Anda

Layanan Terkait

Butuh Bantuan untuk Project Anda?

Artikel Terkait

Next.js vs WordPress: Perbandingan Jujur untuk Website Bisnis

Flutter vs React Native: Cara Memilih untuk Aplikasi Anda

Kotlin vs Java untuk Android: Penjelasan untuk Pemilik Bisnis

Docker dan Kubernetes untuk Bisnis: Kapan Perlu, Kapan Tidak