Cara menambahkan gambar di HTML
Pakai elemen <img>. src adalah file gambarnya, alt menjelaskannya, dan width serta height memberi ukurannya dalam piksel. <img> adalah elemen void: tidak punya tag penutup.
src di sini adalah SVG kecil yang ditulis di URL (data URI) supaya contohnya berjalan tanpa internet. Di situs sungguhan, src adalah path ke sebuah file:
src | Memuat |
|---|---|
photo.jpg | photo.jpg di folder yang sama dengan file HTML |
images/photo.jpg | Dari folder images di samping file HTML |
../photo.jpg | Dari satu folder di atasnya |
/images/photo.jpg | Dari folder images di root situs |
https://example.com/photo.jpg | Dari situs lain (bisa pindah atau hilang) |
Path peka huruf besar kecil di kebanyakan web server: Photo.JPG dan photo.jpg adalah dua file yang berbeda.
Alt text
Teks alt menggantikan gambar. Screen reader membacanya dengan suara, dan browser menampilkannya saat gambar tidak bisa dimuat. Kedua gambar di sini menunjuk ke file yang tidak ada:
Gambar pertama menampilkan alt text-nya, "Coddy logo", di tempat gambar seharusnya berada. Gambar kedua punya alt kosong, jadi tidak ada teks yang ditampilkan, dan screen reader melewatinya. Cara menulis alt:
- Jelaskan apa yang penting sesuai konteksnya. "Diagram batang: penjualan naik dua kali lipat dari Maret ke Juni" lebih bermakna daripada "diagram".
- Jangan diawali dengan "Gambar dari". Screen reader sudah mengumumkannya sebagai gambar.
- Pakai
alt=""untuk hiasan (garis pemisah, ornamen latar) supaya screen reader melewatinya. - Jangan pernah tidak menulis
alt. Tanpa atribut itu, beberapa screen reader malah membacakan nama file-nya, seperti "IMG underscore 4032 dot jpg". - Untuk gambar di dalam link, jelaskan tujuannya:
<a href="/"><img src="logo.svg" alt="Home"></a>.
Mengatur ukuran gambar
Atribut width dan height dalam piksel, tanpa satuan. Ukuran dari CSS menimpanya. CSS yang paling berguna untuk gambar adalah pasangan ini, yang membuat gambar bisa menyusut bersama container-nya tapi tidak pernah meregang melebihi lebar aslinya:
Gambar pertama tetap 300 piksel dan meluber keluar dari kotak 180 piksel. Gambar kedua mengecil menjadi 180 kali 120, tetap berbentuk 3:2. height: auto itu penting: tanpanya, atribut height="200" akan membuat gambar tetap setinggi 200 piksel dan gepeng.
Selalu tulis width dan height di HTML, bahkan untuk gambar responsif. Browser memakainya untuk menyiapkan ruang yang pas sebelum file-nya tiba, jadi teks di bawahnya tidak melompat turun saat gambar dimuat.
Memotong gambar dengan object-fit
Saat gambar harus mengisi kotak dengan bentuk yang berbeda (avatar persegi dari foto lebar, kartu dengan tinggi yang sama), object-fit menentukan apa yang terjadi pada bagian yang berlebih:
Sumbernya adalah gambar lingkaran berbentuk 2:1, ditampilkan di kotak persegi:
fill(default) meregangkan gambar mengikuti kotak, jadi lingkarannya menjadi oval.containmemuat seluruh gambar di dalam kotak, menyisakan pita kosong.covermengisi kotak dan memotong bagian yang berlebih, sehingga lingkarannya tetap bulat. Ini pilihan yang biasa untuk thumbnail dan avatar.
object-position memilih bagian mana yang tetap terlihat saat dipotong, misalnya object-position: top untuk foto potret.
Keterangan dengan figure dan figcaption
Keterangan milik sebuah gambar ditaruh di <figcaption>, dan keduanya ditaruh di <figure>. Itu mengikat keduanya bagi screen reader, dan figure bisa diberi gaya sebagai satu kesatuan:
Keterangan tidak menggantikan alt. alt menyatakan apa yang ditampilkan gambar; keterangan menambahkan apa yang juga dibutuhkan pembaca yang bisa melihat.
Celah di bawah gambar
Gambar berada di garis dasar teks, seperti sebuah huruf, jadi container-nya menyisakan ruang di bawahnya untuk bagian huruf yang menjulur ke bawah seperti g dan y. Border membuat celah itu terlihat:
Border pertama punya garis putih di bawah gambar biru. display: block di gambar (kotak kedua) menghapusnya; begitu juga vertical-align: middle kalau gambarnya harus tetap inline.
Lazy loading dan sumber responsif
Untuk gambar yang jauh di bawah halaman yang panjang, loading="lazy" menunda unduhan sampai pembaca menggulir mendekatinya:
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
Jangan pakai lazy loading untuk gambar utama di bagian atas halaman; itu memperlambat bagian halaman yang pertama kali dilihat pembaca.
Untuk mengirim file yang lebih kecil ke layar kecil, daftarkan beberapa ukuran di srcset dan beri tahu browser selebar apa gambar akan ditampilkan dengan sizes. Browser yang memilih file-nya:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> melangkah lebih jauh dan menawarkan format yang berbeda, dengan <img> sebagai fallback yang juga membawa alt:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Format gambar
| Format | Cocok untuk |
|---|---|
| JPEG | Foto |
| PNG | Screenshot, gambar yang butuh tepi tajam atau transparansi |
| WebP | Foto dan grafis, lebih kecil dari JPEG dan PNG, dengan transparansi |
| AVIF | Foto, biasanya lebih kecil dari WebP |
| SVG | Logo, ikon, dan diagram; bisa diskalakan ke ukuran berapa pun tanpa buram |
| GIF | Animasi pendek, walaupun <video> berulang tanpa suara jauh lebih kecil |
Kesalahan umum
- Path dari komputermu sendiri, seperti
src="C:\Users\me\photo.jpg". Path itu hanya berfungsi di komputermu. Taruh file di samping HTML-mu dan pakai path relatif. - Tidak ada
alt. Setiap<img>butuh satu, kosong untuk hiasan. - Mengatur
widthdanheightdi CSS dengan nilai yang bentuknya berbeda. Gambarnya jadi meregang. Atur satu saja dan biarkan yang lainauto, atau pakaiobject-fit. - Tidak ada atribut
widthdanheight, sehingga halaman melompat-lompat saat gambar dimuat. - File besar yang diperkecil dengan CSS. Foto 4000 piksel yang ditampilkan 400 piksel tetap diunduh penuh. Ubah ukurannya, atau pakai
srcset. - Tag penutup
</img>.<img>adalah elemen void; tidak ada yang perlu ditutup.
Gambar di contoh-contoh di atas adalah SVG inline yang kecil. Untuk mencoba kode yang sama dengan fotomu sendiri, tempel kodenya ke playground HTML.
Pertanyaan yang sering diajukan
Bagaimana cara menambahkan gambar di HTML?
Pakai tag <img> dengan file di src dan deskripsi di alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> tidak punya tag penutup.
Bagaimana cara mengubah ukuran gambar di HTML?
Atur atribut width dan height dalam piksel, atau pakai CSS seperti img { width: 300px; height: auto; }. Mengatur satu dimensi saja dan membiarkan yang lain auto akan mempertahankan proporsinya.
Kenapa gambarku tidak muncul di HTML?
Biasanya path src-nya salah: path itu relatif terhadap file HTML, nama file peka huruf besar kecil di kebanyakan server, dan path seperti C:\photos\cat.jpg hanya ada di komputermu. Buka URL gambarnya langsung di browser untuk memeriksanya.
Apa itu alt text di HTML?
Atribut alt adalah teks pengganti gambar. Screen reader membacanya, dan browser menampilkannya saat gambar gagal dimuat. Jelaskan apa yang ditampilkan atau dilakukan gambar itu; pakai alt="" untuk gambar yang murni hiasan.
Bagaimana cara membuat gambar responsif?
Tambahkan max-width: 100%; height: auto; ke gambar itu di CSS. Gambar lalu menyusut menyesuaikan container yang sempit dan tidak pernah membesar melebihi lebar aslinya.
Kenapa ada celah di bawah gambarku?
Secara default gambar adalah elemen inline dan berada di garis dasar teks, yang menyisakan ruang untuk bagian huruf yang menjulur ke bawah. Atur display: block di gambar itu, atau vertical-align: middle, untuk menghapus celahnya.
