Cara Memilih Tool Desain Image Responsif

Desain web responsif bukanlah konsep mewah lagi, hal itu merupakan sebuah kebutuhan. Tidak ada keraguan tentang fakta bahwa mobile dan perangkat portable yang mengambil alih dan sebagian besar situs web luar sana memerlukan skala rendah untuk lebih cocok dengan perangkat mereka. Beberapa hari yang lalu pun kita telah membahas Tool dan ServiceWeb Desain Responsif

Mungkin Anda sudah tahu segala sesuatu tentang topik ini, tapi hari ini kita akan melangkah sedikit lebih ke detail dan berbicara tentang salah satu pendekatan terbaru, gambar responsif. Sayangnya tidak hanya ukuran website saja yang penting, tetapi juga ukuran elemen yang interaktif, seperti gambar.

Mengapa ukuran gambar penting?

Apalagi sejak semakin banyak orang mulai menggunakan perangkat mobile, ukuran gambar menjadi masalah besar. Ingat bahwa tidak semua orang browsing internet dari Wi-Fi, tetapi banyak sebenarnya yang melakukannya pada bandwith 3G mereka sendiri, yang biasanya terbatas. Dan jika pengunjung ingin mengakses situs Anda dari daerah dengan jangkauan internet yang lemah, koneksi Edge mungkin tidak cukup tepat untuk memuat gambar dalam waktu yang layak.

Orang-orang akan lebih cenderung untuk meninggalkan situs web Anda ketika melihat banyak gambar yang harus dimuat. Mereka tidak ingin gambar Anda memperlambat semua menjadi down dan pasti Anda tidak ingin mengkonsumsi bandwith yang terbatas bagi sebagian, mungkin gambar yang tidak relevan.

Sudah ada beberapa teknik diluar sana yang dapat digunakan untuk menangani dengan pendekatan ini, seperti Github HiSRC, Foresight.js dan Picturefill, Adaptive Images dan beberapa lainnya. Ada banyak pilihan diluar sana meskipun ide gambar responsif cukup baru.

Diskusi utama

Hal ini juga penting untuk mengetahui mengapa gambar responsif merupakan salah satu bagian yang paling sulit dari metodologi desain responsif. Hal ini juga penting untuk diingat bahwa semua tool-tool yang disebutkan diatas merupakan cara yang berbeda dari “hacking” CSS dan tidak satupun darinya sempurna.

Masalah utama dengan skala rendah gambar adalah kita tidak dapat mengharapkan foto yang dimaksudkan untuk layar 27 inch untuk terlihat baik pada iPhone. Banyak gambar baru yang harus di upload untuk perangkat yang lebih kecil. Gambar responsif jauh lebih baik dari gambar yang diperkecil dan ada lebih banyak hal yang perlu dipertimbangkan selain tampilan atau dimensi browser. Beberapa hal seperti kualitas tampilan (kerapatan pixel, kapabilitas warna), konektivitas dan jenis masukan juga harus dipertimbangkan.

Selain itu banyak bandwith akan sia-sia jika perangkat mobile harus mendownload foto besar yang sama dan kemudian skalanya agar sesuai layar.

Semua tool tersebut diatas sangat terbatas, ingatlah! Beberapa dari mereka akan bekerja cukup baik untuk projek-projek Anda. Dalam rangka untuk menemukan satu yang cocok untuk Anda, mungkin ada beberapa hal untuk mempertimbangkannya. Ini akan membantu Anda membuat keputusan dan akhirnya memilih solusi yang cocok untuk proyek Anda.

Apakah Anda ingin memvalidasi?

Jika Anda bingung dengan validasi, maka beberapa teknik mungkin bekerja lebih baik dibandingkan yang lain. Tool seperti Picturefill menggunakan elemen yang berbeda untuk menjadi fungsional – elemen ini mungkin menjadi standar dimasa depan, tapi untuk saat ini secara teknis belum valid, yang berarti file HTML tidak akan memvalidasinya.

