Tag img

Tag img membuat gambar. Jalur ke gambar ditulis dalam atribut src. Tidak memerlukan tag penutup.

Atribut

Atribut	Keterangan
src	Menentukan jalur ke gambar. Atribut wajib.
alt	Teks alternatif yang akan ditampilkan alih-alih gambar, jika gambar tidak ditemukan (misalnya, jalurnya salah). Atribut wajib. Jika tidak ada, validator (program yang memeriksa keabsahan HTML atau CSS) akan memberikan peringatan.
width	Lebar gambar, dalam piksel (dalam hal ini satuan pengukuran tidak ditentukan) atau persentase dari induk gambar.
height	Tinggi gambar, dalam piksel (dalam hal ini satuan pengukuran tidak ditentukan) atau persentase dari induk gambar.

Nuansa

Jika untuk gambar tidak ditetapkan lebar maupun tinggi - gambar akan memiliki ukuran aslinya. Jika tinggi ditetapkan - gambar akan menjadi tinggi yang ditentukan, dan lebarnya akan menyesuaikan agar proporsinya tidak terdistorsi.

Jika hanya lebar yang ditetapkan - secara analog, gambar akan menyesuaikan tingginya agar proporsinya terjaga.

Jika lebar dan tinggi keduanya ditetapkan - proporsi gambar bisa terdistorsi (atau mungkin tidak, tergantung tebakan Anda). Jika lebar atau tinggi (atau keduanya) lebih besar dari ukuran sebenarnya - gambar akan membesar, tapi kehilangan kualitas.

Disarankan untuk menentukan lebar dan tinggi gambar dalam atribut (bukan melalui CSS) - dengan cara ini browser akan lebih cepat memuat gambar - browser tidak perlu menghitung ukuran setiap gambar setelah mendapatkannya.

Tidak disarankan untuk mengurangi ukuran asli gambar tanpa kebutuhan. Misalnya, ukuran asli gambar adalah 1000 x 1000 piksel, dan Anda menetapkan lebarnya menjadi 100px. Dalam hal ini gambar di layar akan terlihat sebesar 100 piksel, namun memiliki ukuran file seribu piksel penuh dan, karenanya, akan dimuat jauh lebih lama.

Contoh

Mari tambahkan gambar ke situs dan tidak menetapkan atribut height dan width. Gambar akan memiliki ukuran aslinya:

:

Contoh

Mari coba tambahkan lebar pada gambar menggunakan atribut width, tinggi pada saat yang sama harus menyesuaikan agar proporsi gambar terjaga:

:

Contoh

Dan sekarang mari tambahkan tinggi pada gambar menggunakan atribut height, lebar pada saat yang sama akan menyesuaikan agar proporsi gambar terjaga:

:

Contoh

Mari tambahkan tinggi dan lebar pada gambar secara bersamaan. Proporsi gambar pada saat yang sama harus terdistorsi (tidak harus, tetapi dalam hal ini tinggi dan lebar dipilih agar proporsinya terdistorsi):

:

Contoh

Mari berikan jalur yang salah ke gambar (untuk kesederhanaan, biarkan kosong). Alih-alih gambar kita akan melihat isi dari atribut alt (tampaknya seperti teks biasa - tetapi coba salin - Anda tidak akan bisa, itu akan tertarik seperti gambar):

:

Lihat juga