HTML Academy · Pelajaran

Imej Responsif dengan srcset dan sizes

Hidangkan imej dengan saiz yang sesuai untuk ketumpatan skrin yang berbeza.

Pelajaran 2 daripada 414 langkah

Imej Responsif dengan srcset dan sizes ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Masalah dengan Imej Tunggal

Satu imej besar yang dihantar kepada semua peranti membazirkan lebar jalur pada skrin kecil:

Telefon dengan skrin 390px tidak memerlukan imej 2400px
Monitor 4K memerlukan imej beresolusi lebih tinggi berbanding 96dpi
Imej responsif menyediakan imej yang tepat untuk skrin yang tepat

Atribut srcset

srcset menyediakan senarai sumber imej bersama lebarnya:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Pengecam Ketumpatan Piksel

Gunakan pengecam 1x, 2x dan 3x untuk imej bersaiz tetap pada resolusi yang berbeza:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Atribut sizes

sizes memberitahu pelayar selebar mana imej akan dipaparkan pada saiz ruang pandang yang berbeza:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Cara Pelayar Memilih Imej

Pelayar mengira: nilai sizes × nisbah piksel peranti untuk memilih daripada srcset:

Ruang pandang 600px, DPR 2×, size=100vw → memerlukan imej 1200px → memilih 1600w
Ruang pandang 1200px, DPR 1×, size=50vw → memerlukan imej 600px → memilih 800w
Selepas dimuatkan, pelayar menyimpan imej dalam cache dan mungkin tidak memuatkannya semula

Nilai sizes Lalai

Tanpa sizes, pelayar menganggap imej menggunakan seluruh lebar ruang pandang (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Pengecam Lebar srcset berbanding Pengecam x

Dua mod srcset:

Pengecam lebar (w) — dengan sizes: pemilihan yang fleksibel dan mengambil kira susun atur
Pengecam ketumpatan piksel (x) — imej bersaiz tetap pada pelbagai resolusi

Gunakan pengecam w untuk kebanyakan imej responsif. Gunakan x untuk ikon, logo dan elemen bersaiz tetap.

Menjana Fail srcset

Alat yang menjana variasi imej responsif:

Sharp (Node.js) — penskalaan saiz imej secara terprogram
Squoosh — berasaskan pelayar, dengan perbandingan visual
Cloudinary / Imgix — penskalaan saiz berdasarkan URL atas permintaan
Plugin Webpack / Vite — penjanaan semasa binaan

srcset dengan WebP dan Sandaran

Gabungkan srcset dengan <picture> untuk menyediakan sandaran format:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Arah Seni berbanding Penukaran Resolusi

Dua jenis masalah imej responsif:

Penukaran resolusi — imej yang sama pada resolusi berbeza → gunakan srcset + sizes
Arah seni — pemangkasan atau komposisi berbeza pada skrin yang berbeza → gunakan <picture> dengan <source media>

Menguji Imej Responsif

Cara mengesahkan srcset berfungsi:

Buka DevTools → tab Rangkaian → tapis Imej
Tetapkan emulasi peranti kepada pelbagai saiz ruang pandang dan DPR
Muat semula — semak fail yang diminta oleh pelayar
Semak juga: Lighthouse → Prestasi → audit imej bersaiz sesuai

Sokongan Pelayar untuk srcset

Sokongan pelayar untuk srcset sangat baik:

Disokong dalam semua pelayar moden (Chrome, Firefox, Safari dan Edge)
Sandaran src mengendalikan pelayar lama
Tiada polyfill diperlukan untuk penggunaan produksi

Semakan Pantas

Apakah yang diberitahu oleh atribut sizes kepada pelayar?

Jawab dalam pelajaran interaktif

Ringkasan: srcset dan sizes

Asas imej responsif:

srcset — senarai fail imej bersama lebar intrinsik atau ketumpatan pikselnya
sizes — keadaan media yang menerangkan lebar paparan imej
Pelayar memilih padanan terbaik: nilai sizes × DPR peranti
Pengecam lebar (w) untuk imej fleksibel; x untuk elemen bersaiz tetap
Sentiasa sediakan src sebagai sandaran

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Imej Responsif dengan srcset dan sizes” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Imej Responsif dengan srcset dan sizes”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Imej Responsif dengan srcset dan sizes”?

Hidangkan imej dengan saiz yang sesuai untuk ketumpatan skrin yang berbeza. Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Imej Responsif dengan srcset dan sizes” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy