Satu Ukuran Cocok Untuk Beberapa: Panduan untuk Solusi Gambar Desain Web Responsif

Saat perangkat seluler dan tablet semakin dekat untuk mencapai dominasi dunia akhir, desain dan teknologi web berlomba untuk mengakomodasi jumlah ukuran layar yang terus bertambah. Namun, merancang alat untuk memenuhi tantangan fenomena ini membawa serangkaian masalah baru, dengan salah satu kata kunci terbaru yang muncul adalah "web responsif". Ini adalah tantangan untuk membuat web berfungsi di sebagian besar, jika tidak semua, perangkat tanpa menurunkan pengalaman pengguna. Alih-alih mendesain konten agar sesuai dengan desktop atau laptop, informasi harus tersedia untuk ponsel, tablet, atau permukaan apa pun yang terhubung ke web. Namun, evolusi desain web responsif ini terbukti sulit dan terkadang menyakitkan.

Meskipun hampir sepele untuk mengakomodasi informasi tekstual, bagian yang sulit muncul ketika kami mempertimbangkan konten seperti gambar responsif, infografis, video, dan sebagainya, yang dulunya dirancang hanya untuk desktop. Ini tidak hanya memunculkan pertanyaan tentang menampilkan konten dengan benar, tetapi juga bagaimana konten itu sendiri dikonsumsi menggunakan perangkat yang berbeda. Pengguna di ponsel pintar berbeda dengan pengguna di desktop. Hal-hal seperti paket data dan kecepatan pemrosesan harus dipertimbangkan juga. Google telah mulai menyoroti situs ramah seluler pada hasil pencariannya, dengan beberapa berspekulasi bahwa itu akan mengarah pada peningkatan peringkat halaman yang substansial ke situs tersebut. Solusi sebelumnya mengatasi hal ini dengan menerapkan subdomain khusus seluler (dan pengalihan) tetapi hal ini meningkatkan kerumitan dan cepat ketinggalan zaman. (Tidak setiap situs memiliki kemampuan untuk membayar rute ini.)

Dalam Pencarian untuk Gambar Web yang Responsif

Pada titik ini, pengembang dan perancang harus memastikan pemuatan situs web mereka dioptimalkan untuk memenuhi pengguna yang berada di situs seluler. Lebih dari 20% lalu lintas web sekarang adalah pengguna seluler, dan jumlahnya masih terus meningkat. Dengan pengambilan gambar di antara bagian terbesar dari data konten halaman, menjadi prioritas untuk mengurangi beban ini. Beberapa upaya telah dilakukan untuk menyederhanakan pengubahan ukuran gambar desain responsif, termasuk, solusi sisi server dan front-end. Untuk membahas solusi gambar responsif ini, pertama-tama kita perlu memahami kekurangan penautan gambar saat ini.

Tag <img> hanya memiliki atribut sumber yang menautkan langsung ke gambar itu sendiri. Tidak ada cara untuk menentukan jenis gambar yang benar yang dibutuhkan tanpa add-on apa pun.

Tidak bisakah kita memasukkan semua ukuran gambar ke dalam HTML, dan menggunakan aturan CSS untuk display:none untuk semua kecuali gambar yang benar? Itu adalah solusi paling logis di dunia logis yang sempurna. Dengan cara ini browser dapat mengabaikan semua gambar yang tidak ditampilkan dan, secara teori, tidak mengunduhnya. Namun, browser dioptimalkan di luar logika umum. Untuk membuat halaman dirender cukup cepat, browser mengambil terlebih dahulu konten yang ditautkan bahkan sebelum stylesheet dan file JavaScript yang diperlukan dimuat sepenuhnya. Alih-alih mengabaikan gambar besar yang ditujukan untuk desktop, kami akhirnya mengunduh semua gambar dan menghasilkan pemuatan halaman yang lebih besar. Teknik khusus CSS hanya berfungsi untuk gambar yang dimaksudkan sebagai gambar latar karena ini dapat diatur dalam lembar gaya (menggunakan kueri media).

Jadi, apa yang harus dilakukan situs web?

Solusi Penskalaan Gambar Responsif Back-End

Kecuali situs/sub-domain khusus seluler, kita dibiarkan dengan mengendus agen pengguna (UA) dan menggunakannya untuk menyajikan gambar berukuran benar kembali ke pengguna. Namun, pengembang mana pun dapat membuktikan betapa tidak dapat diandalkannya solusi ini. String UA baru terus bermunculan setiap saat, membuatnya sulit untuk mempertahankan dan memperbarui daftar yang lengkap. Dan tentu saja, ini bahkan tidak memperhitungkan ketidakandalan string UA yang mudah dipalsukan.

