Penjelasan detail tentang elemen gambar dalam HTML5 dan pemrosesan gambar responsif

Yang disebut desain responsif berarti tata letak halaman web dapat disesuaikan secara adaptif di perangkat terminal dengan resolusi layar berbeda, rasio kepadatan piksel berbeda, dan lebar berbeda. Tujuan awal dari desain responsif adalah untuk membuat situs web PC asli kompatibel dengan terminal seluler. Sebagian besar halaman web responsif diimplementasikan melalui kueri media dan memuat file CSS dengan gaya berbeda. Tata letak fleksibel semacam ini membuat tata letak situs web lebih masuk akal di berbagai terminal perangkat.

Meskipun desain responsif memiliki banyak kelebihan, namun juga memiliki banyak kekurangan. Karena PC dan terminal seluler mengakses situs web yang sama, PC tidak perlu mempedulikan batasan lalu lintas, tetapi terminal seluler tidak dapat mengabaikannya.

Untuk beradaptasi dengan lebar layar dan kepadatan piksel model terminal yang berbeda, kami biasanya menggunakan metode berikut untuk mengatur gaya CSS gambar:

 <gaya> img{ lebar maksimal:100%; tinggi:otomatis;

Atur lebar maksimum gambar menjadi 100% untuk memastikan bahwa gambar tidak melebihi lebar elemen induknya. Jika lebar elemen induknya berubah, lebar gambar juga akan berubah tinggi: otomatis dapat memastikan bahwa lebar gambar berubah, tinggi gambar akan diskalakan menurut rasio lebar dan tinggi gambar tersebut.

Dengan cara ini, saat kami mengakses gambar di halaman web responsif pada perangkat seluler, kami hanya menskalakan resolusi gambar dan mengunduh gambar berukuran besar di PC. Hal ini tidak hanya membuang lalu lintas dan bandwidth, tetapi juga memperlambat halaman web. Kecepatan pembukaan sangat mempengaruhi pengalaman pengguna.

1. <picture> adalah elemen baru HTML5;
2. Jika elemen <picture> bekerja sama dengan elemen <audio> dan <video> saat ini, hal ini akan meningkatkan proses kerja gambar responsif. Hal ini memungkinkan beberapa tag <source> diatur di dalamnya untuk menentukan nama file gambar yang berbeda ;
3. <gambar> dapat memuat gambar yang berbeda sesuai dengan kondisi yang berbeda. Kondisi ini dapat berupa tinggi jendela saat ini (area pandang), lebar (lebar), arah (orientasi), kerapatan piksel (dpr), dll.;

Dalam chestnut berikut, gambar yang berbeda dimuat untuk lebar layar yang berbeda; minpic.png dimuat ketika lebar halaman antara 320px dan 640px middle.png dimuat ketika lebar halaman lebih besar dari 640px.

 <gambar> <media sumber=(lebar minimum: 320 piksel) dan (lebar maksimal: 640 piksel) srcset=img/minpic.png> <media sumber=(lebar minimum: 640 piksel) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width: 320px) dan (lebar maksimal: 640 piksel) dan (orientasi: lanskap) srcset=img/minpic_landscape.png> <source media=(lebar minimum: 320 piksel) dan (lebar maksimal: 640 piksel) dan (orientasi: potret) srcset=img/ minpic_portrait.png> <media sumber=(lebar minimum: 640 piksel) dan (orientasi: lanskap) srcset=img/middlepic_landscape.png> <media sumber=(lebar minimum: 640 piksel) dan (orientasi: potret) srcset=img/middlepic_portrait.png> <img src=img/picture.png <media sumber =(lebar minimum: 320 piksel) dan (lebar maksimal: 640 piksel) srcset=img/minpic.png,img/minpic_retina.png 2x> <media sumber=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <tipe sumber=gambar/webp srcset=img/picture.webp> <img src=img/picture.png ukuran=90vw srcset=picture-160.png 160w, gambar-320.png 320w, gambar-640.png 640w, gambar-1280.png 1280w>

