Optimasi Gambar untuk Web: Cara Bikin Blog Lebih Cepat

Tahukah kamu bahwa gambar rata-rata menyumbang 50–70% dari total ukuran halaman web? Di era mobile dan koneksi yang beragam, gambar yang tidak dioptimasi bisa menjadi pembunuh performa situs yang paling sering diabaikan. Blog Jekyll kamu bisa tampil cantik dengan gambar HD, tapi kalau loading-nya lambat, pengunjung sudah keburu pergi sebelum konten terbaca.

Di artikel ini kita bahas strategi optimasi gambar yang praktis dan bisa langsung diterapkan.

Mengapa Optimasi Gambar Itu Penting?

Beberapa dampak nyata dari gambar yang tidak dioptimasi:

Google PageSpeed Insights akan memberi nilai rendah
Core Web Vitals — khususnya LCP (Largest Contentful Paint) — akan buruk
Bounce rate meningkat karena pengunjung mobile tidak sabar menunggu
Biaya bandwidth lebih besar, terutama jika hosting berbayar
SEO peringkat turun karena Google memperhitungkan kecepatan halaman

Format Gambar: Pilih yang Tepat

Tidak semua format gambar diciptakan sama. Pilih format berdasarkan jenis konten:

WebP — Format Modern Pilihan Utama

WebP adalah format gambar modern dari Google yang memberikan kompresi 25–35% lebih baik dari JPEG/PNG dengan kualitas visual yang setara. Didukung oleh semua browser modern.

Gunakan untuk: Foto, gambar produk, screenshot, hero image.

JPEG / JPG — Foto dan Gambar Kompleks

Format lama yang sudah sangat matang. Cocok untuk foto dengan banyak gradasi warna. Simpan dengan kualitas 70–85% sudah tidak terlihat perbedaannya secara visual.

Gunakan untuk: Foto, thumbnail artikel.

PNG — Gambar dengan Transparansi

PNG mendukung transparansi (alpha channel) dan cocok untuk gambar dengan area transparan seperti logo atau ikon. Namun ukurannya bisa jauh lebih besar dari JPEG.

Gunakan untuk: Logo, ikon, diagram, screenshot dengan teks.

SVG — Ikon dan Ilustrasi

SVG adalah format vektor berbasis XML. Ukurannya sangat kecil dan bisa di-scale ke ukuran apapun tanpa pecah. Bisa langsung diinline ke HTML.

Gunakan untuk: Ikon, logo, ilustrasi, grafik sederhana.

AVIF — Format Terbaru (2024+)

AVIF menawarkan kompresi bahkan lebih baik dari WebP. Dukungan browser sudah cukup luas, tapi belum universal.

Cara Kompresi Gambar

Tools Online (Tanpa Instalasi)

Squoosh.app — Buatan Google, powerful, bisa konversi ke WebP/AVIF langsung di browser
TinyPNG — Kompresi PNG dan JPEG otomatis, sangat mudah dipakai
Convertio — Konversi format gambar online

Tools Desktop

ImageMagick — Tool command line yang sangat powerful

# Konversi JPEG ke WebP dengan kualitas 80
magick input.jpg -quality 80 output.webp

# Resize dan kompresi sekaligus
magick input.jpg -resize 1200x630 -quality 80 output.webp

FFmpeg — Bisa mengolah gambar batch:

# Konversi semua JPG di folder ke WebP
for f in *.jpg; do ffmpeg -i "$f" "${f%.jpg}.webp"; done

Ukuran Dimensi yang Tepat

Jangan upload gambar 4000×3000 piksel untuk ditampilkan dengan lebar 800px. Resize gambar ke dimensi yang sesuai dengan tampilan di website.

Panduan umum untuk blog:

Kegunaan	Ukuran Rekomendasi
Hero image / featured image	1200×630 px
Gambar dalam artikel	800×450 px (maks)
Thumbnail	400×225 px
Avatar / profil	150×150 px
Open Graph image	1200×630 px

Implementasi di Jekyll

Gunakan Tag `<picture>` untuk WebP dengan Fallback

<picture>
  <source srcset="/assets/images/foto.webp" type="image/webp">
  <img src="/assets/images/foto.jpg" alt="Deskripsi gambar" loading="lazy">
</picture>

Browser yang mendukung WebP akan mengambil .webp, yang lain fallback ke .jpg.

Lazy Loading — Muat Gambar Saat Dibutuhkan

Tambahkan atribut loading="lazy" pada semua gambar yang tidak langsung terlihat saat halaman pertama kali dibuka:

<img src="/assets/images/foto.jpg" alt="Deskripsi" loading="lazy">

Dalam Markdown, kamu bisa menggunakan HTML langsung:

<img src="/assets/images/foto.jpg" alt="Deskripsi" loading="lazy" width="800" height="450">

Selalu Sertakan Atribut `width` dan `height`

Menyertakan width dan height mencegah layout shift — halaman tidak “melompat” saat gambar dimuat. Ini berpengaruh langsung pada skor CLS (Cumulative Layout Shift) di Core Web Vitals.

Gunakan CDN untuk Gambar

Jika blog kamu sudah di Cloudflare Pages atau Cloudflare proxy, gambar otomatis di-cache di edge server terdekat. Cloudflare juga punya fitur Polish (di plan berbayar) yang otomatis mengkompresi dan mengkonversi gambar ke WebP.

Alternatif gratis lainnya:

Cloudinary — 25GB storage + 25GB bandwidth gratis per bulan, dengan transformasi gambar otomatis via URL
Imgix — berbayar tapi sangat powerful untuk transformasi gambar dinamis

Checklist Optimasi Gambar

Sebelum upload gambar ke blog, pastikan:

Format sudah WebP (atau JPEG untuk foto, PNG untuk transparansi)
Dimensi sudah di-resize sesuai kebutuhan (tidak lebih dari 1200px lebar untuk artikel)
Sudah dikompres (kualitas 75–85% untuk JPEG/WebP)
Nama file deskriptif dan menggunakan tanda hubung, bukan spasi (misal: cara-install-ruby.webp)
Atribut alt sudah diisi dengan deskripsi yang relevan
Atribut loading="lazy" sudah ditambahkan
Atribut width dan height sudah ada

Kesimpulan

Optimasi gambar adalah salah satu cara tercepat dan paling efektif untuk meningkatkan performa blog. Dengan mengkonversi ke WebP, me-resize ke dimensi yang tepat, dan menambahkan lazy loading, kamu bisa memotong ukuran halaman secara signifikan tanpa mengorbankan kualitas visual.

Langkah kecil ini berdampak besar pada pengalaman pengunjung, skor SEO, dan peringkat di hasil pencarian Google.