Menggunakan Gambar dalam Artikel Teknis

Tulisan teknis tidak selalu harus dipenuhi diagram. Namun ketika sebuah konsep sulit dijelaskan hanya dengan kata-kata, gambar dapat membantu pembaca membangun gambaran awal sebelum masuk ke detail.

Artikel ini sekaligus menjadi contoh penggunaan gambar lokal di blog. Ilustrasinya disimpan bersama aset project, tidak bergantung pada layanan gambar pihak ketiga, dan tetap memiliki deskripsi untuk pembaca yang menggunakan screen reader.

Kapan gambar membantu?

Gambar paling berguna ketika ia menjawab pertanyaan yang sulit dijelaskan secara berurutan. Beberapa contohnya:

• Hubungan antar-service dalam arsitektur
• Perubahan tampilan sebelum dan sesudah perbaikan
• Aliran data dari pengguna hingga database
• Bentuk hasil visualisasi atau peta
• Langkah konfigurasi yang mudah tertukar

Jika gambar hanya mengulang paragraf tanpa memberi informasi baru, kemungkinan gambar tersebut tidak perlu ditambahkan.

Gunakan file lokal

Untuk blog ini, gambar artikel dapat disimpan di folder berikut:

static/images/posts/

File di dalam static dapat dipanggil langsung dari Markdown menggunakan path yang dimulai dengan garis miring:

![Deskripsi gambar](/images/posts/nama-gambar.webp)

Cara tersebut sudah cukup untuk gambar sederhana. Browser dan mdsvex akan merendernya sebagai elemen img di dalam artikel.

Gunakan figure ketika membutuhkan caption

Markdown standar tidak menyediakan caption. Ketika gambar membutuhkan sumber atau penjelasan singkat, gunakan elemen HTML yang tetap dapat dibaca oleh mdsvex:

<figure>
  <img
    src="/images/posts/contoh.webp"
    alt="Diagram aliran data dari aplikasi menuju API dan database"
    width="1400"
    height="747"
    loading="lazy"
    decoding="async"
  />
  <figcaption>Aliran data utama pada aplikasi.</figcaption>
</figure>

figure mengelompokkan visual dan caption sebagai satu bagian yang saling berhubungan.

Alt text menjelaskan tujuan gambar

Alt text bukan tempat untuk menumpuk keyword. Tulis informasi yang diperlukan seseorang untuk memahami fungsi gambar tanpa melihatnya.

Alt text yang terlalu umum:

Gambar arsitektur aplikasi

Alt text yang lebih membantu:

Diagram aliran request dari aplikasi mobile menuju API, queue, dan database

Untuk gambar dekoratif yang tidak membawa informasi, gunakan alt="" agar screen reader dapat melewatkannya.

Tentukan ukuran gambar

Atribut width dan height membantu browser menyediakan ruang sebelum file selesai dimuat. Hal ini mengurangi layout shift, yaitu keadaan ketika paragraf tiba-tiba berpindah karena gambar baru muncul.

Gambar artikel juga sebaiknya dikompresi. WebP biasanya menjadi pilihan yang cukup baik untuk ilustrasi dan screenshot karena ukurannya lebih kecil daripada PNG tanpa kehilangan kualitas yang terlihat pada penggunaan normal.

Sebagai contoh, ilustrasi pada artikel ini berukuran 1400 x 747 piksel dengan ukuran file sekitar 72 KB.

Jangan masukkan teks penting ke dalam gambar

Teks di dalam gambar sulit dicari, disalin, diterjemahkan, dan dibaca screen reader. Gunakan gambar untuk membantu visualisasi, tetapi simpan penjelasan utama di dalam artikel.

Jika diagram memang membutuhkan label, pastikan ukurannya tetap terbaca pada layar kecil dan ulangi informasi penting tersebut dalam paragraf atau caption.

Kesimpulan

Gambar yang baik bukan sekadar hiasan. Ia membantu pembaca memahami bentuk masalah sebelum berhadapan dengan detail implementasi.

Untuk artikel berikutnya, pola sederhananya adalah: simpan aset secara lokal, kompres file, tulis alt text yang bermakna, tentukan ukuran, dan gunakan caption ketika gambar membutuhkan context tambahan.