6. Tambahkan atribut ukuran pada contoh berikut; muat versi gambar yang sesuai ketika lebar jendela lebih besar dari atau sama dengan 800px;

 <media sumber=(min-width: 800px) ukuran=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 .png ukuran=90vw srcset=gambar-160.png 160w, gambar-320.png 320w, gambar-640.png 640w, gambar-1280.png 1280w>

kesesuaian:

Saat ini, hanya Chrome, Firefox, dan Opera yang memiliki kompatibilitas yang baik dengannya.

1. Muat file gambar berukuran sesuai sehingga bandwidth yang tersedia dimanfaatkan sepenuhnya;
2. Memuat gambar yang dipotong secara berbeda dan memiliki rasio aspek berbeda untuk mengakomodasi perubahan tata letak pada lebar berbeda;
3. Memuat kepadatan piksel lebih tinggi dan menampilkan gambar beresolusi lebih tinggi;

1. Buat tag <gambar></gambar>;
2. Di dalam tag ini buat tag <source></scource> yang ingin Anda gunakan untuk menjalankan fitur apa pun;
3. Tambahkan atribut media untuk menyertakan karakteristik yang Anda inginkan, seperti lebar (lebar maksimal, lebar minimum), orientasi (orientasi), dll.;
4. Tambahkan atribut srcset, nilai atributnya adalah nama file gambar yang sesuai, dan muat. Jika Anda ingin memberikan kepadatan piksel yang berbeda, seperti tampilan Retina, Anda dapat menambahkan nama file tambahan ke atribut srcset;
5. Tambahkan tag <img> cadangan;

Seperti yang dapat dilihat dari contoh kode di atas, tanpa memperkenalkan js dan perpustakaan pihak ketiga, dan tanpa menyertakan media queries dalam CSS, elemen <picture> dapat mendeklarasikan gambar responsif hanya dengan menggunakan HTML;

Tag <picture> sendiri tidak memiliki atribut. Bagian ajaibnya adalah <gambar> digunakan sebagai wadah untuk <sumber>.

Elemen <source>, yang digunakan untuk memuat multimedia seperti video dan audio, telah diperbarui untuk memuat gambar dan beberapa atribut baru telah ditambahkan:

Menerima satu jalur file gambar (misalnya: srcset=img/minpic.png).

Atau merupakan jalur gambar yang dipisahkan koma yang dijelaskan berdasarkan kepadatan piksel (seperti: srcset=img/minpic.png, img/minpic_retina.png 2x).

Menerima kueri media apa pun yang divalidasi, seperti yang Anda lihat di pemilih CSS @media (mis. media=(min-width: 320px)).

Ini telah digunakan dalam contoh sintaks <gambar> sebelumnya.

Menerima deskripsi lebar tunggal (misalnya: ukuran=100vw) atau deskripsi lebar kueri media tunggal (misalnya: ukuran=(min-width: 320px) 100vw).

Atau deskripsi lebar kueri media yang dipisahkan koma (misalnya: size=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) Yang terakhir digunakan sebagai default.

Menerima jenis MIME yang didukung (misalnya: type=image/webp atau type=image/vnd.ms-photo)

Browser akan memuat sumber gambar yang tepat berdasarkan petunjuk dan atribut ini. Menurut urutan daftar tag. Browser akan menggunakan elemen <source> pertama yang sesuai dan mengabaikan tag <source> berikutnya.

Elemen <img> digunakan di dalam <picture> untuk ditampilkan ketika browser tidak mendukungnya atau ketika tidak ada tag sumber yang cocok. Penting untuk menggunakan tag <img> di dalam <gambar>.

Gunakan <img> untuk mendeklarasikan tampilan gambar default. Tempatkan tag <img> di akhir <picture>, dan browser akan mengabaikan deklarasi <source> sebelum menemukan tag <img>. Tag gambar ini juga mengharuskan Anda untuk menulis atribut alt-nya.

Artikel ini mengacu pada banyak artikel lainnya. Semua pengenalan gambar ada di sini, jadi mari kita coba sekarang~

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.