Menentukan dimensi gambar untuk meningkatkan kinerja browser

Baru-baru ini saya menjalankan audit di situs web saya menggunakan Alat Pengembang Google. Gambar saya semuanya berukuran sama (500 horisontal dengan 300 piksel vertikal) jadi saya pikir akan lebih baik jika saya meninggalkan atribut ukuran gambar karena tidak perlu menghitung ukuran gambar ketika sudah ukuran yang benar.

Di bawah Pemanfaatan Jaringan, Tentukan Dimensi Gambar Saya melihat yang berikut ini

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Sekarang aku bingung. Haruskah saya benar-benar menambahkan atribut lebar dan tinggi ke gambar saya, meskipun sudah ukuran yang tepat? Tampaknya berlebihan.

Peramban mengunduh data secara paralel dan mencoba mulai merender laman sesegera mungkin.

Jika Anda tidak menentukan ukuran, peramban tidak tahu seberapa besar gambar akan sampai setelah unduhan gambar selesai sepenuhnya.

Penundaan ini memaksa browser untuk mengecat ulang atau mengubah tata letak - menunda waktu pemuatan halaman.

Semakin banyak gambar dengan masalah ini - semakin lambat halaman akan dimuat.

Jika Anda menentukan ukuran gambar, baik dalam HTML atau CSS, maka browser dapat menghindari pengecatan ulang dan pengubahan konten.

Karena ini, Anda harus selalu menentukan ukuran gambar. Google memiliki beberapa tips tentang ini.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Untuk lebih lanjut tentang proses rendering browser, lihat: http://taligarsiel.com/Projects/howbrowserswork1.htm

Tidak yakin bagaimana up to date ini, tetapi memberikan wawasan tentang bagaimana browser bekerja dan mengapa Anda mungkin ingin melakukan hal-hal seperti tidak menggunakan CSS sebaris untuk mengganti style sheet.

Desain Responsif biasanya tidak menggunakan atribut lebar atau tinggi

Alat Pengembangan Google adalah panduan dan Anda tidak perlu memaksakan semua yang Anda baca di situs mereka, bahkan beberapa hal sudah usang. Mayoritas situs web responsif tidak menggunakan widthatau heightkarena mereka ingin gambar untuk beradaptasi dengan ukuran layar dan dengan menggunakan lebar dan tinggi tetap menggunakan <img>yang akan mengurangi pengalaman pengguna dan Google telah menyatakan ini salah satu faktor paling penting.

Penanganan CSS

Anda dapat memilih untuk menggunakan elemen level blok yang memiliki lebar dan tinggi, secara pribadi saya tidak akan menggunakannya tetapi inilah yang dikatakan Google tentang level blok.

Pastikan untuk menentukan dimensi pada elemen gambar atau induk level blok Pastikan untuk mengatur dimensi pada elemen itu sendiri, atau orangtua level blok. Jika induknya bukan level blok, dimensi akan diabaikan. Jangan mengatur dimensi pada leluhur yang bukan orangtua langsung.

Saya membayangkan ini akan terlihat seperti:

Desain Statis .ic {width:500px;height:500px;}

Desain responsif:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Maka Anda perlu menggunakan JavaScript atau solusi lain untuk mendeteksi sudut pandang dan menyajikan 4 versi gambar yang berbeda, yang lagi-lagi kurang praktis. Jadi, jika Anda menggunakan desain responsif maka saya akan tetap aman dan tidak perlu repot menambah lebar dan tinggi sehingga situs web Anda lancar apa pun tampilan layarnya.

Saya baru saja menjawab pertanyaan serupa di Wordpress Stack Exchange. Pengeposan ulang di sini (admin / moderator: jika ini tidak diizinkan, beri tahu saya cara yang tepat untuk membantu).

tidak benar-benar berarti Anda harus menentukan lebar dan tinggi di html. Maksudnya adalah Anda harus menyediakan ruang yang tepat dan ketika gambar dimuat, browser tidak perlu merefleksi dan mengecat ulang halaman.

Selain itu, jika Anda membuat hardcode dimensi, itu jenis perilaku responsif mengalahkan. Jika tata letak Anda tidak responsif, tidak apa-apa, tetapi jika Anda ingin tetap responsif, Anda hanya dapat menggunakan CSS untuk mencapai hasil.

Sebagian besar waktu, menggunakan kedua lebar dan max-width:100akan melakukan pekerjaan, tetapi posting ini dari Majalah Smashing memiliki teknik yang menarik: alih-alih menggunakan max-width: 100%, Anda dapat menggunakan The Padding-Bottom Hack :

"Dengan teknik ini, kami mendefinisikan tinggi sebagai ukuran relatif terhadap lebar. Padding dan margin memiliki sifat intrinsik, dan kami dapat menggunakannya untuk membuat rasio aspek untuk elemen yang tidak memiliki konten di dalamnya. Karena bantalan memiliki kemampuan ini , kita dapat mengatur padding-bottom menjadi relatif terhadap lebar elemen. Jika kita juga mengatur tinggi menjadi 0, kita akan mendapatkan apa yang kita inginkan. [...]

Langkah selanjutnya adalah menempatkan gambar di dalam wadah dan pastikan itu mengisi wadah. Untuk melakukan ini, kita perlu menempatkan gambar di dalam wadah, seperti: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Prosesnya kira-kira seperti ini:

1. baca file .html
2. dari header file .html, baca file .css, .js (.js harus SETELAH .css ...)
3. baca img dan skrip dari halaman

Dengan demikian, tag gambar dibaca "terlambat". Namun untuk menghitung pemformatan halaman Anda, memiliki ukuran gambar adalah hal yang baik (jika tidak, browser menggunakan ukuran "acak" seperti 1x1, 25x25, ... apa pun yang telah diprogram browser.)

Jadi untuk menghindari halaman yang terlihat rusak sampai gambar dibaca, menempatkan atribut lebar dan tinggi memungkinkan browser menghitung tata letak halaman yang tepat dengan segera. Inilah sebabnya mengapa itu ide yang baik untuk memilikinya di sana, bahkan jika mereka memiliki ukuran yang sama.