Panduan Pemula untuk Gambar Responsif: Cara Memperbaikinya

Tutorial gambar responsif ini akan membahas teknik CSS, fitur HTML, dan beberapa alat yang ingin Anda pertimbangkan. Semua ini akan memberi Anda gambaran yang baik untuk memulai dengan gambar responsif dalam proyek Anda hari ini.

Daftar Isi:

• Gambar responsif dengan CSS biasa
• Gambar responsif dengan atribut srcset dan sizes
• Menggunakan srcset dengan deskriptor kepadatan piksel
• Menggunakan elemen <picture>
• Alat dan layanan untuk membantu dengan gambar responsif

Gambar responsif dengan CSS biasa

Cara paling sederhana untuk membuat gambar apa pun di halaman web menjadi responsif tidak memerlukan kueri media atau HTML tambahan. Anda dapat membuat gambar apa pun tumbuh dan menyusut tergantung pada ukuran jendela dengan beberapa baris HTML dan CSS.

Pertama, HTML saya akan menyertakan atribut width dan height :

Menyertakan nilai width dan height dalam HTML adalah praktik terbaik. Ini memastikan bahwa browser mencadangkan ruang yang diperlukan untuk gambar dan tidak ada perubahan halaman berikutnya saat gambar dimuat.

Bersamaan dengan itu, saya akan menggunakan CSS berikut:

 img { max-width : 100% ; height : auto; }
 Bahasa kode: CSS ( css )

Nilai-nilai ini akan menimpa HTML saya. Properti max-width diatur ke 100% untuk memastikannya memenuhi ruang apa pun yang dibutuhkan, hingga maksimum 1000px (nilai dari HTML). Nilai height auto memastikan bahwa tinggi gambar menjaga dimensi gambar proporsional dengan lebar dan tinggi alaminya. Jika saya menghapus height: auto line, gambar akan tetap pada ketinggian yang ditentukan dalam HTML, terlepas dari lebarnya – yang biasanya bukan yang saya inginkan.

Anda dapat mencoba contoh sederhana ini menggunakan CodePen berikut. Yang terbaik adalah membuka demo di jendela baru jika Anda ingin menguji responsivitas.

Dan perhatikan bahwa dalam contoh saya, dimensi alami gambar adalah 2000px x 1333px tetapi saya memilih untuk menampilkannya pada maksimum 1000px.

Secara teoritis, saya dapat melakukan hal di atas untuk setiap gambar di halaman saya, dan ini akan menjadi cara yang belum sempurna dan dapat diterima untuk memasukkan gambar responsif ke dalam proyek saya. Tapi idealnya, saya ingin membawa ini ke tingkat berikutnya dan mendapatkan kendali atas resolusi gambar dan faktor lainnya, untuk meningkatkan kinerja dan bantuan dengan SEO, yang akan saya bahas di bagian berikut.

Gambar responsif dengan atribut srcset dan sizes

Dalam contoh CSS sederhana di atas, saya memuat gambar berukuran sekitar 1,44MB – bahkan setelah saya menggunakan kompresi lossless untuk mengurangi ukurannya. Itu tidak buruk jika dilihat di desktop, tapi itu jelas bukan ukuran yang saya inginkan untuk dimuat di perangkat kecil, seperti smartphone. Di sinilah atribut srcset dan sizes berguna.

Atribut srcset memungkinkan Anda untuk menentukan beberapa ukuran gambar dalam satu nilai. Ini akan menjadi gambar yang dapat diakses oleh browser atau perangkat dalam keadaan yang ditentukan. Atribut sizes bekerja bersama dengan srcset untuk memberi tahu browser gambar mana yang harus dipilih.

Berikut adalah contoh yang menggunakan beberapa versi gambar leopard.png dari contoh sebelumnya:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Bahasa kode: HTML, XML ( xml )

Jika Anda belum pernah melihat atribut srcset dan sizes sebelumnya, itu mungkin tampak membingungkan pada pandangan pertama. Saya akan menguraikan semuanya sehingga relatif mudah untuk dipahami.

Memecah atribut srcset

Atribut srcset menerima daftar yang dipisahkan koma dari satu atau lebih string. Setiap string berisi:

• URL yang menunjuk ke gambar
• Salah satu deskriptor opsional berikut (dipisahkan dengan spasi):
  • Deskripsi lebar
  • Deskriptor kepadatan piksel

Dalam contoh saya, saya telah menyertakan deskriptor lebar, yang paling sering Anda lihat. Saya telah menyertakan tiga versi gambar yang berbeda: Versi resolusi tinggi yang besar, bersama dengan satu yang lebarnya 800px dan yang lain dengan lebar 480px.

