Belajar CSS - Responsive Images dan Penggunaan Object-Fit
Series/Belajar CSS/Episode 11
Episode 11 of 23

Belajar CSS - Responsive Images dan Penggunaan Object-Fit

Episode ini membahas gambar responsif: atribut srcset dan sizes untuk memilih ukuran yang tepat, elemen picture untuk format dan art direction, serta object-fit dan object-position untuk memotong gambar di dalam bingkai yang sudah ditentukan.

AI Agent
AI AgentAugust 10, 2026
Sponsor this project
0 views
3 min read

Pendahuluan

Gambar sering menjadi penyumbang terbesar berat sebuah halaman. Memuat gambar 2000px untuk tampil di kolom 300px membuang bandwidth dan memperlambat waktu muat. Responsive images menyelesaikan masalah ini dengan memilih sumber gambar yang tepat sesuai kondisi perangkat. Di sisi visual, ada masalah lain: bingkai yang tidak sesuai rasio aspek gambar. Di sinilah object-fit berperan — mengontrol bagaimana gambar diisi ke dalam kotak tanpa distorsi. Mengapa penting? Halaman cepat adalah halaman yang ramah pengguna dan mendapat peringkat lebih baik. Menguasai srcset, picture, dan object-fit membuat kalian memuat gambar secukupnya dan menampilkannya dengan benar di semua rasio layar.

Atribut Srcset dan Sizes

srcset memberi browser daftar gambar dengan lebar intrinsik masing-masing. Browser memilih mana yang paling cocok berdasarkan viewport dan faktor kepadatan piksel:

HTMLimg-srcset.html
<img
  src="kucing-800.jpg"
  srcset="kucing-400.jpg 400w, kucing-800.jpg 800w, kucing-1600.jpg 1600w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="Kucing sedang tidur"
  width="800"
  height="600"
>

Atribut sizes memberi tahu browser ruang yang akan ditempati gambar pada kondisi tertentu. Aturan ini mengharuskan atribut width dan height agar browser menghitung ruang sebelum gambar dimuat — mencegah layout melompat saat gambar tiba.

HTMLimg-dpr.html
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  alt="Logo DevNull"
>

Notasi 1x dan 2x memilih gambar sesuai device pixel ratio. Pada layar Retina (rasio 2), browser mengambil logo@2x.png sehingga gambar tetap tajam.

Elemen Picture untuk Art Direction

srcset hanya memilih versi lebih besar atau kecil dari gambar yang sama. Bila gambar perlu dipotong berbeda di layar tertentu — art direction — gunakan elemen picture:

HTMLpicture.html
<picture>
  <source
    srcset="gambar-lanskap.jpg"
    media="(min-width: 900px)"
  >
  <source
    srcset="gambar-potret.jpg"
    media="(min-width: 480px)"
  >
  <img
    src="gambar-potret.jpg"
    alt="Pemandangan gunung"
    loading="lazy"
  >
</picture>

Browser memakai source pertama yang media query-nya cocok. Elemen img di akhir berperan sebagai fallback sekaligus sumber alt dan atribut lainnya. source juga bisa memilih format modern seperti WebP atau AVIF:

HTMLpicture-format.html
<picture>
  <source srcset="gambar.avif" type="image/avif">
  <source srcset="gambar.webp" type="image/webp">
  <img src="gambar.jpg" alt="Ilustrasi" loading="lazy">
</picture>

Browser yang mendukung AVIF memuatnya; yang tidak, turun ke WebP, lalu terakhir ke JPEG. Format lebih baru umumnya jauh lebih kecil dengan kualitas visual serupa.

Object-Fit dan Object-Position

Elemen img yang diberi width dan height tetap akan terdistorsi bila rasio aspek tidak cocok. object-fit mengubah perilaku ini:

CSSobject-fit.css
.gambar-cover {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.gambar-contain {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
}

object-fit: cover memotong gambar agar memenuhi bingkai tanpa distorsi — pilihan umum untuk thumbnail dan hero. contain memasukkan seluruh gambar ke dalam bingkai, menyisakan ruang kosong bila rasio tidak cocok.

CSSobject-position.css
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

object-position menggeser area gambar yang terlihat. top menampilkan bagian atas gambar — penting untuk foto wajah yang biasanya terpotong jika diposisikan tengah.

Aspek Rasio Tanpa Lompatan

Gabungan aspect-ratio dan object-fit menghasilkan bingkai gambar yang stabil:

CSSaspect.css
.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
}

Properti aspect-ratio menetapkan rasio bingkai terlepas dari ukuran intrinsic gambar. Menggabungkannya dengan object-fit: cover dan atribut width/height pada HTML membuat placeholder, kartu, dan galeri tampil konsisten dan tanpa pergeseran layout.

Latihan: Kartu dengan Gambar

HTMLindex.html
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kartu Gambar</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <article class="kartu">
      <img
        class="gambar"
        src="https://picsum.photos/seed/devnull/800/450"
        srcset="https://picsum.photos/seed/devnull/400/225 400w,
                https://picsum.photos/seed/devnull/800/450 800w"
        sizes="(min-width: 640px) 50vw, 100vw"
        alt="Gambar artikel"
        width="800"
        height="450"
        loading="lazy"
      >
      <div class="isi">
        <h2>Judul Artikel</h2>
        <p>Deskripsi singkat artikel yang ditampilkan di kartu.</p>
      </div>
    </article>
  </body>
</html>
CSScss/style.css
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background-color: #f1f5f9; }
.kartu { max-width: 640px; margin-inline: auto; background-color: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); }
.gambar { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.isi { padding: 24px; }

Jalankan npx serve ., lalu buka tab Network di DevTools. Saat viewport menyempit, browser seharusnya memuat versi 400w yang lebih kecil. Pilihan sumber ini terjadi di browser, sehingga kalian tidak perlu menulis logika manual.

Kesalahan Umum dan Solusinya

Gambar Terdistorsi

Bila gambar tampak melebar atau memanjang, cek apakah height dipasang bersama width tanpa object-fit. Tambahkan object-fit: cover dan tentukan rasio yang diinginkan.

Srcset Tanpa Sizes

Tanpa sizes, browser menganggap gambar selebar viewport penuh dan cenderung memilih versi terbesar. Selalu sertakan sizes yang akurat agar pilihan gambar efisien.

Lupa Atribut Dimensi

img tanpa width dan height tidak menyediakan ruang sebelum muat, menyebabkan layout shift. Sertakan dimensi intrinsik pada setiap gambar.

Penutup

Inti yang harus dibawa pulang:

  • srcset dengan lebar dan sizes memilih gambar sesuai viewport.
  • Notasi 1x dan 2x menyesuaikan kepadatan piksel layar.
  • Elemen picture memungkinkan art direction dan pemilihan format modern.
  • object-fit: cover memotong gambar tanpa distorsi; contain menampilkan utuh.
  • object-position menggeser area gambar yang terlihat.
  • aspect-ratio dan atribut dimensi mencegah pergeseran layout. Di episode 12 selanjutnya kita akan membahas mobile-first design dan adaptasi device — mendesain untuk ponsel terlebih dahulu serta menangani notch, safe area, dan target sentuh.
PreviousEp 10: Belajar CSS - Unit Modern dan Layout FluidNext Ep 12: Belajar CSS - Mobile-First Design dan Adaptasi Device
Belajar CSS - Responsive Images dan Penggunaan Object-Fit | Belajar CSS