---
title: Optimasi Gambar
description: "Format modern, ukuran tepat, dan kompresi yang mengurangi byte tanpa merusak kualitas visual."
canonical: https://penasihathosting.com/wikihosting/image-optimization
type: wiki
locale: id
updated: 2026-10-29
author: Willya Randika
---

# Optimasi Gambar

## Overview

- **Summary:** Format modern, ukuran tepat, dan kompresi yang mengurangi byte tanpa merusak kualitas visual.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))

## Article

Gambar sering menjadi resource terbesar di sebuah halaman. Mengubah format dan ukuran file bisa memperbaiki loading lebih cepat daripada mengganti tema atau menambah plugin. Efeknya terasa di [Core Web Vitals](/wikihosting/core-web-vitals), terutama LCP.

## Pilih format

JPEG masih aman untuk foto karena kompatibel luas. PNG cocok untuk grafik dan transparansi, tapi terlalu besar untuk foto. WebP sudah didukung hampir semua browser modern dan biasanya lebih kecil dari JPEG. AVIF memberi kompresi lebih baik, tetapi encoding lebih lambat dan dukungannya belum merata.

SVG cocok untuk logo dan ikon karena tetap tajam di berbagai ukuran. Jangan memakai SVG untuk foto. Sediakan fallback WebP atau JPEG lewat elemen picture kalau Anda memakai AVIF.

## Ukuran lebih penting daripada format

Mengunggah gambar 4000 piksel lalu menampilkannya selebar 400 piksel tetap membuang bandwidth. Browser mengunduh file besar meskipun tampilannya kecil. Gunakan `srcset` dan `sizes` supaya browser memilih ukuran yang sesuai.

```html
<img
  src="/img/hero-800.jpg"
  srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Dasbor hosting"
  fetchpriority="high"
/>
```

Atribut `width` dan `height` mencegah layout shift. Untuk gambar hero, jangan pasang lazy loading. Gambar LCP sebaiknya dimuat segera dengan prioritas tinggi.

## Kompresi

`cwebp -q 80 input.jpg -o output.webp` cukup untuk konversi cepat. Untuk AVIF, `avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28` bisa jadi titik awal. Bandingkan hasilnya secara visual, bukan hanya dari ukuran file.

WordPress punya plugin optimasi yang bisa menghasilkan WebP atau AVIF. Uji apakah plugin menghapus metadata atau merusak gambar. CDN juga bisa mengonversi otomatis, tapi pastikan cache dan header `Vary: Accept` dikonfigurasi dengan benar.

Simpan file asli di luar document root atau di object storage. Kalau gambar diganti, ubah nama file atau tambahkan hash supaya CDN tidak menyajikan versi lama.

## Yang perlu dihindari

Mengompresi ulang file yang sudah rusak hanya memperburuk kualitas. Memperbesar gambar kecil membuat file besar dan tetap buram. GIF animasi besar sebaiknya diganti video MP4 atau WebM.

Optimasi gambar bekerja paling baik bersama [CDN](/wikihosting/cdn), [browser cache](/wikihosting/browser-cache), dan [lazy loading](/wikihosting/lazy-loading).

## FAQ

<Accordion>
  <AccordionItem title="Apakah WebP selalu lebih kecil dari JPEG?">
    Biasanya, tapi tidak selalu pada kualitas visual yang sama. Uji beberapa gambar dan bandingkan hasilnya.
  </AccordionItem>
  <AccordionItem title="Apakah AVIF aman dipakai sekarang?">
    Untuk banyak browser modern, ya. Sediakan fallback WebP atau JPEG untuk browser lama dan uji waktu encoding.
  </AccordionItem>
  <AccordionItem title="Mengapa gambar hero saya lambat?">
    Periksa ukuran file, dimensi, dan atribut prioritas. Gambar LCP tidak boleh memakai lazy loading dan sebaiknya tidak bergantung pada JavaScript.
  </AccordionItem>
</Accordion>