HTML Academy · Pelajaran

Elemen picture untuk Art Direction

Tukar seluruh gambar berdasarkan kondisi viewport.

Elemen picture untuk Art Direction adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Masalah Pengarahan Seni

Pengarahan seni berarti menyajikan crop atau komposisi gambar yang secara mendasar berbeda berdasarkan ukuran layar:

Foto lanskap penuh di desktop
crop potret yang diperbesar di perangkat seluler
Hal ini tidak dapat diselesaikan hanya dengan srcset + sizes

Elemen picture

Elemen <picture> membungkus beberapa elements <source> dan fallback <img>:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Cara Kerja picture

Browser mengevaluasi elements <source> secara berurutan, dari atas ke bawah:

Periksa kondisi media pada source pertama — jika cocok, gunakan gambar tersebut
Periksa source kedua — jika cocok, gunakan gambar tersebut
Lanjutkan ke <img> sebagai pilihan bawaan

Elemen <img> tetap menampilkan gambar yang dipilih dan membawa teks alt.

Pergantian Format with picture

<picture> juga dapat memilih format gambar berdasarkan dukungan browser:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Menggabungkan Pengarahan Seni dan Format

Anda dapat menggabungkan kondisi media dan pemilihan format:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

Elemen img Wajib Ada

Elemen <img> di dalam <picture> tidak bersifat opsional:

Elemen ini menampilkan gambar yang dipilih
Elemen ini membawa teks alt untuk aksesibilitas
Elemen ini membawa atribut width, height, loading, dan atribut lainnya
Tanpanya, tidak ada yang ditampilkan

Atribut media pada source

Atribut media menerima kueri media CSS standar:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

srcset pada source with Pemilihan Responsif

Gabungkan pengarahan seni dengan srcset untuk mendapatkan kendali penuh:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Gambar Mode Gelap

Sajikan gambar yang berbeda untuk pengguna mode gelap:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture vs background-image CSS

Kapan menggunakan <picture> dibandingkan latar belakang CSS:

Gambar konten — gunakan <picture>: memerlukan teks alt dan merupakan bagian dari konten dokumen
Gambar dekoratif — gunakan background-image CSS dengan kueri media
Gambar penting untuk SEO — selalu gunakan <picture>: perayap mengindeks elements img

Catatan Aksesibilitas

Atribut alt selalu berada pada <img>, bukan pada <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Pemuatan Lambat with picture

Tambahkan pemuatan lambat pada <img> di dalam <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Pemeriksaan Singkat

Elemen mana dalam blok picture yang harus selalu ada dan membawa atribut alt?

Ringkasan: Elemen picture

Pengarahan seni with picture:

<picture> membungkus elements <source> dan <img>
Browser memilih <source> pertama yang cocok
Gunakan media untuk kondisi area pandang, dan type untuk pemilihan format
<img> wajib ada — elemen ini menampilkan gambar dan membawa teks alt
Gabungkan dengan srcset + sizes untuk kendali responsif penuh

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen picture untuk Art Direction” gratis?

Ya — teks lengkap “Elemen picture untuk Art Direction” 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 picture untuk Art Direction”?

Tukar seluruh gambar berdasarkan kondisi viewport. 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 3 dari 4.

Berapa lama pelajaran “Elemen picture untuk Art Direction” 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

Elemen img src alt width height
Gambar Responsif dengan srcset dan sizes
Elemen picture untuk Art Direction
figure dan figcaption

← Kembali ke HTML Academy