Jika validasi penting, kami sarankan Anda untuk melihat di Adaptive Images, HiSRC dan Responsive Enhance, yang semuanya menggunakan sintaks yang valid dan mana validasi tidak harus menjadi masalah.

validator

Apakah Anda sudah memiliki konten?

Hal ini penting untuk memikirkan tentang berapa banyak konten yang sudah Anda posting di blog dimana Anda ingin menggunakan tool ini. Jika Anda memiliki blog yang berusia tiga tahun, pasti akan ada beberapa gambar bagi Anda untuk dimodifikasi. Anda mungkin perlu untuk memeriksanya melalui setiap post dan setiap tag gambar dan mengubah semuanya dengan manual. Ini akan memakan waktu berminggu-minggu.

Adaptive Images mungkin menjadi solusi terbaik disini, karena tidak berpengaruh dengan perubahan markup. Apakah Adaptive Image sederhana. Adaptive Image mengirimkan permintaan routing gambar melalui file PHP yang memberikan gambar dalam ukuran yang sesuai untuk layar. Jika Anda, memiliki proyek kecil dan bisa untuk memperbarui kembali setiap gambar, kami pikir Anda harus melakukannya.

Bagaimana Tentang Markup Khusus?

Hal lain yang penting untuk dipertimbangkan saat Anda memiliki banyak konten adalah jika tool yang Anda gunakan mengharuskan Anda untuk menambahkan atribut khusus untuk setiap elemen gambar.

Beberapa tool membutuhkan penggunaan HTML khusus. Sementara tidak ada yang salah dengan sintaks ini dari sudut pandang semantik, mungkin bukan menjadi tugas yang sangat mudah untuk menyelesaikan bila Anda memiliki 400 gambar yang siap ditambahkan pada website Anda.

Jika terjadi akan kembali untuk mengedit setiap elemen bukanlah pilihan untuk Anda, kemudian Adaptive Images adalah cara yang terbaik. Sekarang Anda dapat menguji situs Anda menggunakan tool Responsif Desain.

Apakah Anda ingin Javascript/jQuery?

Beberapa teknik yang disebutkan diatas tidak menggunakan JavaScript, sementara yang lain melakukannya. Ini sangat tergantung dengan pilihan Anda, tapi kami akan menghindari memilih teknik yang menggunakan JavaScript sendiri. Ketika Anda memikirkan platform mobile, JavaScript bukan bahasa pemrograman terbaik untuk digunakan.

Umumnya tool yang menggunakan JavaScript akan membutuhkan elemen <noscript> dengan <img> atribut tambahan, dalam kasus pengguna JavaScript dimatikan. Kadang-kadang kode hack ini harus ditambahkan oleh Anda.

Jika Anda benar-benar melanggar penggunaan JavaScript, Sencha.IO mungkin menjadi pilihan terbaik. Sebagai gantinya gunakan cookies, tool ini mendeteksi string User Agent dan memberikan sebuah ukuran gambar yang sesuai untuknya.

Ingat bahwa jQuery juga JavaScript, sehingga tool yang tergantung pada librarynya, seperti HiSRC dan rwdImages, mungkin juga bekerja sedikit lambat.

318

Cropping atau mengubah ukuran

Anda juga perlu bertanya pada diri sendiri bagaimana Anda ingin tool yang digunakan dapat bekerja dengan gambar-gambar; beberapa dari mereka mungkin mengubah ukurannya, beberapa orang juga mungkin memotongnya. Sementara keduanya memiliki kelebihan dan kelemahan.

Jika Anda mengambil gambar yang besar dan mengubah ukurannya, mungkin konten tidak terlihat lagi pada ukuran skala kecil. Disisi lain, cropping gambar mungkin bisa lebih merusak gambar, seperti ketika memotong konten keluar dapat mengubah gambar yang bagus menjadi jelek karena rincian penting gambar hilang.

Picturefill mungkin menjadi pilihan terbaik dalam kasus ini, karena memungkinkan Anda untuk lebih spesifik tentang source dan berbagai situasi yang berbeda.

Apakah Anda menggunakan PHP atau yang lainnya?

