Gambar Markdown

Gambar membuat konten Anda lebih menarik dan membantu mengilustrasikan poin-poin Anda. Markdown menyediakan sintaks sederhana untuk menambahkan gambar, meskipun terkadang Anda memerlukan HTML untuk fitur yang lebih canggih.

Sintaks Gambar Dasar

Sintaks dasar untuk gambar dalam Markdown mirip dengan tautan, tetapi dengan tanda seru di awal: 

![Teks alternatif](image-url.jpg)
![Gambar lokal](./images/photo.jpg)
![Gambar eksternal](https://example.com/image.jpg)

Gambar dengan Judul

Anda dapat menambahkan judul yang muncul ketika pengguna mengarahkan mouse ke gambar: 

![Teks alternatif](image.jpg "Judul gambar")

Praktik Terbaik Teks Alternatif

Teks alternatif sangat penting untuk aksesibilitas dan SEO:

1. Bersifat Deskriptif

❌ Tidak membantu: 

![Gambar](photo.jpg)
![Foto](pic.png)

✅ Deskriptif: 

![Wanita coding di laptop di kedai kopi](coding-coffee.jpg)
![Grafik batang menunjukkan peningkatan penjualan dari 2020 hingga 2024](sales-chart.png)

2. Tetap Ringkas

❌ Terlalu panjang: 

![Ini adalah deskripsi yang sangat panjang dari gambar yang menunjukkan seseorang duduk di komputer di apa yang tampak seperti lingkungan kantor modern dengan dinding putih dan jendela besar](office.jpg)

✅ Ringkas: 

![Orang bekerja di komputer di kantor modern](office.jpg)

3. Jangan Sertakan "Gambar dari" atau "Foto dari"

❌ Redundan: 

![Gambar anjing bermain di taman](dog.jpg)

✅ Langsung: 

![Anjing bermain di taman](dog.jpg)

Gambar Bergaya Referensi

Seperti tautan, Anda dapat menggunakan sintaks bergaya referensi untuk gambar: 

![Teks alternatif][referensi-gambar]  

[referensi-gambar]: image.jpg "Judul opsional"

Contoh

Berikut logo kami: ![Logo Perusahaan][logo]

Dan berikut screenshot: ![Screenshot Aplikasi][screenshot]

[logo]: /images/logo.png "Logo Perusahaan Saya"
[screenshot]: /images/app.png "Screenshot Dashboard Aplikasi"

Path Gambar dan URL

Gambar Lokal

![Gambar lokal](./images/photo.jpg)
![Path relatif](../assets/icon.png)
![Path absolut](/public/images/banner.jpg)

Gambar Eksternal

![Gambar eksternal](https://example.com/image.jpg)
![Foto Unsplash](https://images.unsplash.com/photo-123/photo.jpg)

Pola Umum

Gambar dengan Caption

![Rapat tim di ruang konferensi](meeting.jpg)
*Gambar 1: Rapat tim mingguan membahas milestone proyek*

Gambar Sebelum/Sesudah

## Sebelum
![Desain website lama](old-design.png)

## Sesudah
![Desain website baru](new-design.png)

Instruksi Langkah-demi-Langkah

1. Klik ikon pengaturan
   ![Ikon pengaturan di pojok kanan atas](settings-icon.png)

2. Pilih "Pengaturan Akun"
   ![Opsi menu pengaturan akun](account-menu.png)

3. Perbarui informasi profil Anda
   ![Form profil dengan field yang dapat diedit](profile-form.png)

Galeri Gambar

## Screenshot Proyek

![Beranda](homepage.png) ![Dashboard](dashboard.png) ![Pengaturan](settings.png)

Pemecahan Masalah Gambar

Masalah Umum

  1. Gambar tidak tampil: Periksa path file dan nama file

  2. Ikon gambar rusak: Verifikasi URL gambar dapat diakses
  3. Gambar terlalu besar: Ubah ukuran atau kompres gambar
  4. Format salah: Pastikan browser mendukung format gambar

Menguji Gambar

  • •
    Preview di editor Markdown Anda

  • •
    Periksa di browser yang berbeda
  • •
    Verifikasi di perangkat mobile
  • •
    Tes dengan koneksi internet lambat

Teknik Lanjutan

Tautan Gambar

Gabungkan gambar dengan tautan: 

[![Klik untuk melihat lebih besar](thumbnail.jpg)](full-size.jpg)

Gambar adalah cara yang powerful untuk meningkatkan dokumen Markdown Anda. Gunakan dengan bijak untuk mendukung konten Anda dan meningkatkan pengalaman pengguna!

Perlu menekankan teks dalam konten Anda? Pelajari tentang pemformatan strikethrough selanjutnya.