GO Blog

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 Gambar

Adaptive 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 Cookies

Keith 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 Src

Sencha 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 Elemen

Hal 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>.

•     PB Responsive Image
•     WP Responsive Image
•     Simple Responsive Image
•     Picture Fill WP