Saat menerapkan situs web, pengembang biasanya menggunakan gambar yang sama untuk semua ukuran layar, yang bukan merupakan praktik yang baik karena browser tidak dapat diandalkan untuk mengubah ukuran. Dalam situasi seperti ini, gambar responsif mulai berlaku untuk memastikan bahwa gambar diunduh dengan ukuran dan kualitas yang sesuai untuk perangkat terkait, sehingga meningkatkan kecepatan pemuatan halaman.
Bagaimana Meningkatkan Kecepatan Muat Halaman Menggunakan Gambar Responsif?
Untuk meningkatkan kecepatan memuat halaman melalui gambar responsif, pertimbangkan metodologi berikut:
Contoh 1: Tingkatkan Kecepatan Muat Halaman Melalui Gambar Responsif Menggunakan Atribut “srcset”.
Pendekatan yang paling mudah untuk menerapkan gambar responsif adalah dengan memanfaatkan “ srcset ” Atribut terakumulasi di “ ” tandai. Atribut ini memungkinkan pemrogram untuk menentukan berbagai ukuran gambar, dan browser secara otomatis memilih gambar yang paling sesuai dengan ukuran layar pengguna. Berikut demonstrasinya:
DOCTYPEhtml >
< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul > judul >
kepala >
< tubuh >
< gambar src = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png' semuanya = 'Gambar Responsif'
srcset = 'F:\ARTICLES TEKNIS PEKERJAAN\imgre.png 400w, F:\ARTICLES TEKNIS PEKERJAAN\imgre.png 800w, F:\ARTICEL TEKNIS PEKERJAAN\imgre.png 1200w'
/>
tubuh >
html >
Dalam kode ini:
- “ srcset Atribut ” disertakan yang terdiri dari jalur gambar dan lebar yang berbeda setiap saat.
- Sedemikian rupa sehingga gambar “ F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png 400w ” mewakili jalur gambar yang memiliki lebar “ 400 ” piksel.
- Berdasarkan informasi ini, browser menganalisis gambar yang paling sesuai untuk diunduh berdasarkan ukuran layar pengguna sehingga layar yang lebih kecil menampilkan gambar yang lebih kecil, sehingga menghemat bandwidth.
Keluaran
Contoh 2: Tingkatkan Kecepatan Muat Halaman Melalui Gambar Responsif dengan Menentukan Kepadatan Piksel yang Berbeda
Dalam contoh ini, jalur gambar akan ditentukan bersama dengan kepadatan piksel yang berbeda untuk tampilan resolusi tinggi. Hal ini dapat dicapai melalui “ srcset ” atribut, ditunjukkan di bawah ini:
DOCTYPEhtml >< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul > judul >
kepala >
< tubuh >
< gambar src = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png' semuanya = 'Gambar Responsif' srcset = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png 1x, F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png 1,5x, F:\ARTICEL TEKNIS PEKERJAAN\imgre.png 2x'
/>
tubuh >
html >
Dalam cuplikan kode ini, tentukan jalur gambar tiga kali dengan kepadatan piksel yang bervariasi. Hal ini sedemikian rupa sehingga browser memilih gambar yang paling sesuai/sesuai untuk memastikan kualitas terbaik di berbagai layar.
Catatan: “ 1x ” piksel adalah nilai default sehingga pengguna dapat memilih untuk mengaitkannya dengan jalur gambar atau tidak.
Keluaran
Contoh 3: Tingkatkan Kecepatan Muat Halaman Melalui Gambar Responsif Menggunakan Atribut “size”.
Dalam beberapa situasi, mungkin ada batasan dimana ukuran gambar sebenarnya di layar berbeda dari lebar layar. Untuk mengatasi masalah ini, “ ukuran Atribut ” dapat digunakan untuk menyertakan ukuran gambar sehubungan dengan kueri media atau ukuran tetap. Di bawah ini adalah demonstrasi kode:
DOCTYPEhtml >< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul > judul >
kepala >
< tubuh >
< gambar src = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png' semuanya = 'Gambar Responsif' srcset = 'F:\ARTICLES TEKNIS PEKERJAAN\imgre.png 50w, F:\ARTICLES TEKNIS PEKERJAAN\imgre.png 800w, F:\ARTICLE TEKNIS PEKERJAAN\imgre.png 1200w'
ukuran = '(lebar maks: 800 piksel) 100vw, 800 piksel'
/>
tubuh >
html >
Dalam blok kode ini, “ ukuran Atribut ” mengintegrasikan kueri dan ukuran media. Hal ini sedemikian rupa sehingga memandu browser untuk memilih ukuran gambar sehubungan dengan lebar layar pengguna. Hal ini memastikan bahwa gambar tidak melebihi lebar maksimum target.
Keluaran
Pertimbangan Penting Saat Menggunakan Atribut “size”.
Ada beberapa batasan dalam menggunakan “ ukuran ” atribut juga tercantum di bawah ini:
- Saat menggunakan beberapa kueri media di “ ukuran ”, pastikan kueri media pertama yang sebenarnya dipilih. Selain itu, pastikan kueri media diurutkan dari yang paling spesifik hingga yang paling tidak spesifik.
- Atribut “sizes” tidak mendukung ukuran persentase karena browser tidak mengetahui seberapa lebar sesuatu yang ditentukan dalam persentase hingga browser mengetahui lebar elemen induknya.
Contoh 4: Tingkatkan Kecepatan Muat Halaman Melalui Gambar Responsif Menggunakan Elemen “
“
< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul > judul >
kepala >
< tubuh >
< gambar >
< sumber media = '(lebar maksimal: 100 piksel)' srcset = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgbanner.png' />
< gambar src = 'F:\ARTIKEL TEKNIS PEKERJAAN\imgre.png' semuanya = 'Gambar Responsif' />
gambar >
tubuh >
html >
Menurut baris kode ini:
- Tentukan “
” elemen yang mengumpulkan “ ” elemen untuk gambar yang berbeda dan biarkan browser memilih yang sesuai berdasarkan ukuran layar pengguna. - Juga, jika tidak ada “
” elemen sesuai dengan ukuran layar, gambar yang ditentukan dalam “ ” tag berfungsi sebagai cadangan.
- Hal ini akan menambahkan gambar alternatif jika terjadi hal yang tidak terduga, sehingga mempertahankan kecepatan pemuatan halaman yang ditingkatkan.
Keluaran
Kesimpulan
Kecepatan memuat halaman dapat ditingkatkan melalui gambar responsif menggunakan “ srcset ” atribut, menentukan kepadatan piksel yang berbeda, menggunakan “ ukuran atribut ”, atau melalui “