Cara Menyesuaikan Gambar dengan CSS

Menyesuaikan gambar dengan CSS berarti mengatur bagaimana gambar ditampilkan tanpa mengubah berkasnya. Empat properti menangani sebagian besar kebutuhan: max-width untuk membatasi lebar, height: auto untuk menjaga rasio, object-fit untuk menentukan cara gambar mengisi kotak yang rasionya berbeda, dan object-position untuk menggeser bagian yang terlihat. Layanan ini tidak menyentuh CSS halaman; yang bisa dikerjakan di sini adalah menyiapkan berkasnya, yaitu memperkecil dimensi lewat Kompres Foto dan mengubah format lewat Konversi Format Gambar.

Urutan kerjanya sebaiknya begitu: tentukan ukuran tampil gambar di halaman, siapkan berkas dengan dimensi yang sesuai, lalu tulis CSS-nya. Menulis CSS lebih dulu untuk gambar yang dimensinya belum pasti berakhir dengan gambar buram atau berkas yang terlalu berat. Bagian berikut menjelaskan properti yang sering dipakai, masalah yang ditimbulkannya, dan cara memeriksa hasilnya.

Dasar: membatasi lebar gambar

Gambar berukuran besar yang dipasang tanpa aturan akan meluber keluar kontainernya, terutama di layar ponsel. Aturan pertama yang hampir selalu dipakai adalah membatasi lebarnya.

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% membuat gambar tidak pernah lebih lebar dari kontainernya. height: auto membuat tingginya menyesuaikan secara proporsional, sehingga gambar tidak gepeng. Kedua baris ini aman dipasang sebagai aturan umum untuk semua gambar di halaman.

Yang perlu diperhatikan, aturan ini mengecilkan tampilannya, bukan berkasnya. Peramban tetap mengunduh gambar beresolusi penuh, lalu menampilkannya lebih kecil. Untuk foto kamera yang berukuran ribuan piksel, itu pemborosan yang terasa di kecepatan halaman. Perkecil dulu berkasnya sampai mendekati ukuran tampil terbesarnya.

Dimensi di HTML dan pergeseran tata letak

CSS mengatur tampilan, tetapi ruang untuk gambar sebaiknya sudah dipesan sejak HTML ditulis. Atribut lebar dan tinggi di tag gambar memberi tahu peramban berapa ruang yang harus disediakan sebelum gambarnya selesai diunduh. Tanpa keduanya, halaman bergeser saat gambar muncul, dan teks yang sedang dibaca berpindah posisi.

Nilai atributnya diisi dalam piksel, sesuai dimensi asli gambar, bukan ukuran tampilnya. CSS tetap bisa membuat gambar menyesuaikan lebar layar; yang penting, rasionya sudah diketahui peramban sejak awal. Cara menentukan angkanya dijelaskan di Cara Menentukan Dimensi Gambar di HTML.

Mengunci rasio dengan aspect-ratio

Kadang ruang gambar perlu dikunci pada rasio tertentu, misalnya kotak persegi untuk thumbnail atau lanskap lebar untuk banner. Properti aspect-ratio menetapkan rasio itu tanpa menghitung tinggi manual.

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Properti ini berguna saat gambar belum dimuat atau saat ukuran gambar berbeda-beda. Kontainernya tetap setinggi yang sudah ditentukan, sehingga tata letak di sekitarnya tidak bergerak. Untuk browser lama yang belum mendukungnya, rasio bisa dijaga dengan cara lama, yaitu menentukan tinggi lewat padding. Cara itu lebih panjang dan jarang diperlukan sekarang.

Memotong gambar dengan object-fit

Inilah properti yang paling sering menyelesaikan masalah tampilan. object-fit menentukan bagaimana gambar mengisi kotak yang rasionya berbeda dari rasio gambarnya. Ada beberapa nilai yang sering dipakai.

cover membuat gambar mengisi seluruh kotak, dengan memotong bagian yang berlebih. Gambar tidak gepeng, tetapi sebagian isinya hilang. Nilai ini yang dipakai untuk thumbnail dan kartu artikel.

