SEO Gambar: Alt, Kompresi, Penamaan, Lazy Load

Pendahuluan

Dalam pelajaran ini, Anda akan mempelajari cara mengoptimasi gambar secara menyeluruh untuk meningkatkan kecepatan website, aksesibilitas, dan performa SEO on-page. Optimasi gambar adalah salah satu faktor terbesar yang memengaruhi loading speed, pengalaman pengguna, dan kemampuan Google memahami konten visual.

Setelah mengikuti modul ini, Anda akan mampu:

  • Membuat alt text yang SEO-friendly dan deskriptif,
  • Mengompres gambar hingga 70–90% tanpa mengorbankan kualitas,
  • Memberi nama file yang terstruktur dan relevan,
  • Mengaktifkan lazy load agar website tetap cepat,
  • Menggunakan format gambar modern seperti WebP.

Prasyarat / Alat yang Dibutuhkan:

  • Akses ke CMS (WordPress, Shopify, Webflow, dst.).
  • Tools kompresi seperti TinyPNG, Squoosh, Compress JPEG.
  • Plugin SEO / Optimalisasi gambar (opsional): ShortPixel, Imagify, Optimole.
  • Browser dan koneksi internet.

Langkah-langkah Utama

1. Tentukan Format Gambar yang Benar

Format gambar menentukan kualitas, ukuran file, dan kinerja website.

Instruksi Detail:

  • Gunakan format:
    • WebP → ukuran kecil, kualitas tinggi (disarankan).
    • JPEG → untuk foto realistis.
    • PNG → untuk gambar dengan transparansi atau grafik tajam.
    • SVG → untuk logo dan icon berbasis vektor.
  • Hindari format berat seperti TIFF atau BMP.

(Visual Hint: Tampilan folder berisi file JPG, PNG, SVG, WebP dengan highlight pada WebP.)

Tip:
Utamakan WebP kapan pun memungkinkan—format ini dapat mengurangi ukuran gambar hingga 80% tanpa kehilangan kualitas nyata.

2. Kompres Gambar Tanpa Mengurangi Kualitas (Lossless/Smart Compression)

Gambar yang tidak dikompresi adalah penyebab terbesar website lambat.

Instruksi Detail:

  1. Unggah gambar ke tools kompresi seperti TinyPNG atau Squoosh.
  2. Pilih kompresi smart agar file tetap tajam.
  3. Pastikan ukuran akhir tidak lebih dari:
    • 100–200 KB untuk gambar konten,
    • 40–70 KB untuk thumbnail,
    • 20–40 KB untuk icon kecil.
  4. Download versi terkompresi dan gunakan di website Anda.

(Visual Hint: Tampilan TinyPNG saat proses kompresi dengan bar progres.)

Peringatan:
Jangan pernah meng-upload gambar langsung dari kamera/HP (bisa 2–8 MB). Google akan menghukum kecepatan Anda.

3. Gunakan Penamaan File yang SEO-Friendly

Google membaca nama file sebagai sinyal konteks gambar.

Instruksi Detail:

  • Gunakan huruf kecil semua.
  • Gunakan tanda hubung - sebagai pemisah kata.
  • Sertakan kata kunci yang relevan dengan konten.
  • Hindari penamaan seperti:
    • IMG_2026_0023.JPG
    • Design-final-final-2.png
  • Contoh nama file yang benar:
    • cara-optimasi-gambar-seo.webp
    • tutorial-lazy-load-wordpress.jpg

(Visual Hint: File rename window dengan nama lama → nama baru SEO-friendly.)

Tip:
Tulis nama file seolah Anda menjelaskan isi gambar kepada orang yang tidak melihatnya.

4. Tulis Alt Text yang Deskriptif dan Relevan

Alt text membantu Google memahami isi gambar dan membantu pembaca tunanetra melalui screen reader.