Gambar Adaptif

Namun, beberapa solusi sisi server layak dipertimbangkan. Gambar Adaptif adalah solusi hebat bagi mereka yang lebih memilih perbaikan gambar responsif back-end. Itu tidak memerlukan markup khusus tetapi menggunakan file JavaScript kecil dan melakukan sebagian besar pekerjaan berat di file back-endnya. Ini menggunakan server yang dikonfigurasi PHP dan nginx. Itu juga tidak bergantung pada sniffing UA apa pun tetapi sebaliknya memeriksa lebar layar. Gambar Adaptif bekerja sangat baik untuk memperkecil gambar, tetapi juga berguna ketika gambar besar membutuhkan arah seni, yaitu pengurangan gambar dengan teknik seperti pemotongan dan rotasi - bukan hanya penskalaan.

Sentuhan Sencha

Sencha Touch adalah solusi gambar desain responsif back-end lainnya, meskipun lebih baik menyebutnya sebagai solusi pihak ketiga. Sencha Touch akan mengubah ukuran gambar sesuai dengan mengendus UA. Di bawah ini adalah contoh dasar tentang cara kerja layanan:

 <img src="http://src.sencha.io/http://example.com/images/kitty_cat.jpg" alt="My Kitty Cat">

Ada juga pilihan untuk menentukan ukuran gambar, jika kita tidak ingin Sencha mengubah ukuran gambar secara otomatis.

Pada akhirnya, solusi sisi server (dan pihak ketiga) memerlukan sumber daya untuk memproses permintaan sebelum mengirim kembali gambar yang benar. Ini membutuhkan waktu yang berharga dan pada gilirannya memperlambat perjalanan permintaan-tanggapan. Solusi yang lebih baik mungkin jika perangkat itu sendiri menentukan sumber daya mana yang akan diminta secara langsung, dan server meresponsnya.

Solusi Front-End

Baru-baru ini, ada peningkatan besar di sisi browser untuk menangani gambar responsif.

Elemen <picture> telah diperkenalkan dan disetujui dalam spesifikasi HTML5 oleh W3C. Saat ini tidak tersedia secara luas di semua browser tetapi tidak akan lama sebelum tersedia secara asli. Sampai saat itu, kami mengandalkan polyfill JavaScript untuk elemen tersebut. Polyfill juga merupakan solusi hebat untuk browser lawas yang tidak memiliki elemen tersebut.

Ada juga kasus atribut srcset yang tersedia untuk beberapa browser berbasis webKit untuk elemen <img> . Ini dapat digunakan tanpa JavaScript dan merupakan solusi yang bagus jika browser non-webKit diabaikan. Ini adalah stop-gap yang berguna untuk kasus aneh di mana solusi lain gagal, tetapi tidak boleh dianggap sebagai solusi yang komprehensif.

isi gambar

Picturefill adalah perpustakaan polyfill untuk elemen <picture> . Ini adalah salah satu perpustakaan paling populer di antara solusi front-end untuk masalah ukuran dan penskalaan gambar yang responsif. Ada dua versi; Picturefill v1 meniru elemen <picture> menggunakan span sementara Picturefill v2 menggunakan elemen <picture> di antara browser yang sudah menawarkannya dan menyediakan polyfill untuk yang lama (misalnya, untuk IE >= IE9). Ini memiliki beberapa batasan dan solusi, terutama untuk Android 2.3 - yang kebetulan merupakan contoh di mana atribut img srcset datang untuk menyelamatkan. Di bawah ini adalah contoh markup untuk menggunakan Picturefill v2:

 <picture> <source media="(min-width: 768px)"> <source media="(max-width: 767px)"> <img alt="My Kitty Cat"> </picture>

Untuk meningkatkan kinerja pada pengguna dengan paket data terbatas, Picturefill dapat dikombinasikan dengan lazy loading. Namun, perpustakaan dapat menawarkan dukungan browser yang lebih luas dan mengatasi kasus-kasus aneh daripada mengandalkan tambalan.

Imager.js

