Dasar memasang gambar di halaman pasti sudah kamu kuasai — elemen <img>, atribut src yang menunjuk ke file gambar, dan alt yang mendeskripsikannya. Kalau bagian ini masih terasa goyah, mampir dulu ke artikel tautan dan gambar. Nah, artikel ini melanjutkan dari titik itu.
Soalnya begini: satu baris <img src="foto.jpg"> memang cukup untuk demo kilat, tapi bukan begitu cara situs yang benar-benar cepat dan profesional menyajikan gambar. Halaman modern perlu mengirim gambar kecil ke ponsel dengan koneksi pas-pasan, sekaligus gambar tajam ke monitor 4K — semuanya dari satu baris HTML yang sama. Halaman itu juga tidak boleh bikin tampilan loncat-loncat saat gambar dimuat, dan idealnya memakai format file yang ukurannya jauh lebih ramping dari JPEG zaman dulu. Artikel ini membahas semua itu: atribut dan elemen yang menyulap gambar biasa menjadi gambar yang responsif, cepat, dan mudah diakses.
Kenapa satu gambar saja tidak cukup
Bayangkan kamu punya foto hero yang cantik selebar 2400 piksel. Kalau kamu pasang begitu saja dengan <img> polos, semua pengunjung terpaksa mengunduh seluruh 2400 piksel itu — termasuk orang yang layar ponselnya cuma 400 piksel dan lagi pakai kuota. Mereka menunggu lebih lama, kuota terkuras, padahal detail tambahannya pun tidak akan kelihatan.
Masalah kebalikannya juga nyata. Kalau gambarnya kamu buat kecil supaya enteng di ponsel, hasilnya malah buram dan pecah saat dibuka di layar desktop besar beresolusi tinggi.
Dulu jalan keluarnya cuma satu: ambil ukuran tengah-tengah dan berdoa. Cara modern jauh lebih cerdas — kamu sediakan beberapa versi gambar, lalu biarkan browser memilih yang paling pas untuk layar tiap pengunjung. Itulah inti dari gambar responsif, dan HTML memberi kamu dua alat untuk melakukannya: atribut srcset dan elemen <picture>.
Gambar responsif dengan srcset
Atribut srcset memungkinkan kamu menyodorkan beberapa pilihan file gambar dalam ukuran berbeda, lalu browser memilih sendiri yang paling cocok dengan layar pengguna. Bentuk paling sederhananya mencantumkan file beserta deskriptor lebar — yaitu lebar piksel asli tiap file, ditulis berupa angka diikuti huruf w:
<img
src="foto-800.jpg"
srcset="foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1600.jpg 1600w"
alt="Danau di pegunungan saat matahari terbit"
/>Lewat baris ini kamu bilang ke browser: “Aku punya gambar ini dalam ukuran 400, 800, dan 1600 piksel. Silakan pilih yang pas.” Ponsel akan mengambil file 400w, sementara desktop besar mengambil yang 1600w. Atribut src polos tetap dipasang sebagai cadangan untuk browser jadul yang belum paham srcset — mereka tinggal pakai yang satu itu.
Tapi ada satu bagian yang kurang. Browser perlu tahu seberapa besar gambar akan benar-benar ditampilkan di halaman sebelum bisa memilih — dan keputusan itu diambil sangat awal, sebelum layout CSS selesai dihitung. Di situlah peran atribut sizes:
<img
src="foto-800.jpg"
srcset="foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Danau di pegunungan saat matahari terbit"
/>Atribut sizes ini bisa dibaca seperti seperangkat aturan: “kalau layar selebar 600px atau kurang, gambar ini mengisi penuh lebar viewport (100vw); selain itu, gambar mengambil setengah viewport (50vw).” Browser menggabungkan informasi itu dengan deskriptor di srcset dan kerapatan piksel layar, lalu mengunduh persis file yang dibutuhkan — tidak lebih, tidak kurang.
Jangan pusing soal sizes — mulai dari 100vw
Sintaks sizes memang kelihatan bikin keder, tapi kamu nggak perlu jadi pakar dulu. Kalau gambarmu memanjang penuh selebar kolomnya, sizes="100vw" sudah jadi titik awal yang oke banget. Aturan kondisi media yang lebih rumit baru kamu butuhkan saat ukuran tampil gambar berubah-ubah tergantung layout (penuh di ponsel, setengah di desktop, dan seterusnya). Bikin yang dasar jalan dulu, baru disempurnakan belakangan.
Deskriptor x yang lebih sederhana
Kalau gambarmu selalu ditampilkan dalam ukuran tetap dan kamu cuma ingin menyajikan versi lebih tajam ke layar “Retina” berkerapatan tinggi, ada bentuk yang lebih ringkas memakai deskriptor kerapatan piksel (1x, 2x):
<img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x"
alt="Logo ACY Partner Indonesia"
width="200"
height="60"
/>Artinya: “pakai logo.png di layar biasa, dan logo@2x.png yang beresolusi lebih tinggi di layar yang pikselnya dua kali lebih rapat.” Ini cocok banget untuk logo, ikon, dan elemen lain yang ukuran tampilnya tidak pernah berubah. Di sini kamu tidak butuh atribut sizes.
Art direction dengan <picture>
srcset urusannya menyajikan gambar yang sama dalam beragam resolusi. Tapi kadang kamu justru ingin menyajikan gambar yang benar-benar berbeda tergantung layar — potongan lebar dan sinematik untuk desktop, tapi potongan lebih sempit dan menjulang untuk ponsel supaya objek utamanya tetap kelihatan. Pendekatan ini namanya art direction, dan tugas itu dipegang oleh elemen <picture>.
<picture>
<source media="(max-width: 600px)" srcset="hero-potret.jpg" />
<source media="(min-width: 601px)" srcset="hero-lebar.jpg" />
<img src="hero-lebar.jpg" alt="Tim kami di acara peluncuran" />
</picture>Elemen <picture> membungkus beberapa pilihan <source> dan satu <img>. Browser menelusuri elemen <source> dari atas ke bawah, memakai yang pertama kondisi media-nya cocok, lalu menampilkan gambar itu. Elemen <img> di bagian bawah sifatnya wajib — dialah cadangannya sekaligus elemen yang benar-benar ditampilkan, jadi alt-nya menempel di situ.
<img> di dalam <picture> bukan opsional
Pemula kadang lupa memasang <img> penutup, lalu bingung kenapa tidak ada gambar yang muncul. Elemen <source> cuma mengusulkan kandidat — yang sebenarnya menggambar dan menyediakan alt adalah <img>. Selalu sertakan dia, dan selalu beri src yang masuk akal sebagai cadangan universal. Anggap saja <source> itu penimpa, dan <img> itu nilai default tempat semua kembali kalau tidak ada yang cocok.
Format gambar modern: WebP dan AVIF
Bertahun-tahun web mengandalkan JPEG (untuk foto) dan PNG (untuk grafis bertepi tajam atau transparan). Keduanya masih jalan di mana-mana, tapi sudah berumur, dan format yang lebih baru menghasilkan file yang jauh lebih ringan pada kualitas yang sama. WebP biasanya 25–35% lebih kecil dari JPEG setara. AVIF lebih baru lagi dan sering kali lebih kecil. File lebih kecil berarti halaman lebih cepat dan kuota lebih hemat — keuntungan nyata yang bisa diukur.
Tantangannya, browser yang sangat lama belum mengerti format-format ini. Untungnya <picture> menyelesaikannya dengan elegan: tawarkan format modern lebih dulu, lalu biarkan browser turun ke format yang dia pahami.
<picture>
<source srcset="foto.avif" type="image/avif" />
<source srcset="foto.webp" type="image/webp" />
<img src="foto.jpg" alt="Danau di pegunungan saat matahari terbit" />
</picture>Browser mencoba AVIF dulu, lalu WebP, dan kalau tidak paham keduanya, dia turun ke JPEG andalan di dalam <img>. Browser modern dapat file kecil yang gesit; sisanya tetap berfungsi. Trik ini bisa kamu gabungkan dengan deskriptor lebar srcset di tiap <source> supaya sekaligus responsif dan modern — inilah standar emas untuk gambar-gambar penting.
Kamu tidak perlu bikin tiap format manual
Membuat versi AVIF, WebP, dan JPEG untuk setiap gambar secara manual jelas merepotkan. Dalam praktiknya, build tool, CMS, atau image CDN-mu mengerjakan ini otomatis — kamu cukup mengunggah satu file asli berkualitas tinggi, lalu mesin itu yang memproduksi beragam format dan ukurannya. HTML di atas adalah yang dihasilkan tooling tersebut. Dengan memahami markup-nya, kamu jadi bisa membacanya, men-debug-nya, dan menulisnya sendiri saat memang perlu.
Performa: lazy loading dan decoding
Sebuah halaman bisa saja memuat dua puluh gambar, padahal pengunjung cuma melihat satu-dua gambar pertama sebelum menggulir. Mengunduh kedua puluhnya sekaligus di awal jelas mubazir. Atribut loading="lazy" menyuruh browser menahan pemuatan gambar sampai gambar itu hampir masuk ke layar:
<img src="jauh-di-bawah-halaman.jpg" alt="Grafik hasil kuartalan" loading="lazy" />Ini salah satu peningkatan performa termudah di seluruh HTML — satu atribut yang bisa memangkas drastis data yang dimuat halaman saat pertama tampil. Pasang dia pada gambar-gambar yang posisinya berada di bawah lipatan layar.
Jangan lazy-load gambar paling penting
Ada satu gambar yang justru jangan kamu beri lazy-load: gambar besar di bagian atas halaman yang sudah kelihatan begitu halaman terbuka (sering disebut gambar “hero” atau LCP). Memberinya lazy-load malah memperlambat kesan kecepatan halaman, karena browser jadi menomorduakan justru elemen yang paling ditunggu pengguna. Patokannya: loading="lazy" untuk gambar di bawah lipatan, dan biarkan gambar paling atas dimuat secara normal (atau bahkan tandai dengan fetchpriority="high").
Ada atribut pendamping, decoding="async", yang membiarkan browser men-decode gambar di luar thread utama sehingga tidak mengganjal pekerjaan lain. Ini optimasi kecil yang aman dan bisa kamu tambahkan ke kebanyakan gambar yang tidak kritis:
<img src="foto.jpg" alt="Sebuah deskripsi" loading="lazy" decoding="async" />Mencegah pergeseran layout dengan width dan height
Pasti kamu pernah mengalami yang menyebalkan ini: kamu mulai membaca artikel, sebuah gambar di bagian atas selesai dimuat, dan tiba-tiba seluruh halaman meloncat ke bawah sampai kamu kehilangan posisi bacaan. Loncatan itu disebut layout shift, dan terjadi karena browser tadinya tidak tahu setinggi apa gambarnya, jadi tidak menyiapkan ruang — lalu mendadak harus menggeser semuanya begitu gambar datang.
Solusinya sederhana sekali: selalu beri gambarmu atribut width dan height.
<img src="foto.jpg" alt="Sebuah deskripsi" width="800" height="600" />Angka-angka ini bukan berarti gambar dipaksa berukuran persis sekian piksel — CSS-mu tetap bisa membuatnya responsif. Yang dilakukan angka tadi adalah memberi tahu browser rasio aspek gambar lebih awal, sehingga browser bisa menyiapkan kotak berbentuk pas dan menahan ruang itu selama file diunduh. Halaman pun tidak pernah meloncat. Ini bagian dari Core Web Vitals milik Google (tepatnya Cumulative Layout Shift), jadi berdampak ke pengalaman pengguna sekaligus SEO.
Atribut width/height vs ukuran dari CSS
Memasang width="800" height="600" di HTML bukan berarti bentrok dengan mengatur ukuran gambar lewat CSS — keduanya punya tugas berbeda. Atribut memberi browser rasio aspek supaya bisa menyiapkan ruang sejak awal; CSS-mu (misalnya max-width: 100%; height: auto;) mengatur seberapa besar gambar benar-benar tampil. Pakai keduanya bersamaan: atribut untuk kestabilan, CSS untuk keresponsifan.
Figure dan caption
Saat sebuah gambar butuh caption — kredit foto, keterangan, atau label “Gambar 1” — jangan asal taruh <p> di bawahnya lalu berharap. HTML punya pasangan semantik yang memang dibuat untuk ini: <figure> dan <figcaption>.
<figure>
<img src="grafik-penjualan.png" alt="Diagram batang penjualan bulanan yang terus naik dari Januari ke Juni" />
<figcaption>Penjualan bulanan paruh pertama 2026.</figcaption>
</figure><figure> membungkus satu kesatuan konten yang berdiri sendiri — gambar, diagram, potongan kode, atau kutipan — dan <figcaption> memberinya caption yang secara teknis terikat padanya. Cara ini lebih baik daripada paragraf lepas, sebab teknologi bantu memahami hubungannya: caption itu memang milik figure tersebut. Perhatikan pembagian tugasnya: alt mendeskripsikan gambar untuk orang yang sama sekali tidak bisa melihatnya, sedangkan figcaption adalah caption yang terlihat oleh semua orang. Keduanya melayani pembaca yang berbeda, jadi isinya biasanya juga berbeda.
Kalau kamu ingin penyegaran cepat soal elemen semantik yang membawa makna seperti ini, artikel HTML semantik mengupas idenya secara lebih luas.
Sedikit soal SVG
Tidak semua gambar itu foto. Untuk logo, ikon, dan ilustrasi sederhana, SVG sering kali jadi pilihan lebih tepat. Gambar SVG tersusun dari bentuk vektor yang dijelaskan dalam teks, jadi tetap tajam sempurna di ukuran berapa pun — tidak ada buram saat di-zoom, dan satu file jalan di segala kerapatan layar. Kamu bisa memakai SVG persis seperti gambar lainnya:
<img src="logo.svg" alt="Logo ACY Partner Indonesia" width="160" height="48" />Untuk ikon yang warnanya perlu berubah lewat CSS atau perlu dianimasikan, kamu juga bisa menempelkan markup SVG langsung ke dalam HTML (inline SVG) — tapi untuk logo atau ilustrasi standar, merujuk file .svg lewat <img> itu simpel dan hasilnya bagus. Patokannya: foto dan gambar kaya detail → JPEG/WebP/AVIF; logo, ikon, dan grafis datar → SVG.
Sekilas soal gambar yang mudah diakses
Semua yang kamu pelajari soal teks alt di tahap dasar tetap berlaku, dan justru lebih penting daripada atribut canggih mana pun di atas. Beberapa poin lanjutan yang perlu kamu pegang:
- Gambar informatif wajib punya
altbetulan yang menjelaskan isinya:alt="Diagram batang yang menunjukkan penjualan naik tiap bulan". - Gambar dekoratif yang tidak menambah makna apa pun cukup diberi
alt=""kosong, yang menyuruh screen reader melewatinya. Alt yang kosong sangat berbeda dengan alt yang hilang — alt yang hilang membuat screen reader membacakan nama file, dan itu cuma jadi ocehan tak berarti. - Gambar berupa teks sebaiknya dihindari kalau kamu bisa memakai teks asli, tapi kalau memang terpaksa (misalnya logo dengan tagline), taruh kata-katanya di dalam
alt. - Gambar kompleks seperti diagram yang detail mungkin butuh deskripsi lebih panjang di dekatnya pada halaman, dengan
altmemberi versi singkat dan teks di sekitarnya memberi rinciannya.
Teks alt yang baik bukan hiasan — dialah pembeda antara halaman yang bisa dipakai dan yang tidak bagi orang-orang yang bergantung pada screen reader.
Menyatukan semuanya
Beginilah wujud satu gambar penting yang dibangun rapi dengan menggabungkan teknik-teknik di artikel ini — responsif, format modern, stabil, dan mudah diakses:
<picture>
<source
type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
sizes="100vw"
/>
<source
type="image/webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="100vw"
/>
<img
src="hero-800.jpg"
alt="Tim ACY Partner Indonesia di acara peluncuran 2026"
width="1600"
height="900"
/>
</picture>Kamu tidak akan menulis ini manual untuk tiap gambar — tooling-mu yang mengurus — tapi sekarang kamu bisa membacanya, paham tiap barisnya, dan membetulkannya saat ada yang melenceng.
Penutup
Kamu sudah melangkah jauh dari “gambar ya cuma <img src>” menjadi paham bagaimana web sebenarnya menyajikan gambar dengan baik:
srcsetmenyodorkan beberapa ukuran dari gambar yang sama; pasangkan dengansizessupaya browser memilih yang tepat. Pakai deskriptorxyang lebih sederhana untuk gambar berukuran tetap di layar berkerapatan tinggi.<picture>beserta<source>mengurus art direction (potongan berbeda per layar) dan cadangan format modern (AVIF/WebP dengan jaring pengaman JPEG). Selalu sertakan<img>di dalamnya.- WebP dan AVIF jauh lebih ringan dari JPEG/PNG pada kualitas yang sama — pakai dengan cadangan.
loading="lazy"menunda gambar di luar layar demi performa gratis — tapi jangan pernah lazy-load gambar hero.- Atribut
widthdanheightmenyiapkan ruang dan mencegah halaman meloncat (layout shift), yang menguntungkan pengguna sekaligus SEO. <figure>dan<figcaption>memberi gambar caption yang benar dan terhubung secara semantik.- SVG adalah format yang tepat untuk logo, ikon, dan grafis datar — tajam di ukuran berapa pun.
- Teks
alttetap yang paling penting di antara semuanya: deskripsi betulan untuk gambar informatif, kosong untuk yang dekoratif.
Kuasai ini, dan gambar tidak lagi jadi beban performa, melainkan tampil sebagaimana mestinya: cepat, tajam, dan bisa dinikmati semua orang. Di bagian berikutnya pada section ini, kita beralih dari gambar diam ke audio dan video — menyematkan media yang bisa diputar.
