Optimasi Gambar untuk SEO: Format, Ukuran, Penamaan, dan Google Images

Apa yang Dikerjakan dalam Optimasi Gambar

Optimasi gambar untuk SEO adalah menyiapkan gambar agar cepat dimuat, bisa ditemukan mesin pencari, dan benar-benar membantu halaman menjelaskan isinya.

Tiga tujuan itu dikerjakan bersamaan tapi menyentuh hal yang berbeda: kecepatan menyentuh berkas dan cara memuatnya, penemuan menyentuh penandaan dan penempatan, dan relevansi menyentuh konteks di sekitarnya.

Di sebagian besar situs, gambar adalah penyumbang bobot halaman terbesar. Karena itu perbaikan di sini sering memberi hasil lebih cepat daripada mengutak-atik hal lain di halaman yang sama.

Isi gambar tetap perlu diterangkan melalui alt text, sementara ukuran dan cara pemuatannya menentukan dampaknya pada pengalaman halaman.

Memilih Format

Google menyatakan mendukung BMP, GIF, JPEG, PNG, WebP, SVG, dan AVIF. Dari daftar itu, yang praktis dipakai sehari-hari tinggal empat:

• WebP — pilihan bawaan untuk foto maupun ilustrasi. Ukurannya lebih kecil daripada JPEG dan PNG pada mutu setara, dan dukungannya sudah menyeluruh.
• AVIF — lebih kecil lagi daripada WebP, cocok untuk foto beresolusi besar. Proses pembuatannya lebih lambat dan tidak semua alat penyunting mendukungnya.
• SVG — untuk logo, ikon, dan diagram berbasis garis. Ukurannya tetap kecil di resolusi berapa pun karena berbentuk vektor.
• JPEG dan PNG — masih dipakai sebagai cadangan, atau ketika alur kerja yang ada belum bisa menghasilkan format modern.

GIF sebaiknya diganti video pendek untuk animasi apa pun yang lebih dari beberapa detik. Ukurannya jauh lebih berat daripada video dengan mutu yang sama.

Menekan Ukuran Berkas

1. Tentukan lebar tampil maksimum gambarnya lebih dulu. Gambar yang tampil selebar 800 piksel tidak perlu diunggah dalam 4.000 piksel.
2. Ubah ukurannya sebelum diunggah, bukan mengandalkan atribut lebar dan tinggi untuk mengecilkannya di layar. Berkas aslinya tetap diunduh utuh.
3. Kompres dengan mutu 75–85 persen untuk foto. Di rentang itu perbedaannya nyaris tidak terlihat, sementara ukurannya turun jauh.
4. Buang metadata yang tidak dipakai seperti data kamera dan lokasi pengambilan.
5. Sediakan beberapa ukuran untuk dipakai srcset, bukan satu berkas besar untuk semua perangkat.
6. Periksa hasilnya di PageSpeed Insights, yang menyebutkan langsung gambar mana yang kelebihan ukuran.

Gambar Responsif dan Lazy Loading

Google menyarankan penggunaan srcset dan elemen <picture> dengan src sebagai cadangan, supaya perangkat mengunduh ukuran yang sesuai layarnya.

<img src="audit-seo-800.webp"
     srcset="audit-seo-400.webp 400w, audit-seo-800.webp 800w, audit-seo-1600.webp 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="800" height="450"
     alt="Tampilan laporan audit SEO dengan daftar temuan per halaman"
     loading="lazy">

Dua hal yang sering terlewat di potongan itu. Pertama, width dan height selalu ditulis supaya browser menyiapkan ruangnya dan tata letak tidak bergeser saat gambar selesai dimuat. Kedua, loading="lazy" tidak dipasang pada gambar yang terlihat pertama kali — menunda pemuatan gambar utama justru memperlambat tampilan awal halaman.

Penamaan dan Penempatan

• Beri nama berkas yang menerangkan isinya, dipisah tanda hubung. Google menyebut contoh yang jelas: nama seperti my-new-black-kitten.jpg lebih baik daripada IMG00023.JPG.
• Pakai elemen <img> dengan atribut src. Google menyatakan tidak mengindeks gambar yang dipasang sebagai latar lewat CSS.
• Letakkan gambar dekat teks yang membahasnya. Teks di sekitar gambar ikut dipakai untuk memahami isinya.
• Tunjuk gambar utama halaman lewat properti primaryImageOfPage pada structured data atau lewat og:image.
• Isi atribut alt dengan keterangan yang benar-benar menggantikan gambarnya.

Untuk gambar utama, produk, atau karya berlisensi, image schema markup dapat menambahkan keterangan terstruktur yang tidak bisa disampaikan oleh alt text saja.

Agar Terindeks di Google Images

Google Images punya jalur penemuan sendiri, dan sebagian trafik yang tidak pernah terlihat di pencarian biasa datang dari sana.

• Kirim image sitemap untuk gambar yang mungkin tidak ditemukan lewat perayapan biasa — terutama yang dimuat lewat JavaScript.
• Pastikan gambarnya tidak diblokir di robots.txt. Ini penyebab paling sering gambar tidak pernah muncul sama sekali.
• Verifikasi domain CDN di Search Console kalau gambar dihosting di domain terpisah, supaya datanya terlihat.
• Pilih gambar beresolusi memadai dan relevan. Google menyarankan menghindari logo umum dan rasio aspek yang ekstrem untuk gambar utama halaman.
• Rapikan judul dan deskripsi halamannya, karena keduanya dipakai menyusun keterangan yang muncul di hasil Google Images.

Kesalahan yang Sering Terjadi

• Mengunggah gambar apa adanya dari kamera atau Canva tanpa diubah ukuran dan dikompres.
• Memasang lazy loading pada semua gambar termasuk yang tampil pertama.
• Melewatkan width dan height, yang membuat tata letak bergeser saat halaman dimuat.
• Memakai stok foto generik yang tidak menjelaskan apa pun tentang isi halaman.
• Menaruh data penting hanya di dalam infografik tanpa versi teksnya.

Pertanyaan Umum Seputar Optimasi Gambar

Berapa ukuran berkas gambar yang wajar?

Untuk gambar dalam artikel, di bawah 150 KB umumnya sudah memadai; gambar utama halaman boleh sedikit lebih besar. Yang menentukan bukan angka bakunya, melainkan total bobot halaman setelah semua gambar dijumlahkan.

Apakah mengganti nama berkas gambar lama sepadan?

Untuk gambar yang sudah terindeks, biasanya tidak. Mengganti nama berkas memutus URL gambar lamanya. Perbaiki alt text dan konteksnya lebih dulu; penamaan diperbaiki untuk gambar yang diunggah berikutnya.

Apakah gambar yang dimuat lewat JavaScript bisa terindeks?

Bisa, tapi tidak dijamin. Cara paling aman tetap memakai <img> dengan src di HTML, dan mengirim image sitemap untuk yang terpaksa dimuat belakangan.

Gambar yang terlalu besar atau terlambat dimuat juga sering menjadi penyebab LCP yang buruk pada halaman.