Imager.js adalah perpustakaan yang dibuat oleh tim BBC News untuk menghasilkan gambar responsif dengan pendekatan berbeda dengan yang digunakan oleh Picturefill. Sementara Picturefill mencoba membawa elemen <picture> ke browser yang tidak didukung, Imager.js berfokus pada pengunduhan hanya gambar yang sesuai sambil juga mengawasi kecepatan jaringan. Ini juga menggabungkan pemuatan lambat tanpa bergantung pada perpustakaan pihak ketiga. Ia bekerja dengan menggunakan elemen placeholder dan menggantinya dengan elemen <img> . Kode contoh di bawah ini menunjukkan perilaku ini:

 <div> <div class="image-load" data-src="http://example.com/images/kitty_{width}.jpg" data-alt="My Kitty Cat"></div> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

HTML yang dirender akan terlihat seperti ini:

 <div> <img src="http://example.com/images/kitty_480.jpg" data-src="http://example.com/images/kitty_{width}.jpg" alt="My Kitty Cat" class="image-replace"> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

Dukungan browser jauh lebih baik daripada Picturefill dengan mengorbankan menjadi solusi yang lebih pragmatis daripada yang berpikiran maju.

Pengacakan Sumber

Source Shuffling mendekati masalah gambar responsif dari sudut yang sedikit berbeda dari perpustakaan front-end lainnya. Ini menyerupai sesuatu yang keluar dari sekolah pemikiran "mobile first", di mana ia melayani resolusi sekecil mungkin secara default. Setelah mendeteksi bahwa perangkat memiliki layar yang lebih besar, perangkat akan menukar sumber gambar dengan gambar yang lebih besar. Rasanya seperti lebih banyak peretasan dan lebih sedikit perpustakaan yang lengkap. Ini adalah solusi yang bagus untuk sebagian besar situs seluler tetapi berarti pengunduhan sumber daya ganda untuk desktop dan/atau tablet tidak dapat dihindari.

Beberapa perpustakaan JavaScript terkenal lainnya adalah:

• HiSRC - Plugin jQuery untuk gambar responsif. Ketergantungan pada jQuery mungkin menjadi masalah.
• Mobify.js - Pustaka yang lebih umum untuk konten responsif, termasuk gambar, lembar gaya, dan bahkan JavaScript. Ini 'menangkap' DOM sebelum memuat sumber daya. Mobify adalah perpustakaan komprehensif yang kuat, tetapi mungkin berlebihan jika tujuannya hanya gambar responsif.

Ringkasan

Pada akhirnya, terserah pengembang untuk memutuskan pendekatan gambar desain web responsif yang sesuai dengan basis pengguna. Ini berarti pengumpulan dan pengujian data akan memberikan gambaran yang lebih baik tentang pendekatan yang akan diambil.

Sebagai penutup, daftar pertanyaan di bawah ini dapat membantu untuk dipertimbangkan sebelum memutuskan solusi gambar responsif yang sesuai.

• Apakah browser lawas menjadi masalah? Jika tidak, pertimbangkan untuk menggunakan pendekatan yang lebih modern (misalnya: Picturefill, atribut srcset )
• Apakah waktu respons kritis? Jika tidak, gunakan solusi pihak ketiga atau back-end.
• Apakah solusi seharusnya in-house? Solusi pihak ketiga jelas akan dikesampingkan.
• Apakah sudah ada banyak gambar di situs yang mencoba bertransisi ke gambar responsif? Apakah ada kekhawatiran tentang validasi atau tag semantik (atau lebih tepatnya tag non-semantik)? Ini akan membutuhkan solusi back-end untuk mengarahkan permintaan gambar ke sesuatu seperti Gambar Adaptif.
• Apakah arah seni menjadi masalah (khususnya untuk gambar besar dengan banyak informasi)? Pustaka seperti Picturefill akan menjadi solusi yang lebih baik untuk skenario seperti itu. Juga, salah satu solusi back-end akan bekerja dengan baik.
• Apakah ada kekhawatiran tentang kurangnya JavaScript? Salah satu solusi front-end akan keluar dari pertanyaan, yang meninggalkan opsi back-end atau pihak ketiga yang mengandalkan UA sniffing.
• Apakah ada prioritas untuk waktu respons seluler daripada waktu respons desktop? Pustaka seperti Pengacakan Sumber mungkin lebih tepat.
• Apakah ada kebutuhan untuk memberikan perilaku responsif pada setiap aspek situs, bukan hanya gambar? Mobify.js mungkin bekerja lebih baik.
• Apakah dunia yang sempurna telah tercapai? Gunakan display:none pendekatan!