Ethan Marcotte, orang yang menciptakan istilah Desain Web Responsif, dinyatakan dalam artikelnya bahwa Fluida Gambar adalah salah satu bahan Desain Web Responsif. Masalah dengan Gambar Fluid adalah bahwa meskipun gambar tampaknya menjadi responsif dan bisa cocok dengan baik dalam berbagai ukuran viewport, ukuran gambar yang di download oleh pengguna terlepas dari media gambar yang sedang dilihat sama.
Ini adalah salah satu masalah yang paling dibicarakan di kalangan pengembang web. Dan ada banyak untuk melakukan sebelum RWD bisa menjadi benar-end solusi untuk membangun sebuah website mobile yang dioptimalkan. Saat ini ada berbagai teknik dan alat-alat yang muncul yang mencoba untuk memecahkan masalah ini, Mari kita lihat.
1. Adaptive GambarAdaptive Image adalah sebuah script PHP kecil yang mendeteksi ukuran layar pengguna dan memberikan gambar yang tepat untuk ukuran layar. Ini tidak memerlukan perubahan markup
<img> Anda saat ini, tetapi pelaksanaannya agak menakutkan bagi pengguna yang kurang tech-savvy.
2. Gambar responsif Menggunakan CookiesKeith Clark memiliki pendekatannya sendiri untuk melayani gambar responsif dengan Cookie. Secara teknis mendeteksi screensize dengan menggunakan JavaScript dan ukuran ukuran gambar yang tepat dengan menggunakan PHP sebelum disajikan dan dimuat pada halaman.
Namun, teknik ini memiliki banyak masalah dan membutuhkan lebih banyak eksperimen sebelum dapat menjadi solusi praktis. Anda dapat membaca penjelasannya serta mendapatkan kode dari artikel di
blog Clark, Gambar Responsif Menggunakan Cookies.
3. Sencha.io SrcSencha adalah kerangka pengembangan mobile yang memungkinkan kita untuk membangun aplikasi asli yang tampak dengan HTML, CSS dan JavaScript. Jika Anda membangun aplikasi Anda dengan Sencha, Anda dapat memanfaatkan API, Sencha.io Src, untuk mengubah ukuran gambar Anda dengan cara yang cerdas, berdasarkan pengguna ukuran layar perangkat.
API memiliki satu set fungsi yang memungkinkan fleksibilitas atas output.
4. HTML5 Gambar ElemenHal ini tampaknya menjadi standar masa depan citra responsif. Sebuah elemen baru yang disebut
<picture> diusulkan untuk memungkinkan kita untuk mengatur berbagai sumber gambar, dan juga untuk merujuk pada breakpoint yang sumber gambar harus disajikan, seperti:
<picture id="images">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
</picture>
Elemen ini, bagaimanapun, masih dalam tahap Working Draft. Hal ini belum berlaku. Sampai saat itu Anda dapat menggunakan polyfill disebut Picture Fill.
Picture Fill
Picture Fill adalah JavaScript library kecil yang dikembangkan oleh Scott Jehl. Ini meniru bagaimana <picture> bekerja menggunakan elemen <span>.
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
</span>
Plugin
Jika Anda menggunakan WordPress sebagai platform penerbitan Anda, Anda beruntung, karena ada beberapa plugin yang melayani foto dalam cara yang mirip dengan unsur
<picture>.
Jika Anda menggunakan Drupal, ada sebuah proyek yang disebut Picture yang bekerja dengan cara yang sama.
5. Focal Point
Focal Point kerangka kerja yang memungkinkan pengembang untuk "memotong" gambar dan mengontrol fokus pada titik fokus untuk desain responsif. Teknik ini murni dilakukan dengan CSS, penulis hanya menambahkan kelas dalam elemen yang berisi gambar.
Perlu dicatat bahwa meskipun trik dalam teknik ini adalah dengan menggunakan overflow: hidden untuk menyembunyikan bagian dari gambar. Jadi gambar tidak (secara teknis) dipotong, yang berarti kita men-download ukuran gambar yang sama. Selain itu, hal ini juga mungkin tidak bekerja dalam kasus di mana gambar tidak dibungkus dengan elemen.
Demikian semoga berguna...
Belum ada tanggapan untuk "Membuat gambar menjadi Responsif "
Post a Comment