Perhatikan ketika saya menggunakan deskriptor lebar dalam contoh di atas, sintaksnya adalah nilai lebar yang segera diikuti oleh "w" (jangan gunakan nilai satuan "px"!). Untuk setiap deskriptor lebar yang mewakili gambar, saya menggunakan lebar intrinsik gambar dalam piksel. Anda bisa mendapatkan ukuran sebenarnya dari gambar apa pun dengan salah satu dari beberapa cara berbeda – dengan merujuk propertinya di sistem file Anda, editor foto, atau bahkan di browser atau alat pengembang browser Anda.

Memecah atribut sizes

Atribut sizes hanya berfungsi bersama dengan atribut srcset . Anda dapat menggunakan srcset sendiri (lihat bagian berikutnya), tetapi cara paling umum untuk menggunakan srcset adalah bersama dengan sizes .

Atribut sizes menerima daftar yang dipisahkan koma dari satu atau beberapa string. Setiap string berisi:

• Kondisi media (mirip dengan kueri media yang digunakan dalam CSS)
• Nilai yang menentukan ukuran "slot" yang akan digunakan gambar

Nilai slot dapat berupa panjang absolut seperti em atau px atau unit relatif area pandang (mis. vw ). Perhatikan dalam contoh saya, nilai slot dalam atribut sizes tidak sama persis dengan tiga deskriptor lebar. Ini kodenya lagi:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Bahasa kode: HTML, XML ( xml )

Fakta bahwa nilai slot tidak sama persis dengan deskriptor lebar tidak masalah. Dalam kasus saya, saya dapat memecah nilai sizes sebagai:

• Area pandang lebar 600px akan memuat gambar 480w dari nilai srcset di dalam slot yang lebarnya 480px.
• Area pandang lebar 1000px akan memuat gambar 800w dalam slot 800px.
• Gambar ukuran penuh default (2000w) akan mengisi slot 1000px jika kondisi media sebelumnya tidak terpenuhi.

String terakhir adalah nilai slot saja, tanpa kondisi media. Seperti disebutkan, ini memastikan browser akan memiliki sesuatu untuk ditampilkan jika tidak ada kondisi media yang terpenuhi, berfungsi sebagai default.

Anda dapat melihat contoh kode dalam tindakan menggunakan demo CodePen di bawah ini. Perhatikan bahwa dalam kasus ini, Anda harus menguji sesuatu yang meniru perangkat yang berbeda (seperti DevTools di Chrome). Anda juga dapat membuka halaman menggunakan berbagai perangkat nyata untuk melakukan pengujian yang sebenarnya. Untuk kenyamanan, saya telah menyertakan hamparan teks pada setiap gambar sehingga Anda dapat melihat mana yang dimuat saat Anda melihat halaman.

Perhatikan bahwa setelah gambar asli dimuat, ukuran gambar tidak berubah saat Anda mengubah ukuran area pandang. srcset dan sizes berguna untuk memuat gambar sesuai dengan kondisi media pada pemuatan pertama, tetapi tidak akan membantu untuk mengganti gambar berdasarkan pengubahan ukuran layar. Nanti saya akan menunjukkan fitur gambar responsif berbeda yang akan menyelesaikan masalah itu.

Menggunakan srcset dengan deskriptor kepadatan piksel

Sebelumnya, saya telah menyebutkan bahwa atribut srcset dapat digunakan dengan deskriptor kepadatan piksel. Deskriptor ini memungkinkan browser memutuskan gambar mana yang akan digunakan berdasarkan kemampuan resolusi perangkat. Berikut tampilannya:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Bahasa kode: HTML, XML ( xml )

Perhatikan beberapa hal di sini. Pertama, untuk atribut src biasa, saya menggunakan gambar terkecil, memastikan pendekatan mobile-first. Selanjutnya, atribut srcset menyertakan beberapa versi gambar lainnya, dengan resolusi yang ditunjukkan oleh deskriptor 1,5x dan 2x. Gambar 480 tidak menyertakan deskriptor karena 1x tersirat. Akhirnya, perhatikan tidak ada atribut sizes yang ada, yang tidak saya perlukan dalam kasus ini. MDN menjelaskan bagaimana browser memilih gambar:

