Cara Membuat Gambar Responsive

Gambar responsive dibuat dengan menyediakan beberapa ukuran berkas, lalu membiarkan peramban memilih yang paling sesuai. Alat utamanya atribut srcset dan sizes pada tag img. Peramban memilih berdasarkan lebar layar dan kerapatan piksel perangkat, sehingga ponsel tidak perlu mengunduh berkas sebesar yang dipakai komputer.

Ada dua masalah berbeda yang sering digabung dalam satu istilah. Yang pertama, gambar harus muat di layar kecil tanpa membuat halaman melebar. Ini urusan CSS, dan solusinya sederhana. Yang kedua, gambar tidak boleh mengunduh byte lebih banyak daripada yang dibutuhkan. Ini urusan srcset dan sizes. Artikel ini membahas keduanya, karena gambar yang muat di layar tetap bisa boros kalau berkasnya berukuran penuh.

Ini panduan kode, bukan fitur tool. Tool di layanan ini menyiapkan berkasnya: memperkecil dimensi, menurunkan mutu, dan mengubah format. Ukuran cadangannya bisa dibuat dengan Kompres Foto.

Menahan gambar agar muat di layar kecil

Langkah paling dasar adalah membatasi lebar gambar agar tidak melebihi wadahnya:

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

Aturan ini menyelesaikan masalah gulir horizontal di ponsel. Tanpa itu, gambar selebar 1200 piksel akan memaksa halaman melebar, dan pengunjung harus menggulir ke samping untuk membaca. Dua baris itu sudah cukup untuk sebagian besar halaman.

Peramban modern juga memakai atribut width dan height pada tag gambar untuk memesan ruang sebelum gambarnya dimuat. Karena itu, atribut dimensi tetap perlu ditulis meskipun ukuran tampilnya diatur CSS. Penjelasannya ada di cara menentukan dimensi gambar di HTML.

Menyediakan beberapa ukuran berkas

Membatasi lebar dengan CSS membuat tampilannya pas, tetapi berkasnya tetap berukuran penuh. Ponsel tetap mengunduh gambar 1200 piksel meskipun hanya menampilkan 360 piksel. Di sinilah srcset dan sizes bekerja.

Bentuk dasarnya:

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Produk tampak depan"
  width="1600"
  height="1200">

Atribut srcset memuat daftar berkas beserta lebar aslinya, ditandai dengan huruf w. Atribut sizes memberi tahu peramban berapa lebar tampil gambar itu di berbagai kondisi layar. Peramban menggabungkan dua informasi itu dengan kerapatan piksel perangkat, lalu memilih berkas yang paling hemat yang masih cukup tajam.

Atribut src tetap ditulis sebagai cadangan untuk peramban lama yang tidak mengenal srcset. Isinya berkas ukuran menengah, bukan yang terbesar.

Untuk layar berkerapatan piksel tinggi, ada cara penulisan lain memakai penanda x, misalnya foto-800.webp 1x dan foto-1600.webp 2x. Cara ini dipakai kalau ukuran tampilnya tetap di semua layar. Untuk gambar yang lebarnya berubah mengikuti layar, penanda w lebih tepat.

Menyiapkan berkasnya

Sebelum menulis srcset, siapkan berkasnya. Tiga ukuran biasanya cukup: satu untuk ponsel, satu untuk tablet, dan satu untuk layar lebar. Ukuran yang dipilih bergantung pada ukuran tampil terbesar gambar itu di halaman.

Buka Kompres Foto, lalu pilih tool sesuai format berkas. Ukuran persen tersedia dari 10 sampai 200 persen, dan angkanya terlihat di pratinjau sebelum Anda mengunduh. Contoh yang terverifikasi: persen 50 pada gambar 1600x1200 menghasilkan 800x600. Dari berkas 1600 piksel, persen 50 memberi versi 800 piksel, dan persen 25 memberi versi 400 piksel.

Beri nama berkas yang mencerminkan ukurannya, misalnya foto-produk-400.webp, foto-produk-800.webp, dan foto-produk-1600.webp. Nama yang jelas membuat atribut srcset mudah dibaca dan dikoreksi.

Kalau format berkasnya perlu diubah, misalnya ke WebP untuk menghemat ukuran, kerjakan lebih dulu lewat Konversi Format Gambar. Setelah itu baru siapkan versi ukurannya.

Kalau rasionya berubah di layar kecil

Ada gambar yang tidak cukup dipotong atau diperkecil, melainkan perlu komposisi berbeda. Banner yang memanjang di komputer sering perlu versi yang lebih pendek di ponsel supaya subjeknya tetap terlihat. Untuk kebutuhan itu, elemen picture dipakai.

<picture>
  <source media="(max-width: 600px)" srcset="banner-ponsel.webp">
  <img src="banner-desktop.webp" alt="Promo akhir tahun" width="1600" height="600">
</picture>

Peramban memilih source pertama yang cocok dengan kondisinya. Kalau tidak ada yang cocok, tag img dipakai. Perhatikan bahwa atribut width dan height di tag img tetap ditulis, dan nilainya mengikuti gambar yang dipakai sebagai cadangan. Untuk gambar dengan rasio berbeda, ukuran pada versi ponsel perlu diatur lewat CSS agar ruang yang dipesan tetap benar.

Elemen picture juga bisa dipakai untuk menyediakan format alternatif, misalnya WebP untuk peramban yang mendukung dan JPG untuk yang belum. Untuk web yang hanya melayani peramban modern, cara itu jarang diperlukan sekarang.

