Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?

Apakah gambar responsif? Bagaimanakah anda dapat melaksanakan imej responsif menggunakan elemen dan atribut SRCSET?

Imej responsif adalah imej yang menyesuaikan dan menyesuaikan diri dengan saiz, resolusi, dan peranti yang berbeza secara automatik, memastikan bahawa mereka memaparkan dengan berkesan dan cekap merentasi pelbagai konteks tontonan. Pendekatan ini membantu meningkatkan pengalaman pengguna dengan melayani imej yang sesuai dengan saiz dan kualiti untuk peranti pengguna, dengan itu berpotensi mengurangkan masa beban dan memelihara jalur lebar.

Untuk melaksanakan imej yang responsif, anda boleh menggunakan elemen <picture></picture> bersama -sama dengan atribut srcset . Inilah cara anda boleh melakukannya:

Menggunakan elemen <picture></picture> :

Unsur <picture></picture> membolehkan anda menawarkan versi yang berbeza dari imej untuk senario yang berbeza, seperti resolusi peranti atau orientasi yang berbeza -beza. Inilah contoh:

 <code class="html"><picture> <source media="(max-width: 799px)" srcset="small-image.jpg"> <source media="(min-width: 800px)" srcset="large-image.jpg"> <img src="/static/imghw/default1.png" data-src="fallback-image.jpg" class="lazy" alt="Description of the image"> </source></source></picture></code>

Dalam contoh ini, penyemak imbas akan memilih imej yang sesuai berdasarkan lebar paparan. Jika viewport kurang daripada 800px, small-image.jpg akan digunakan. Jika tidak, large-image.jpg akan dimuatkan. Elemen <img src="/static/imghw/default1.png" data-src="default-image.jpg" class="lazy" alt="Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?" > di dalam <picture></picture> berfungsi sebagai imej sandaran jika tiada unsur <source></source> sepadan dengan keupayaan penyemak imbas.

Menggunakan atribut srcset :

Atribut srcset pada tag <img src="/static/imghw/default1.png" data-src="default-image.jpg" class="lazy" alt="Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?" > membolehkan anda menentukan pelbagai sumber imej dengan lebar atau resolusi masing -masing. Penyemak imbas kemudian boleh memilih imej yang paling sesuai berdasarkan keadaan paparan semasa. Inilah cara menggunakannya:

 <code class="html"><img src="/static/imghw/default1.png" data-src="default-image.jpg" class="lazy" srcset="small-image.jpg 300w, medium-image.jpg 600w, large-image.jpg 1200w" sizes="(max-width: 300px) 300px, (max-width: 600px) 600px, 1200px" alt="Description of the image"></code>

Dalam contoh ini, atribut srcset menyenaraikan sumber imej yang berbeza dengan lebarnya. Atribut sizes membantu penyemak imbas memahami susun atur imej dan memilih sumber yang sesuai. Jika lebar viewport adalah 300px atau kurang, penyemak imbas akan memuatkan small-image.jpg , dan sebagainya.

Apakah faedah menggunakan imej responsif di laman web?

Menggunakan imej responsif di laman web menawarkan beberapa manfaat penting:

1. Pengalaman pengguna yang lebih baik : Imej responsif Pastikan imej dipaparkan pada saiz dan kualiti yang sesuai untuk peranti pengguna, yang boleh membawa kepada masa beban halaman yang lebih cepat dan pengalaman melayari yang lebih menyenangkan.
2. Penjimatan Bandwidth : Dengan melayani imej yang merupakan saiz yang betul untuk peranti pengguna, anda mengurangkan jumlah data yang dipindahkan. Ini boleh menjadi sangat penting bagi pengguna mudah alih mengenai pelan data terhad.
3. Prestasi yang lebih baik : Imej yang lebih kecil, bersaiz sesuai memuat lebih cepat, yang dapat meningkatkan prestasi keseluruhan laman web. Ini boleh menyumbang kepada kedudukan enjin carian yang lebih baik, kerana kelajuan beban halaman adalah faktor dalam SEO.
4. Fleksibiliti dan Kesesuaian : Imej responsif membolehkan laman web untuk menyesuaikan diri dengan lancar dengan peranti dan saiz skrin yang berbeza, mengekalkan rupa dan rasa yang konsisten di semua platform.
5. Kebolehcapaian yang dipertingkatkan : Dengan memastikan bahawa imej bersaiz sesuai dan dimuatkan dengan cekap, anda boleh meningkatkan kebolehcapaian untuk pengguna dengan sambungan internet yang lebih perlahan atau peranti yang lebih lama.

Bagaimanakah elemen berbeza daripada menggunakan atribut SRCSET sahaja dalam melaksanakan imej responsif?

Elemen <picture></picture> dan atribut srcset kedua -duanya berfungsi dengan tujuan melaksanakan imej responsif, tetapi mereka berbeza dalam pendekatan dan keupayaan mereka:

• Tujuan : Elemen <picture></picture> terutamanya digunakan untuk arah seni, yang membolehkan anda melayani imej yang berbeza berdasarkan senario paparan yang berbeza, seperti tanaman imej atau format yang berbeza. Sebaliknya, atribut srcset difokuskan pada melayani imej yang sama dalam pelbagai saiz atau resolusi.
• Sintaks dan Penggunaan : Elemen <picture></picture> menggunakan pelbagai <source></source> elemen di dalamnya untuk menentukan imej yang berbeza dan keadaan mereka. Atribut srcset , sebaliknya, digunakan secara langsung pada tag <img alt="Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?" > untuk menyenaraikan versi yang berbeza dari imej yang sama.
• Fallback : Elemen <picture></picture> termasuk tag <img alt="Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?" > , yang digunakan jika tiada elemen <source></source> sepadan dengan keupayaan penyemak imbas. Atribut srcset juga mempunyai mekanisme sandaran, di mana atribut src pada tag <img alt="Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?" > berfungsi sebagai imej lalai jika penyemak imbas tidak menyokong srcset .
• Kawalan : Elemen <picture></picture> menyediakan lebih banyak kawalan ke atas imej yang dipaparkan di bawah keadaan tertentu, seperti orientasi peranti yang berbeza atau resolusi skrin. Atribut srcset , sementara yang berkuasa, lebih terhad untuk melayani saiz yang berbeza dari imej yang sama.

Penyemak imbas mana yang menyokong elemen dan atribut SRCSET untuk imej responsif?

Unsur <picture></picture> dan atribut srcset disokong secara meluas oleh pelayar moden, tetapi pengangkatan mereka berbeza -beza:

• elemen : elemen <picture></picture> disokong oleh semua pelayar moden utama, termasuk Chrome, Firefox, Safari, Edge, dan Opera. Ia diperkenalkan pada tahun 2014 dan sejak itu mendapat sokongan yang meluas.
• Atribut SRCSET : Atribut srcset juga disokong oleh semua pelayar moden utama, termasuk Chrome, Firefox, Safari, Edge, dan Opera. Ia diperkenalkan pada tahun 2012 dan telah diterima pakai secara meluas.

Bagi pelayar yang lebih tua yang tidak menyokong ciri -ciri ini, anda boleh menggunakan polyfills atau sandaran untuk memastikan bahawa imej responsif masih berfungsi dengan berkesan. Sebagai contoh, Perpustakaan picturefill JavaScript boleh digunakan untuk memberikan sokongan untuk elemen <picture></picture> dalam pelayar yang lebih tua.

Atas ialah kandungan terperinci Apakah gambar responsif? Bagaimana anda boleh melaksanakan imej responsif menggunakan & lt; gambar & gt; elemen dan atribut srcset?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!