Untuk memahami cara kerja deskriptor, ingatlah bahwa satu piksel perangkat mewakili setiap piksel CSS. Jadi 1x akan menjadi rasio 1:1, 1,5x akan menjadi rasio 1,5:1, dan seterusnya. Anda dapat mencobanya di CodePen di bawah, tetapi Anda harus menggunakan perangkat yang berbeda (atau menggunakan alat yang menirunya) untuk melihat perbedaannya.

Menggunakan elemen <picture>

Sejauh ini, fitur yang telah saya diskusikan untuk menggabungkan gambar responsif mengasumsikan bahwa saya selalu menampilkan gambar yang sama tetapi dengan ukuran dan resolusi yang berbeda. Dan meskipun saya menggunakan CSS di semua contoh untuk mengubah lebar gambar saat pengguna mengubah ukuran browser, gambar itu sendiri tidak pernah benar-benar berubah setelah halaman dimuat.

Elemen <picture> adalah fitur HTML yang memungkinkan Anda untuk menawarkan versi alternatif gambar berdasarkan keberadaan fitur media tertentu. Hal ini juga memungkinkan gambar untuk dialihkan ketika pengguna mengubah ukuran viewport dan pada dasarnya memungkinkan Anda untuk melakukan arah seni dengan gambar Anda, menunjukkan variasi dari pemandangan yang sama tetapi dipotong atau diperbesar secara berbeda tergantung pada ukuran perangkat.

Misalnya, bidikan lebar dengan objek kecil di tengah akan sesuai untuk perangkat yang lebih besar di desktop atau tablet, tetapi perangkat yang lebih kecil seperti ponsel pintar dapat memuat gambar yang sama yang dipotong atau diperbesar.

Berikut beberapa contoh kode yang memungkinkan saya melakukan beberapa arah seni pada gambar saya:

Perhatikan hal berikut tentang kode:

• Elemen <picture> menerima beberapa elemen <picture> bersarang sebagai anak-anak
• Setiap elemen <source> di dalam <picture> menggunakan atribut media untuk menentukan kondisi media yang memicu penggunaan gambar sumber tersebut
• Elemen <picture> menerima <img> elemen sebagai anak, yang dikenali browser sebagai fallback jika tidak mendukung <picture>
• Tidak ada atribut langsung pada elemen <picture> ( <picture> hanya menerima atribut global HTML dan tidak memiliki atribut sendiri)

CodePen di bawah ini menunjukkan ini:

Jika Anda membuka demo di jendela baru, Anda dapat mengubah ukuran jendela untuk melihat perubahan gambar. Perhatikan bagaimana subjek gambar semakin diperbesar saat jendela browser mengecil. Ini adalah cara mudah untuk membuat gambar responsif yang diarahkan pada seni yang terlihat sesuai pada perangkat apa pun yang digunakan. Tentu saja, ini membutuhkan sedikit lebih banyak pekerjaan, tetapi ada baiknya jika Anda ingin gambar Anda bermakna di perangkat apa pun yang digunakan.

Alat dan layanan untuk membantu dengan gambar responsif

Ada banyak sekali alat yang tersedia, baik gratis maupun komersial, yang akan membantu mengimplementasikan gambar responsif. Dan beberapa di antaranya akan membantu Anda menghindari keharusan menulis banyak kode yang telah saya diskusikan. Berikut adalah beberapa yang mungkin berguna bagi Anda:

Yang penting, dan nyaman, sejumlah layanan berbeda dapat melakukan gambar responsif secara otomatis, menawarkan fitur seperti ukuran gambar berbeda, API untuk pembuatan gambar langsung, dan banyak lagi.

Bahkan WordPress sendiri hadir dengan dukungan bawaan untuk gambar responsif (mulai dari versi 4.4).

Alat/layanan lain yang layak untuk dilihat adalah Optimole. Ini adalah alat pengoptimalan dan pengiriman gambar canggih yang dibuat oleh tim di belakang Themeisle. Yang satu ini tidak hanya akan mengurangi ukuran disk gambar Anda tanpa mengurangi kualitas visual, tetapi juga akan menangani pengiriman gambar ke pengunjung situs web Anda melalui CDN gambar. Salah satu aspek dari fitur pengiriman gambar ini adalah gambar Anda juga akan dioptimalkan untuk dilihat di perangkat yang berbeda.

Ada versi gratis Optimole yang tersedia. Ini memungkinkan hingga 5.000 kunjungan situs web setiap bulan dan akan memberi Anda semua fitur penskalaan otomatis, CDN, dan banyak lagi.

Apa pengalaman Anda dengan gambar responsif di situs web? Beri tahu kami di komentar di bawah.

Tata letak dan presentasi oleh Chris Fitzgerald dan Karol K.