Menggunakan Gambar di UI

Gambar adalah elemen visual yang kuat — bisa meningkatkan atau merusak desain tergantung penggunaannya.

Static Images

Gambar yang tidak berubah — foto, ilustrasi, background:

<img src="hero.jpg"
  alt="Tim sedang berkolaborasi di kantor"
  width="1200"
  height="600"
  loading="lazy"
/>

Aturan penting:

1. Selalu sediakan alt text — deskriptif untuk screen reader
2. Set width dan height — mencegah layout shift saat loading
3. loading="lazy" — hanya load saat mendekati viewport
4. aspect-ratio — menjaga rasio gambar konsisten

.hero-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;  /* Crop tanpa distorsi */
}

Dynamic Images

Gambar yang berubah berdasarkan data — avatar user, foto produk, thumbnail:

Masalah umum:

• Ukuran berbeda-beda → layout bergeser
• Rasio berbeda → grid tidak rapi
• Gambar tidak tersedia → broken image icon

Solusi:

.product-image {
  width: 100%;
  aspect-ratio: 1/1;        /* Paksa rasio persegi */
  object-fit: cover;         /* Crop agar fit */
  background-color: #F3F4F6; /* Placeholder saat loading */
  border-radius: 0.5rem;
}

Placeholder & Fallback

Selalu sediakan fallback saat gambar belum load atau error:

• Color placeholder — background warna solid
• Skeleton loading — animasi pulse/shimmer
• Error state — ikon atau inisial pengguna (untuk avatar)

Tokopedia menampilkan skeleton shimmer saat gambar produk belum load — user tahu konten akan muncul, bukan error.