Ukuran tampil dan ukuran berkas

Dua hal ini perlu dibedakan supaya penyiapan berkasnya tidak berlebihan. Ukuran tampil adalah seberapa besar gambar muncul di halaman. Ukuran berkas adalah jumlah piksel yang tersimpan. Untuk layar biasa, berkas dengan lebar sama dengan ukuran tampilnya sudah cukup. Untuk layar berkerapatan piksel tinggi, sediakan versi dua kali lipat.

Yang perlu dihindari adalah menyediakan berkas jauh lebih besar daripada kebutuhan tampil terbesar. Gambar yang paling besar ditampilkan selebar 800 piksel tidak perlu versi 4000 piksel, karena versi itu tidak akan pernah dipilih peramban dan hanya menambah berat unggahan di server.

Kalau gambar yang sama dipakai di dua tempat dengan ukuran berbeda, misalnya daftar artikel dan halaman detail, siapkan dua versi. Atribut sizes di setiap tempat akan berbeda, dan peramban akan memilih berkas yang sesuai untuk masing-masing.

Kesalahan yang sering terjadi

Menulis srcset tanpa sizes. Tanpa sizes, peramban menganggap gambar ditampilkan selebar penuh jendela. Pilihannya bisa salah, dan gambar berukuran lebih besar daripada yang diperlukan tetap terunduh.

Menulis sizes yang tidak cocok dengan tata letak sebenarnya. Kalau gambar sebenarnya hanya menempati setengah kolom, tulis 50vw, bukan 100vw. Angka yang salah membuat peramban memilih berkas yang terlalu besar.

Menyiapkan versi yang terlalu banyak. Tiga versi biasanya cukup. Menyiapkan enam versi menambah pekerjaan penyiapan dan ruang penyimpanan, sementara perbedaannya di jaringan kecil.

Lupa atribut width dan height. srcset menentukan berkas mana yang diunduh, bukan ruang yang dipesan. Tanpa dimensi, tata letak tetap bergeser. Keduanya bekerja bersama.

Memakai picture untuk semua gambar. Elemen picture diperlukan kalau rasionya berubah atau formatnya berbeda. Untuk sekadar ukuran berbeda, srcset dan sizes lebih sederhana dan lebih sedikit kodenya.

Cara mengujinya

Buka halaman di peramban, buka panel pengembang, dan pilih tab jaringan. Kecilkan lebar jendela, muat ulang halaman, lalu periksa berkas gambar mana yang terunduh. Pada lebar ponsel, yang terunduh seharusnya versi kecil, bukan versi terbesar.

Ulangi pada lebar layar yang berbeda dan perhatikan apakah berkasnya berganti sesuai perkiraan. Kalau versi terbesar selalu terunduh, periksa atribut sizes dan pastikan angkanya cocok dengan tata letak sebenarnya.

Periksa juga tampilannya. Gambar harus muat di wadahnya tanpa membuat halaman melebar, dan ketajamannya masih layak pada ukuran tampil. Kalau gambar terlihat pecah di layar berkerapatan tinggi, tambahkan versi yang lebih besar ke srcset.

Kapan gambar responsive tidak diperlukan

Kalau gambar selalu ditampilkan dengan ukuran yang sama di semua layar, misalnya ikon kecil di bilah navigasi, satu berkas sudah cukup. Menyiapkan beberapa versi hanya menambah pekerjaan tanpa manfaat.

Kalau situs Anda memakai penyedia gambar pihak ketiga, penyedia itu sering menangani penyediaan beberapa ukuran secara otomatis. Periksa dokumentasinya sebelum menulis srcset sendiri, karena dua mekanisme yang bekerja bersamaan bisa saling mengganggu.

Kalau gambar hanya muncul di satu tempat dengan ukuran tetap dan berkasnya sudah ringan, tidak ada yang perlu diubah. Gambar responsive berguna saat ukuran tampil berubah menurut layar, dan saat berat berkasnya cukup besar untuk terasa.

Pertanyaan yang sering muncul

Apakah srcset menggantikan CSS max-width? Tidak. Keduanya bekerja di lapisan berbeda. CSS memastikan gambar muat di wadahnya, dan srcset memastikan berkas yang diunduh sesuai kebutuhan. Keduanya dipakai bersama.

Apakah perlu menulis banyak versi ukuran? Tidak. Dua sampai tiga versi sudah memberi sebagian besar manfaatnya. Yang penting ukuran terkecil cukup untuk ponsel dan ukuran terbesar cukup untuk tampilan terlebar.

Apakah gambar responsive memperlambat halaman? Tidak, justru sebaliknya. Peramban mengunduh berkas yang lebih kecil di layar kecil. Yang menambah berat adalah menyediakan versi berlebihan yang tidak pernah dipilih, karena berkas itu tetap disimpan di server.

Apakah atribut sizes harus ditulis dalam satuan vw? Satuan vw adalah yang paling umum karena mengikuti lebar jendela. Satuan lain seperti px dan em juga bisa dipakai kalau ukuran tampilnya tetap, misalnya sizes="300px" untuk gambar yang selalu selebar 300 piksel.

Setelah gambar responsive

Gambar responsive menyelesaikan soal ukuran berkas yang diunduh di tiap layar. Lengkapi dengan atribut dimensi, pemuatan yang ditunda untuk gambar di bawah layar, dan format yang sesuai. Penjelasan tiap bagian ada di Gambar untuk Web, dan peta seluruh pekerjaan gambar ada di Panduan Gambar dan Foto.