contain membuat seluruh gambar muat di dalam kotak, dengan menyisakan ruang kosong di sisi yang tidak terisi. Gambar tidak terpotong, tetapi ukurannya mengecil dan mungkin ada bidang kosong. Nilai ini dipakai kalau seluruh isi gambar harus terlihat, misalnya diagram atau tangkapan layar.

fill adalah nilai bawaan. Gambar dipaksa mengisi kotak, dan rasionya berubah. Ini yang membuat wajah orang terlihat lebih lebar atau lebih kurus dari aslinya. Sebagian besar kasus tidak menginginkan nilai ini.

none menampilkan gambar pada ukuran aslinya tanpa penskalaan. Kalau gambarnya lebih besar dari kotaknya, bagian yang berlebih terpotong. scale-down memilih antara ukuran asli atau ukuran yang muat, mana yang lebih kecil.

Pemilihan nilai bergantung pada isi gambarnya. Untuk foto yang tujuannya menyampaikan suasana, cover aman karena pemotongan di tepi biasanya tidak merusak. Untuk gambar yang memuat informasi lengkap, misalnya bagan atau tangkapan layar, contain lebih tepat.

Mengatur bagian yang terlihat dengan object-position

Saat memakai cover, bagian gambar yang dipotong ditentukan oleh posisinya. Nilai bawaan 50% 50% berarti titik tengah gambar berada di titik tengah kotak. Kalau subjeknya bukan di tengah, hasilnya bisa memotong bagian yang penting.

.foto-produk {
  object-fit: cover;
  object-position: center top;
}

Nilai center top menjaga bagian atas gambar tetap terlihat, yang berguna untuk foto orang. left center menjaga bagian kiri, berguna untuk gambar yang subjeknya di sisi kiri. Satuan persen juga bisa dipakai untuk penempatan yang lebih halus.

Satu hal yang perlu diingat: object-position hanya bekerja pada elemen yang punya kotak dengan ukuran tetap, biasanya elemen gambar atau elemen dengan object-fit. Untuk latar belakang, properti yang dipakai adalah background-position, bukan object-position.

Latar belakang sebagai alternatif

Sebagian desain memakai gambar sebagai latar elemen, bukan sebagai elemen gambar. Caranya lewat properti background-image, dengan pengaturan ukuran dan posisi tersendiri.