Instruksi Detail:

  • Jelaskan makna gambar, bukan sekadar “gambar x”.
  • Sisipkan kata kunci secara natural.
  • Hindari spam atau pengulangan keyword.
  • Gunakan format:
    • “Infografis strategi SEO on-page untuk pemula.”
    • “Foto laptop yang menampilkan proses kompresi gambar di TinyPNG.”
  • Alt text buruk:
    • “gambar SEO”
    • “seo-optimasi-seo-keyword”

(Visual Hint: Form edit alt text pada WordPress media library.)

Peringatan:
Jangan mengisi alt text dengan keyword stuffing. Google bisa menganggapnya manipulatif.

5. Atur Dimensi Gambar dengan Benar

Dimensi yang tidak sesuai memicu layout shift dan memperlambat LCP (Core Web Vitals).

Instruksi Detail:

  • Selalu tentukan ukuran gambar sesuai kontainer:
    • Gambar hero: 1200–1600 px lebar,
    • Gambar konten: 600–900 px,
    • Thumbnail: 150–300 px.
  • Hindari upload gambar 4000 px untuk kebutuhan kecil.

(Visual Hint: Inspect Element dengan highlight bagian width × height.)

Tip:
Pastikan ukuran gambar di-upload sudah sesuai ukuran tampilan, bukan diperkecil paksa oleh CSS.

6. Terapkan Lazy Load untuk Meningkatkan Kecepatan

Lazy load membuat gambar hanya muncul ketika pengguna menggulir ke arahnya.

Instruksi Detail:

  1. Di WordPress: aktifkan “Lazy Load” melalui:
    • WP Rocket,
    • LiteSpeed Cache,
    • Jetpack Image,
    • RankMath (Image SEO Module).
  2. Untuk HTML manual, tambahkan: <img src="gambar.webp" loading="lazy" alt="deskripsi">
  3. Pastikan gambar “Above the Fold” tidak menggunakan lazy load agar tampil instan.

(Visual Hint: Setting plugin dengan toggle Lazy Load ON.)

Peringatan:
Lazy load pada gambar hero dapat menurunkan skor LCP dan merusak pengalaman pengguna.

7. Gunakan CDN untuk Gambar (Opsional tapi Sangat Disarankan)

CDN membuat gambar dimuat dari server terdekat lokasi pengguna.

Instruksi Detail:

  • Aktifkan CDN seperti Cloudflare, BunnyCDN, atau Optimole.
  • Pastikan CDN mengaktifkan fitur:
    • Auto WebP
    • Smart Compression
    • Caching

(Visual Hint: Dashboard CDN dengan kotak “Image Optimization Enabled”.)

Tip:
Situs dengan traffic besar hampir selalu menggunakan CDN untuk stabilitas dan kecepatan global.

8. Validasi Kualitas SEO Gambar

Selalu periksa apakah gambar telah teroptimasi menggunakan tools:

Instruksi Detail:

  • PageSpeed Insights → cek LCP & kecepatan gambar.
  • GTmetrix → cek ukuran file dan rekomendasi kompresi.
  • Screaming Frog → cek alt text yang kosong.

(Visual Hint: Hasil PageSpeed yang menandai masalah gambar.)

Peringatan:
Alt text kosong pada lebih dari 40% gambar dapat memberi sinyal buruk bahwa situs Anda kurang ramah aksesibilitas.

Ringkasan & Tugas

3 Poin Kunci

  1. SEO gambar mencakup 4 elemen utama: alt text, kompresi, penamaan file, dan lazy load.
  2. Gambar yang buruk dapat memperlambat website hingga 60% dan merusak ranking SEO.
  3. Optimasi gambar yang baik meningkatkan aksesibilitas, UX, dan performa Core Web Vitals.

Tugas Praktis

  1. Pilih 5 gambar dari salah satu artikel Anda.
  2. Optimasi masing-masing gambar dengan langkah:
    • Kompresi,
    • Penamaan file,
    • Alt text,
    • Dimensi,
    • Lazy load.
  3. Jalankan PageSpeed Insights sebelum dan setelah optimasi, lalu bandingkan skor.
Previous Lesson
Back to Course
Next Lesson