Bagaimana saya melaksanakan imej responsif menggunakan & lt; Picture & Gt; Atribut elemen dan srcset?

Melaksanakan imej responsif dengan <picture></picture> dan srcset

Unsur <picture></picture> , digabungkan dengan atribut srcset , menyediakan cara yang mantap dan fleksibel untuk melaksanakan imej responsif. Ia membolehkan anda melayani versi imej yang berbeza yang dioptimumkan untuk pelbagai saiz skrin dan kepadatan. Inilah cara anda melaksanakannya:

Unsur <picture></picture> bertindak sebagai bekas. Di dalam, anda menentukan unsur -unsur <source></source> yang berbeza, masing -masing dengan atribut srcset yang menentukan satu set sumber imej dan deskriptor yang sepadan. Pelayar memilih imej yang paling sesuai berdasarkan keupayaan peranti. Akhirnya, anda menyertakan elemen <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="Bagaimana saya melaksanakan imej responsif menggunakan & lt; Picture & Gt; Atribut elemen dan srcset?" > sebagai sandaran untuk penyemak imbas yang tidak menyokong <picture></picture> .

Contohnya:

 <code class="html"><picture> <source srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" media="(min-width: 1024px)"> <source srcset="image-medium-res.jpg 1.5x, image-low-res.jpg 1x" media="(min-width: 768px)"> <source srcset="image-low-res.jpg" media="(max-width: 767px)"> <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="Description of image"> </source></source></source></picture></code>

Dalam contoh ini:

• srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" Menentukan dua imej untuk skrin dengan lebar minimum 1024px. 2x menunjukkan imej resolusi tinggi (dua kali ganda ketumpatan), manakala 1x adalah imej resolusi standard. Penyemak imbas akan memilih yang paling sesuai berdasarkan nisbah Pixel Peranti (DPR).
• Atribut srcset yang sama digunakan untuk pertanyaan media lain, mensasarkan saiz skrin yang berbeza.
• Elemen <img alt="Bagaimana saya melaksanakan imej responsif menggunakan & lt; Picture & Gt; Atribut elemen dan srcset?" > menyediakan sandaran jika penyemak imbas tidak menyokong <picture></picture> atau <source></source> .

Ingatlah untuk menggantikan "image-high-res.jpg" , "image-medium-res.jpg" , dan "image-low-res.jpg" dengan nama fail imej sebenar anda. Atribut alt adalah penting untuk kebolehcapaian.

Faedah <picture></picture> dan srcset

Menggunakan <picture></picture> dan srcset menawarkan beberapa kelebihan ke atas teknik imej responsif lain seperti menggunakan CSS max-width atau hanya mengubah saiz imej dengan perisian penyuntingan imej:

• Kawalan yang tepat: <picture></picture> membolehkan kawalan berbutir di mana imej dihidangkan berdasarkan pelbagai faktor (saiz skrin, kepadatan piksel, keupayaan peranti). Ini memastikan kualiti dan prestasi imej yang optimum di semua peranti.
• Kecekapan: Dengan melayani hanya resolusi imej yang diperlukan, anda mengurangkan penggunaan jalur lebar dan meningkatkan masa beban halaman. Ini amat penting untuk pengguna mudah alih.
• Fleksibiliti: Anda boleh menggabungkan format imej yang berbeza (misalnya, Webp untuk pemampatan yang lebih baik) dalam elemen <picture></picture> , memanfaatkan format terbaik untuk setiap peranti.
• Masa Depan-Proofing: Atribut <picture></picture> dan atribut srcset disokong oleh semua pelayar moden utama, dan kaedah ini disyorkan oleh banyak pakar prestasi web.

Mengoptimumkan imej untuk <picture></picture> dan srcset

Mengoptimumkan imej adalah penting untuk masa pemuatan cepat apabila menggunakan <picture></picture> dan srcset . Inilah Caranya:

• Pilih format yang betul: Gunakan format moden seperti Webp, AVIF, atau JPEG 2000 yang menawarkan mampatan unggul berbanding dengan JPEG atau PNG tradisional. Pertimbangkan menggunakan format yang berbeza untuk saiz dan kepadatan skrin yang berbeza, memilih kompromi terbaik antara kualiti dan saiz fail.
• Mampatan: Gunakan alat pengoptimuman imej (misalnya, tinypng, imageoptim) untuk mengurangkan saiz fail tanpa kehilangan kualiti yang signifikan. Pertimbangkan mampatan lossy untuk imej di mana pengurangan kualiti sedikit boleh diterima.
• Resolusi yang sesuai: Menyediakan hanya resolusi yang diperlukan. Elakkan imej yang terlalu besar yang tidak perlu resolusi tinggi untuk skrin yang lebih kecil.
• Prinsip Reka Bentuk Responsif: Pastikan skala imej anda secara proporsional dengan susun atur anda menggunakan CSS. Elakkan menggunakan imej besar yang kemudiannya dikurangkan menggunakan CSS - ini tidak cekap.

Keserasian penyemak imbas

<picture></picture> dan srcset disokong secara meluas oleh pelayar moden. Walau bagaimanapun, pelayar yang lebih tua mungkin tidak menyokong mereka sepenuhnya. Inilah yang harus anda pertimbangkan:

• Mekanisme Fallback: Sentiasa sertakan elemen <img alt="Bagaimana saya melaksanakan imej responsif menggunakan & lt; Picture & Gt; Atribut elemen dan srcset?" > dalam elemen <picture></picture> sebagai sandaran untuk penyemak imbas yang tidak menyokong <picture></picture> atau srcset . Ini memastikan bahawa imej sentiasa dipaparkan.
• Peningkatan Progresif: <picture></picture> dan srcset adalah peningkatan progresif. Mereka meningkatkan pengalaman untuk menyokong penyemak imbas, sementara masih memberikan sandaran berfungsi untuk pelayar yang lebih tua. Imej sandaran akan digunakan oleh pelayar yang lebih tua.
• Ujian: Menguji pelaksanaan anda dengan teliti merentasi pelayar dan peranti yang berlainan untuk memastikan rendering dan prestasi yang konsisten. Gunakan alat pemaju penyemak imbas untuk memeriksa imej mana yang dimuatkan dan pastikan ia sepadan dengan jangkaan anda. Alat seperti Lighthouse juga boleh memberikan pandangan yang berharga ke dalam pengoptimuman imej.

Atas ialah kandungan terperinci Bagaimana saya melaksanakan imej responsif menggunakan & lt; Picture & Gt; Atribut elemen dan srcset?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!