.hero {
  background-image: url("/gambar/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Kelebihannya, teks bisa diletakkan langsung di atas gambar tanpa elemen tambahan. Kekurangannya, gambar latar tidak punya teks alternatif, sehingga tidak terbaca pembaca layar dan tidak muncul kalau gambar gagal dimuat. Untuk gambar yang membawa informasi, pakai elemen gambar biasa dan tulis teks alternatifnya. Latar belakang lebih cocok untuk hiasan.

Mengatur bentuk sudut dan bingkai

Sudut membulat diatur lewat border-radius. Untuk membuat gambar menjadi lingkaran, gunakan nilai 50 persen pada gambar yang rasionya persegi. Bingkai tipis diatur lewat border. Yang perlu dijaga, ukuran gambar tidak bertambah besar dari yang direncanakan saat bingkai ditambahkan; pakai box-sizing: border-box pada aturan umum halaman supaya bingkai ikut dihitung dalam lebar elemen.

Menyembunyikan gambar yang gagal dimuat

Gambar yang gagal dimuat menampilkan ikon berkas rusak yang mengganggu tampilan. Sebagian situs menyembunyikannya dengan aturan CSS sederhana, sehingga ruangnya kosong alih-alih menampilkan ikon rusak. Cara ini bukan pengganti pemeriksaan alamat gambar, hanya peredam tampilan saat ada masalah.

Menulis teks alternatif yang benar

Teks alternatif bukan urusan CSS, tetapi sering terlewat saat gambar diatur tampilannya. Atribut ini menjelaskan isi gambar untuk pembaca layar dan muncul saat gambar gagal dimuat. Isinya singkat dan menggambarkan fungsi gambar di halaman, bukan menyalin nama berkasnya.

Untuk gambar hiasan yang tidak membawa informasi, teks alternatifnya dibiarkan kosong. Membiarkannya kosong membuat pembaca layar melewatinya, yang justru perilaku yang benar. Untuk gambar yang membawa informasi, tulis apa yang disampaikannya.

Kesalahan yang sering terjadi

Memberi ukuran tetap pada gambar tanpa memikirkan layar kecil. Gambar selebar 1200 piksel yang dipaksa lebar tetap akan meluber di ponsel. Batasi dengan max-width dan biarkan tingginya menyesuaikan.

Memakai fill untuk gambar yang rasionya berbeda dari kotaknya. Hasilnya gambar gepeng. Pakai cover kalau boleh terpotong, atau contain kalau seluruh isi harus terlihat.

Menaruh gambar penting sebagai latar belakang. Gambar latar tidak punya teks alternatif dan tidak terlihat kalau gagal dimuat.

Mengandalkan CSS untuk mengecilkan berkas. CSS hanya mengubah tampilan; berkas yang berat tetap diunduh penuh.

Menulis aturan umum yang menimpa aturan khusus. Aturan untuk semua gambar bisa menimpa aturan untuk gambar tertentu, tergantung urutan dan tingkat kekhususannya. Periksa dengan alat pengembang peramban saat hasilnya tidak sesuai.

Cara memeriksa hasilnya

Buka halaman di peramban, lalu periksa dengan alat pengembang. Klik kanan pada gambar dan pilih periksa elemen. Di sana terlihat ukuran tampilnya, ukuran berkas aslinya, dan aturan CSS mana yang sedang berlaku, termasuk kalau ada aturan yang saling menimpa.

Ubah lebar jendela perlahan dari lebar penuh sampai seukuran ponsel, dan perhatikan apakah ada gambar yang meluber atau tata letak yang bergeser. Periksa juga gambar yang teksnya menjadi tidak terbaca setelah dikecilkan. Untuk pengujian kecepatan halaman, langkahnya ada di Cara Menguji Kecepatan Gambar Website.

Terakhir, uji dengan jaringan lambat, dan periksa apakah halamannya tetap terbaca saat gambarnya belum muncul. Halaman yang baik tetap bisa dipakai tanpa gambarnya.

Kapan aturan CSS tidak diperlukan

Kalau gambar sudah berukuran pas dan hanya muncul satu di halaman, aturan khusus mungkin tidak diperlukan. Aturan umum max-width sudah cukup.

Kalau situs Anda memakai kerangka kerja yang sudah mengurus gambar, misalnya kelas bawaan tema, periksa dulu kelas yang tersedia sebelum menulis aturan baru. Menimpa aturan bawaan tanpa memeriksanya sering menimbulkan efek samping di halaman lain.

Kalau gambar dimuat dari sistem pengelola konten yang menyisipkan ukuran otomatis, periksa HTML yang dihasilkan sebelum menambahkan CSS. Ukuran yang sudah disisipkan sistem biasanya sudah cukup.

Pertanyaan yang sering muncul

Properti apa yang paling penting untuk gambar? max-width: 100% dan height: auto sebagai aturan dasar, lalu object-fit untuk gambar yang kotaknya berasio tetap.

Apa bedanya cover dan contain? cover memenuhi seluruh kotak dan memotong bagian yang berlebih. contain menampilkan seluruh gambar dan menyisakan ruang kosong di sisi yang tidak terisi.

Kenapa gambar saya gepeng? Karena rasionya dipaksa berubah, biasanya oleh nilai fill atau oleh lebar dan tinggi yang keduanya ditentukan tanpa menjaga rasio. Pakai object-fit atau biarkan salah satu sisi otomatis.

Apakah CSS bisa mengecilkan ukuran berkas? Tidak. CSS hanya mengubah tampilan. Berkas yang diunduh tetap sebesar aslinya. Kecilkan berkasnya lewat Kompres Foto.

Apakah gambar latar bisa punya teks alternatif? Tidak. Kalau gambar itu membawa informasi, pakai elemen gambar biasa dengan teks alternatif.

Siapkan berkasnya, lalu atur tampilannya

Urutan yang paling sedikit menimbulkan masalah: tentukan ukuran tampil gambar, siapkan berkas dengan dimensi yang mendekati ukuran itu lewat Kompres Foto, pasang di halaman dengan atribut dimensi, lalu atur tampilannya dengan CSS. Untuk gambar yang dipotong pada kotak berasio tetap, pastikan subjeknya berada di bagian yang tidak terpotong. Peta lengkap pekerjaan gambar untuk web ada di Gambar untuk Web.