Komponen Image — Gambar Responsif di Landing Page

Apa itu: Komponen untuk menampilkan gambar produk, foto, atau ilustrasi di landing page kamu — dengan kontrol focal point agar gambar tidak kepotong di bagian yang salah. Kapan pakai: Menampilkan foto produk, banner promo, foto tim, ilustrasi fitur, atau gambar pendukung konten apa pun.

Apa itu Image?

Image adalah komponen untuk menampilkan gambar di landing page kamu. Komponen ini mendukung upload file langsung dari komputer, atau kamu bisa sisipkan URL gambar dari internet.

Yang membedakan Image di Konvert dari sekadar gambar biasa adalah fitur focal point — kamu bisa tentukan titik fokus gambar (misalnya wajah model di foto produk), sehingga saat gambar dikrop karena ukuran layar berbeda, bagian yang paling penting tetap terlihat.

Konvert juga otomatis mengoptimalkan gambar yang kamu upload: dikonversi ke format WebP (lebih kecil, lebih cepat) dan disajikan dalam ukuran yang sesuai dengan layar pengunjung.

Kapan Pakai Image?

• Foto produk — tampilkan produk dari berbagai sudut
• Hero/banner image — gambar besar di bagian atas halaman sebagai visual pembuka
• Foto testimoni — foto pelanggan di samping ulasan mereka
• Ilustrasi fitur — gambar pendukung untuk setiap poin keunggulan
• Logo brand partner — tampilkan logo client/partner
• Sertifikat / penghargaan — bukti kepercayaan (social proof visual)

Properties

Property	Tipe	Default	Penjelasan
Image	Upload / URL	(kosong)	Sumber gambar: upload file atau paste URL eksternal.
Alt Text	Teks	""	Deskripsi gambar untuk SEO dan aksesibilitas. Wajib diisi.
Object Fit	Pilihan	Cover	Cara gambar mengisi container-nya.
Focal Point	Grid 9 titik	Center	Titik pivot saat gambar dikrop (crop).

---

Image — Sumber Gambar

Upload File

• Format yang didukung: JPG, PNG, WebP
• Ukuran maksimal: 5 MB per file
• Konvert otomatis mengoptimalkan dan mengkonversi ke WebP setelah upload

URL Eksternal

• Paste URL langsung ke field (harus diawali https://)
• Gambar dimuat dari server sumber — pastikan URL tidak memerlukan login/autentikasi
• Tidak dioptimalkan oleh Konvert (tetap di format aslinya)

---

Alt Text — Wajib Diisi

Alt text adalah teks deskripsi yang muncul saat gambar gagal dimuat, dan dibaca oleh screen reader untuk pengguna disabilitas. Selain itu, Google menggunakan alt text untuk memahami isi gambar.

Contoh alt text yang baik vs buruk:

❌ Buruk	✅ Baik
image1	T-shirt putih polos bahan cotton combed
foto	Foto tim Konvert di kantor Jakarta
gambar produk	Sepatu lari Nike Air Max warna hitam-merah

---

Object Fit — Cara Gambar Mengisi Container

Nilai	Perilaku	Cocok untuk
Cover	Gambar dikrop untuk memenuhi container (aspek rasio dijaga)	Foto produk, hero image — paling umum
Contain	Gambar diperkecil agar muat tanpa dikrop (ada ruang kosong)	Logo, diagram, gambar dengan teks penting di tepi
Fill	Gambar diregangkan memenuhi container (bisa distorsi)	Hindari — menyebabkan gambar terlihat aneh
None	Gambar ditampilkan ukuran aslinya, tanpa penyesuaian	Ikon kecil atau gambar yang ukurannya sudah pas
Scale Down	Pilih mana yang lebih kecil: None atau Contain	Gambar kecil tidak diperbesar, gambar besar di-contain

---

Focal Point — Titik Fokus Crop

Saat Object Fit = Cover, gambar dikrop agar memenuhi container. Focal Point menentukan bagian mana yang tidak boleh terpotong.

Grid 9 titik focal point:

┌─────────────┬─────────────┬─────────────┐
│ Top Left    │ Top Center  │ Top Right   │
├─────────────┼─────────────┼─────────────┤
│ Center Left │   Center    │ Center Right│
├─────────────┼─────────────┼─────────────┤
│ Bottom Left │Bottom Center│Bottom Right │
└─────────────┴─────────────┴─────────────┘

Contoh penggunaan:

Situasi	Focal Point yang Tepat
Foto model — wajah di atas	Top Center
Produk di tengah frame	Center (default)
Logo produk di pojok kiri atas gambar	Top Left
Produk dengan teks di bawah	Bottom Center
Gambar landscape — subjek di kanan	Center Right

Style Universal

Image mendukung semua properti style umum (margin, padding, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Foto Produk Utama (Object Fit: Cover, Focal: Center)

Upload foto gamis koleksi terbaru dengan Object Fit Cover dan Focal Point Center. Alt text diisi "Gamis katun ima warna sage green koleksi Ramadan 2025" — deskriptif dan mengandung kata kunci produk. Gambar mengisi penuh lebar kolom, dikrop simetris dari tengah sehingga bagian utama produk selalu terlihat di semua ukuran layar.

Contoh 2 — Foto Model dengan Focal Point Top Center

Upload foto model full body dengan Object Fit Cover dan Focal Point Top Center. Saat layar sempit dan gambar dikrop secara vertikal, wajah model yang berada di bagian atas frame tetap terlihat dan tidak terpotong — karena focal point menginstruksikan builder untuk menjaga bagian atas gambar.

Contoh 3 — Logo Partner (Object Fit: Contain)

Upload logo PNG dengan background transparan menggunakan Object Fit Contain. Alt text "Logo resmi partner Tokopedia". Contain memastikan seluruh logo terlihat tanpa dikrop dan tanpa distorsi meski container berbeda ukuran — padding otomatis mengisi ruang kosong di sisi logo.

Tips & Gotchas