Cara membina imej responsif dengan srcset

Artikel ini, sebahagian daripada Siri Pembangunan Web Microsoft, meneroka imej yang responsif - aspek penting untuk mewujudkan laman web yang berfungsi dengan sempurna merentasi pelbagai peranti. Ia tidak lagi pilihan; Ini adalah keperluan dalam dunia berbilang peranti kita.

Takeaways utama:

Gunakan atribut
• untuk menawarkan pelbagai sumber imej yang dioptimumkan untuk nisbah piksel peranti yang berbeza. srcset
Gabungkan
• dengan atribut srcset untuk menentukan saiz paparan imej berbanding dengan viewport, membimbing penyemak imbas untuk memilih imej yang terbaik. sizes
memanfaatkan elemen
• untuk fleksibiliti yang dipertingkatkan, membolehkan pemilihan imej berdasarkan keadaan media (seperti pertanyaan media CSS) dan menyokong pelbagai format imej melalui atribut <picture></picture>. type
Sentiasa sertakan imej lalai menggunakan atribut
• sebagai sandaran untuk penyemak imbas yang kurang src sokongan. srcset
Responsif dan prestasi ujian secara menyeluruh merentasi pelbagai peranti dan penyemak imbas menggunakan alat seperti yang ditawarkan oleh Microsoft untuk pemeriksaan keserasian dan pengoptimuman pengalaman web.

Memahami Imej Responsif:

Imej responsif menyesuaikan persembahannya ke peranti tontonan. "Bentuk terbaik" bermaksud perkara yang berbeza:

memaparkan aset imej yang berbeza berdasarkan saiz skrin (mis., Imej yang berbeza untuk komputer riba 13.5 inci berbanding telefon 5 inci).
menggunakan imej yang berbeza berdasarkan resolusi peranti (atau nisbah peranti-piksel-nisbah piksel peranti ke piksel CSS).
Memilih format imej (seperti JPEG XR) jika disokong oleh penyemak imbas, berpotensi untuk pemampatan yang lebih baik.

Mengaktifkan imej responsif:

Walaupun kaedah skrip yang lebih lama wujud, mereka tidak disyorkan kerana isu -isu yang berpotensi dengan pelbagai muat turun atau imej yang hilang. Pendekatan pilihan menggunakan:

1. atribut srcset
2. atribut sizes
3. elemen <picture></picture>

atribut : srcset

sebelum menyelam ke

penggunaan, mari kita tentukan: srcset Nisbah peranti-piksel peranti:

Ketumpatan piksel peranti (piksel fizikal per inci): Peranti resolusi yang lebih tinggi mempunyai ketumpatan yang lebih tinggi dan dengan itu nisbah peranti piksel yang lebih tinggi pada tahap zoom yang sama.

Tahap Zum Penyemak Imbas: Tahap zum yang lebih tinggi meningkatkan nisbah peranti-piksel untuk peranti tertentu.

BASIC Pelaksanaan menggunakan
2. deskriptor untuk nisbah peranti-piksel:

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="How to Build Responsive Images with srcset " />

• 1x: untuk nisbah peranti-piksel 1. space-needle.jpg
2x:
• untuk nisbah peranti-piksel 2. space-needle-2x.jpg
3x: untuk nisbah peranti-piksel 3.
• space-needle-hd.jpg
atribut
berfungsi sebagai sandaran untuk penyemak imbas tanpa

sokongan. Deskriptor src menentukan lebar imej: srcset w

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >

atribut

: sizes Untuk mengawal saiz imej berdasarkan saiz viewport, gunakan atribut

dengan

deskriptor dalam sizes. w srcset

Contoh 1 (imej pada setengah lebar viewport):
Contoh 2 (saiz responsif berdasarkan lebar viewport):

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >

elemen

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >

:

<picture></picture> elemen membolehkan pemilihan imej berdasarkan keupayaan saiz dan penyemak imbas yang diberikan. Ia mengandungi unsur -unsur

dengan atribut

, <picture></picture>, <source></source>, dan srcset. An sizes media type (Nota: Sumber dan saiz imej adalah ilustrasi.) <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png?x-oss-process=image/resize,p_40" class="lazy" alt="How to Build Responsive Images with srcset ">

Kesimpulan:

Imej responsif meningkatkan pengalaman pengguna di seluruh peranti. Melaksanakannya untuk prestasi laman web yang optimum. Sumber dan alat selanjutnya dari Microsoft tersedia untuk ujian silang pelayar dan amalan terbaik pembangunan web. Seksyen Soalan Lazim terperinci berikut, menangani soalan -soalan umum mengenai pelaksanaan .

Atas ialah kandungan terperinci Cara membina imej responsif dengan srcset. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!