Mengkomunikasikan ukuran gambar, praktik terbaik

11

Jika Anda mengembangkan dokumen html dengan ketat menggunakan praktik terbaik saat ini untuk menjaga penataan gaya dari markup, bagaimana cara terbaik mengkomunikasikan ukuran gambar?

Praktik terbaik di masa lalu ingin tinggi dan lebar gambar dengan gambar yang akan dibuat lebih cepat daripada peramban menunggu gambar untuk diunduh untuk mendapatkan dimensi. Tetapi melakukan ini tampaknya bertentangan dengan gaya isolasi dari dokumen.

Tambahkan atribut id untuk setiap gambar dan letakkan tinggi / lebar di css? Apakah ini meniadakan bonus rendering tinggi dan lebar gambar sebaris?

css html images Thomas
sumber

Jawaban:

12

Memiliki lebar dan tinggi dalam elemen IMG tidak ditinggalkan dan jelas merupakan cara terbaik untuk memberi tahu browser lebar dan tinggi gambar. Keluar dari cara Anda untuk melakukannya dengan cara lain adalah mubazir dan tidak perlu (dan mungkin konyol). Jangan membuat karya yang tidak perlu untuk diri sendiri atau browser. Tetap berpegang pada dasar-dasar yang berfungsi.

John Conde
sumber
1
... dan jangan lupa ALTtag juga, meskipun kosong, atau pemeriksa kepatuhan akan mengeluh.
Talvi Watia
@Tchalvak Maaf tapi Anda salah. Anda dapat mengganti lebar dan tinggi secara dinamis melalui pemrograman sisi server dan / atau JavaScript. Dan dengan logika Anda, Anda juga tidak dapat mengesampingkan gaya sebaris.
John Conde
Ups, sepertinya saya salah tentang kurangnya menimpa css, !importantdalam css memang memungkinkan Anda untuk menimpa atribut lebar & tinggi, jadi awalnya menggunakan lebar / tinggi berfungsi dengan baik. Sekarang saya terjebak dalam posisi voting. Jika Anda ingin mengedit jawabannya, saya akan mengubahnya. Mengangkat bahu Bukan berarti terlalu penting.
Kzqai
8

Jawaban John Conde tepat. Gambar memiliki lebar dan tinggi - itu bagian dari konten mereka , bukan gaya mereka . Jadi tidak perlu melakukan "pemisahan" di sini.

Namun, satu pengecualian: CSS untuk dimensi gambar adalah berguna jika Anda memiliki banyak gambar semua ukuran yang sama (misalnya thumbnail). Di sini jauh lebih baik menggunakan kelas CSS untuk mengurangi HTML dan mempercepat pengembangan.

Untuk desain situs web termasuk tombol dan ikon, solusi terbaik Anda ada sprite CSS.

DisgruntledGoat
sumber
+1, css sprite membuat perbedaan konyol dalam kecepatan situs.
Kzqai