0Pricing
HTML Academy · Pelajaran

Elemen img src alt width height

Sisipkan gambar dengan benar menggunakan semua atribut yang diperlukan.

Elemen img src alt width height adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen Gambar

Elemen <img> menyematkan gambar ke dalam halaman:

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

Atribut Sumber

Atribut src menentukan sumber gambar:

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

Atribut Teks Alternatif

Atribut alt menyediakan teks alternatif untuk gambar:

  • Ditampilkan saat gambar gagal dimuat
  • Dibacakan oleh pembaca layar
  • Diindeks oleh mesin pencari
  • Diperlukan untuk aksesibilitas (WCAG)

Menulis Teks Alternatif yang Baik

Cara menulis teks alternatif yang efektif:

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Atribut Lebar dan Tinggi

Selalu tentukan width dan height pada gambar:

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

Rasio Aspek dan CSS

Menetapkan lebar dan tinggi dalam HTML memungkinkan CSS menghitung rasio aspek:

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Format Gambar di Web

Format gambar umum dan waktu penggunaannya:

  • JPEG/JPG — foto, gambar kompleks dengan banyak warna
  • PNG — gambar yang memerlukan transparansi
  • WebP — format modern: lebih kecil daripada JPEG/PNG, mendukung transparansi
  • AVIF — generasi berikutnya: kompresinya bahkan lebih baik daripada WebP
  • SVG — ikon dan ilustrasi (vektor, dapat diskalakan tanpa batas)
  • GIF — animasi sederhana (sebagian besar telah digantikan oleh video)

Atribut Pemuatan

Kontrol kapan gambar dimuat dengan atribut loading:

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

Atribut Pengodean

Atribut decoding mengontrol perilaku pengodean gambar:

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

Atribut Prioritas Pengambilan

Atribut fetchpriority memberikan petunjuk tentang prioritas pemuatan gambar:

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Contoh Elemen Gambar Lengkap

Gambar yang sepenuhnya aksesibel dan dioptimalkan untuk kinerja:

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Pemeriksaan Cepat

Mengapa Anda harus selalu menyertakan atribut lebar dan tinggi pada elemen img?

Rangkuman: Elemen Gambar

Hal-hal penting tentang penyematan gambar:

  • src — alamat web gambar (relatif atau absolut)
  • alt — deskripsi yang diperlukan; kosong untuk gambar dekoratif
  • width dan height — selalu tetapkan untuk mencegah pergeseran tata letak
  • loading="lazy" untuk gambar di bawah lipatan halaman
  • Pilih format yang tepat: WebP/AVIF untuk foto, SVG untuk ikon

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen img src alt width height” gratis?

Ya — teks lengkap “Elemen img src alt width height” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen img src alt width height”?

Sisipkan gambar dengan benar menggunakan semua atribut yang diperlukan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Elemen img src alt width height” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen img src alt width height
  2. Gambar Responsif dengan srcset dan sizes
  3. Elemen picture untuk Art Direction
  4. figure dan figcaption
← Kembali ke HTML Academy