Menambahkan Gambar & Media ke Artikel Sitemas

Artikel dengan visual yang baik lebih engaging dan mudah dipahami. Sitemas mendukung berbagai cara menambahkan gambar dengan optimasi otomatis. Artikel ini akan mengajarkan semua yang perlu Anda ketahui.

Lokasi Penyimpanan Gambar

Ada dua lokasi untuk menyimpan gambar di Sitemas:

Menambahkan Gambar Dasar

Menggunakan Markdown

Cara paling sederhana menggunakan syntax Markdown:

![Deskripsi gambar](./screenshot.png)

Path ./ berarti gambar berada di folder yang sama dengan index.mdx.

Struktur Folder

src/content/blog/tutorial-nodejs/
├── index.mdx            # Konten artikel
├── screenshot-1.png     # Gambar 1
├── screenshot-2.png     # Gambar 2
└── diagram-arsitektur.svg  # Diagram SVG

Contoh Penggunaan

---
title: "Tutorial Node.js"
# ... frontmatter
---

Berikut adalah tampilan dashboard:

![Dashboard aplikasi](./screenshot-1.png)

Arsitektur aplikasi dijelaskan pada diagram berikut:

![Diagram arsitektur](./diagram-arsitektur.svg)

Menggunakan Komponen Figure

Untuk kontrol lebih seperti caption dan styling, gunakan komponen Figure:

---
title: "Tutorial Node.js"
---

import Figure from '@/components/mdx/Figure.astro';
import screenshot from './screenshot-1.png';

<Figure 
  src={screenshot} 
  alt="Dashboard aplikasi Node.js" 
  caption="Tampilan dashboard setelah login"
  tag="Screenshot"
/>

Props Figure

Import Gambar dengan TypeScript

Untuk type-safety dan optimasi maksimal, import gambar sebagai modul:

src/content/blog/artikel-saya/
├── index.mdx
└── hero-image.png

---
title: "Artikel Saya"
---

import heroImage from './hero-image.png';
import Figure from '@/components/mdx/Figure.astro';

<Figure src={heroImage} alt="Hero image" />

Kenapa Import Lebih Baik?

Format Gambar yang Didukung

Optimasi Gambar

Sebelum Upload

1. Resize — Jangan upload gambar 4000px jika hanya ditampilkan 800px
2. Compress — Gunakan tools seperti TinyPNG, Squoosh
3. Format tepat — PNG untuk screenshot, JPG untuk foto

Tools Optimasi

Ukuran yang Direkomendasikan

Hero Image

Hero image adalah gambar besar di bagian atas artikel. Di Sitemas, ini dikonfigurasi di frontmatter:

---
title: "Judul Artikel"
description: "Deskripsi..."
heroImage: ./hero-banner.png
# ... frontmatter lain
---

Gambar dari URL Eksternal

Untuk gambar dari URL eksternal:

![Alt text](https://example.com/image.jpg)

Alt Text yang Baik

Alt text penting untuk:

• Aksesibilitas — Screen reader membaca alt text
• SEO — Google memahami konteks gambar
• Fallback — Ditampilkan jika gambar gagal load

Tips Menulis Alt Text

✅ DO:

![Dashboard menampilkan grafik penjualan bulanan dengan tren naik](./dashboard.png)

❌ DON’T:

![gambar](./dashboard.png)
![screenshot](./dashboard.png)
![Dashboard](./dashboard.png)

Alt Text untuk Berbagai Jenis Gambar

Menambahkan Video

Embed YouTube

<iframe 
  width="100%" 
  height="400" 
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Judul video" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
  allowfullscreen
></iframe>

Video Lokal

Untuk video pendek (demo, GIF-like), bisa menggunakan video HTML5:

<video width="100%" controls>
  <source src="./demo.mp4" type="video/mp4" />
  Browser Anda tidak mendukung video.
</video>

Gallery / Multiple Images

Untuk menampilkan beberapa gambar, gunakan Markdown biasa dengan pemisah:

Berikut adalah beberapa screenshot:

![Screenshot 1](./ss-1.png)

![Screenshot 2](./ss-2.png)

![Screenshot 3](./ss-3.png)

Troubleshooting

Gambar Tidak Muncul

1. Cek path — Pastikan path relatif benar (./gambar.png)
2. Cek nama file — Case-sensitive di Linux
3. Cek format — Pastikan format didukung
4. Restart dev server — Kadang perlu reload

Error “Cannot find module”

Jika import gagal:

// ❌ Salah - file tidak ada
import notExist from './tidak-ada.png';

// ✅ Pastikan file ada di folder
import screenshot from './screenshot.png';

Gambar Terlalu Besar

Jika halaman load lambat:

1. Compress gambar sebelum upload
2. Resize ke ukuran yang dibutuhkan
3. Convert ke WebP

Checklist Gambar

Sebelum publish, pastikan:

• Semua gambar memiliki alt text deskriptif
• Gambar sudah dioptimasi (ukuran wajar)
• Format sesuai dengan tipe gambar
• Path benar dan file ada
• Caption ditambahkan jika perlu konteks
• Preview terlihat baik di desktop dan mobile

Langkah Selanjutnya

Konten Anda sudah lengkap dengan teks dan visual! Lanjutkan dengan mempelajari kustomisasi tema:

Kesimpulan

Gambar yang baik meningkatkan kualitas artikel secara signifikan. Ingat prinsip utama:

1. Simpan di folder artikel untuk organisasi yang baik
2. Import untuk optimasi otomatis oleh Astro
3. Alt text deskriptif untuk aksesibilitas dan SEO
4. Optimasi sebelum upload untuk performa

Dengan gambar yang tepat, artikel Anda akan lebih menarik dan mudah dipahami pembaca.