Melaksanakan imej responsif dengan atribut HTML SRCSET dan Saiz

SRCSET dan saiz adalah sifat utama untuk pelaksanaan imej responsif HTML. SRCSET menyediakan pelbagai sumber imej dan kepadatan lebar atau piksel mereka, seperti 400W dan 800W, dan penyemak imbas memilih imej yang sesuai dengan sewajarnya; Saiz mentakrifkan lebar paparan imej di bawah lebar skrin yang berbeza, seperti (maksimum lebar: 600px) 100VW, 50VW, supaya penyemak imbas dapat lebih tepat sesuai dengan saiz imej. Dalam penggunaan sebenar, anda perlu menyediakan gambar pelbagai saiz, dengan jelas dinamakan, susun atur reka bentuk mengikut pertanyaan media, dan menguji prestasi peralatan untuk mengelakkan mengabaikan saiz atau kesilapan unit, dengan itu menjimatkan lebar jalur dan meningkatkan prestasi.

Apabila laman web dimuatkan, imej sering menduduki jalur lebar maksimum. Untuk membolehkan peranti yang berbeza untuk memuatkan imej saiz yang betul, HTML menyediakan sifat srcset dan sizes untuk melaksanakan imej yang responsif.

Apa itu srcset ?

srcset membolehkan anda menyediakan pelbagai sumber imej untuk penyemak imbas anda dan memberitahu kepadatan lebar atau piksel imej tersebut. Dengan cara ini, penyemak imbas boleh memilih gambar yang paling sesuai untuk dimuatkan mengikut saiz skrin dan resolusi peranti semasa.

Contohnya:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225052011544.jpeg"  class="lazy"  src = "image-400w.jpg" 
     SRCSET = "Image-400W.JPG 400W, Image-800W.JPG 800W, Image-1200W.JPG 1200W"
     alt = "Contoh gambar">

Dalam kod di atas, penyemak imbas akan memilih fail imej yang sesuai dari senarai srcset berdasarkan nisbah ruang dan peranti piksel yang tersedia.

Mata Utama:

• Setiap gambar diikuti dengan lebarnya (berakhir dengan w ), seperti 400w
• Pelayar membuat pertimbangan berdasarkan saiz viewport, nisbah skala dan faktor lain

Apakah fungsi sizes ?

Walaupun srcset menyediakan pelbagai imej, penyemak imbas tidak tahu betapa besar imej itu akan muncul di halaman. Pada masa ini, sizes diperlukan untuk memberitahu penyemak imbas: "Seberapa luas imej ini dipaparkan di bawah lebar skrin yang berbeza."

Contohnya:

 <img src = "image-400w.jpg" 
     SRCSET = "Image-400W.JPG 400W, Image-800W.JPG 800W, Image-1200W.JPG 1200W"
     saiz = "(max-width: 600px) 100vw, 50vw"
     alt = "Contoh gambar">

Makna sizes baris ini adalah:

• Sekiranya lebar skrin kurang daripada atau sama dengan 600px, imej akan mengisi keseluruhan lebar viewport (100VW)
• Jika tidak, imej mengambil separuh lebar viewport (50VW)

Manfaat menggunakan kombinasi dengan srcset :

• Penyemak imbas lebih tepat memilih saiz imej "Just Right" dengan tepat
• Elakkan memuatkan imej yang terlalu besar atau terlalu kecil, menjimatkan jalur lebar dan meningkatkan prestasi

Cadangan dalam Penggunaan Sebenar

Untuk lebih baik menggunakan kedua -dua sifat ini, anda boleh mengikuti cadangan praktikal berikut:

• Sediakan gambar pelbagai saiz : disyorkan untuk menghasilkan 3 hingga 4 versi lebar biasa (seperti 400px, 800px, 1200px)
• Jelas Penamaan : Sebagai contoh, gunakan -400w.jpg dan -800w.jpg untuk menandakan lebar imej
• Susun atur reka bentuk bersempena dengan pertanyaan media : Pastikan titik putus dalam sizes selaras dengan pertanyaan media CSS
• Uji prestasi peranti yang berbeza : Chrome Devtools boleh digunakan untuk mensimulasikan peranti yang berbeza untuk melihat gambar mana yang dimuatkan

Jika anda menggunakan CMS atau penjana laman web statik, banyak sokongan secara automatik menjana srcset dan gambar saiz yang berbeza, yang dapat menjimatkan kerumitan pemprosesan manual.

Jangan abaikan perincian kecil

Sesetengah pemaju hanya menulis srcset tetapi mengabaikan sizes , supaya pelayar hanya boleh menilai saiz imej berdasarkan lebar paparan, yang boleh membawa kepada pemilihan imej yang salah. Terutama apabila gambar itu bukan lebar skrin penuh, menambah sizes boleh benar -benar memberikan permainan penuh kepada kelebihan responsif.

Satu lagi tempat yang mudah untuk membuat kesilapan adalah bahawa unit itu menulis secara tidak betul, seperti menulis w sebagai px atau hilang w , yang akan menyebabkan penyemak imbas gagal untuk menghuraikan dengan betul.

Pada dasarnya itu sahaja. Penggunaan rasional srcset dan sizes bukan sahaja dapat meningkatkan kelajuan pemuatan, tetapi juga meningkatkan pengalaman melayari pengguna mudah alih.

Atas ialah kandungan terperinci Melaksanakan imej responsif dengan atribut HTML SRCSET dan Saiz. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!