Anda mungkin tidak peduli dengan diri ini, tetapi tool yang Anda gunakan dapat melakukannya. Beberapa dari mereka tidak didasarkan pada JavaScript, tetapi masih menggunakan .htaccess dan PHP. Hal ini memerlukan server Apache. Ingat bahwa banyak situs berjalan di Ruby dan Python, tidak hanya pada PHP. Responve Images merupakan salah satu tool terbaik menggunakan PHP.

Apakah Anda ingin menguji bandwith?

Jika pengujian bandwith user adalah sesuatu yang ingin Anda gunakan sebagai bagian dari pengambilan keputusan, ada beberapa tool yang melakukannya, seperti Foresight.js dan HiSRC.

Meskipun tidak terlalu sulit untuk men-download filt test dan menghitung waktu download, ada yang disayangkan tidak ada native bandwith media query.

Tool menggunakan teknik ini mungkin satu atau dua detik lebih lambat, tetapi manfaat yang didapatkan penyampaian gambar berdasarkan bandwith Anda saat ini merupakan aset.

testing

Bagaimana kerugiannya?

Sebagian besar tool-tool ini memiliki uptime yang sangat baik, tapi Anda tidak pernah tahu. Sebagian besar tool-tool ini benar-benar pihak ketiga dan jika down mereka tidak akan memproses permintaan dari situs Anda dan tidak akan memberikan gambar yang sesuai dengan ukuran layar pengguna. Dengan aplikasi pihak ketiga Anda selalu mengalami resiko downtime, sehingga Anda juga harus memikirkan kelemahan masalah ini.

Jika Anda tidak ingin memberikan aplikasi pihak ketiga untuk akses ke file Anda, kemudian mencoba Server Side Responsive Image.

Apakah Anda benar-benar membutuhkan tool?

Jika situs Anda berjalan dengan WordPress, Anda bahkan tidak perlu tool tersebut. Image Uploader dari WordPress memiliki opsi skala kecil untuk gambar Anda, sehingga Anda dapat memilih mana yang akan digunakan. Dan kami cukup yakin beberapa CMS (Content Management System) lain memiliki fitur yang sama. Dalam hal ini, menggunakan aplikasi pihak ketiga bahkan mungkin tidak diperlukan.

Solusi WordPress lebih lanjut

Bertahun-tahun yang lalu Steve Jobs telah mengatakan “there’s an app for that” sekaligus terlalu banyak. Jika Anda ingin WordPress Steve Jobs, Anda mungkin ingin mengatakan “there’s a plugin for that”, karena ada harfiah plugin untuk segala sesuatu di WordPress. Ada juga sebuah plugin yang disebut Mobble, yang mendeteksi ukuran layar dan menemani CSS Media Query.

Pelajari lagi

Jika gambar responsif merupakan sesuatu yang membuat Anda tertarik, Anda harus tahu sudah ada komunitas W3C resmi membahas dan mengembangkan hal-hal untuk itu. Anda dapat menemukan komunitasnya disini. Anda dapat banyak belajar dari sana, untuk mengenal lebih banyak orang yang tertarik dengan topik yang sama dan bahkan kontak dengan orang-orang dari industri.

Dalam kasus yang Anda ingin ketahui cerita dibalik gambar responsif, Anda harus membaca cerita ini. Anda mungkin tidak belajar banyak dari itu, tapi hal itu sangat baik untuk dibaca jika Anda tertarik pada pembicaraan.

45

Intinya

Jadi Anda pikir Anda tahu segala sesuatu tentang desain web responsif. Nah, tampaknya masih ada sesuatu yang baru yang tidak Anda ketahui atau tidak  menyadarinya.

Gambar responsive sama pentingnya dengan elemen lain dari konsep “desain web responsif”. Anda harus mempelajarinya dan meneliti beberapa pilihan dan menemukan yang tepat untuk Anda, jika Anda memutuskan Anda membutuhkan salah satunya. Dengan begitu banyak pilihan yang tersedia diluar sana. Semoga artikel ini bermanfaat untuk Anda.

Comments

comments