Advertisement
Web Design

5 Metode Untuk Responsive Images

(Responsive Images) Ethan Marcott, orang yang menciptakan istilah Responsive Web Design, menyatakan dalam artikelnya bahwa Fluida Image adalah salah satu unsur dari Responsive Web Design. Masalah dengan Fluid Image, walaupun gambar tampaknya menjadi responsive dan bisa cocok dengan baik dalam berbagai ukuran viewport, ukuran gambar yang sama didownload oleh pengguna terlepas dari media gambar yang sedang dilihat.

5 Metode Untuk Responsive Images

Ini adalah berita buruk bagi pengguna yang memiliki transfer data terbatas namun tidak diketahui, dan itu membuat situs kamu tampak ‘lambat’ di daerah dengan koneksi Internet dengan kecepatan yang suram.

Ini adalah salah satu masalah yang paling dibicarakan di kalangan pengembang web. Dan ada banyak yang harus dilakukan sebelum RWD bisa menjadi benar mempunyai solusi akhir dalam membangun sebuah website mobile yang dioptimalkan. Saat ini ada berbagai teknik dan alat-alat yang muncul mencoba untuk memecahkan rintangan ini. Mari kita lihat beberapa dari mereka sekarang.

5 Metode Untuk Responsive Images

Adaptive Image

Adaptive Image adalah sebuah script PHP kecil yang mendeteksi ukuran layar pengguna dan memberikan gambar yang tepat untuk ukuran layar tersebut. Ini tidak memerlukan perubahan markup <img> kamu saat ini, tetapi pelaksanaannya agak menakutkan bagi pengguna yang kurang begitu mengerti teknologi.

adaptive-image

(Image source: AdaptiveImage)
 

Responsive Image Menggunakan Cookies

Keith Clark melakukan pendekatan sendiri untuk membuat layanan Responsive Image Menggunakan Cookies. 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. Kamu dapat membaca penjelasannya serta mendapatkan kode dari artikel di blog Clark, Responsive Image Menggunakan Cookies.

Sencha.Io Src

Sencha adalah kerangka pengembangan mobile yang memungkinkan kita untuk membangun native aplikasi yang tampak dengan HTML, CSS dan JavaScript. Jika kamu membangun aplikasi kamu dengan Sencha, kamu dapat memanfaatkan API, Sencha.io Src, untuk mengubah ukuran gambar kamu dengan cara yang cerdas, berdasarkan pengguna ukuran layar perangkat.

API memiliki satu set fungsi yang memungkinkan fleksibilitas atas output. Untuk rincian teknis lebih lanjut, klik link berikut ini.

sencha-src

(Image source: Sencha)

HTML5 Picture Element

Hal ini tampaknya menjadi standar masa depan citra responsive. Sebuah elemen baru yang disebut <picture> diusulkan agar memungkinkan kita untuk mengatur berbagai sumber gambar, dan juga untuk mengacu pada breakpoint sumber gambar yang harus disajikan, seperti:


Elemen ini, bagaimanapun, masih dalam tahap Working Draft. Hal ini belum berlaku. Sampai saat itu kamu dapat menggunakan polyfill sebutan 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>

Plugins

Jika kamu menggunakan WordPress sebagai platform pubilkasi kamu, kamu beruntung, karena ada beberapa plugin yang melayani foto dalam cara yang mirip dengan unsur <picture>.

Jika kamu menggunakan Drupal, ada sebuah proyek yang disebut Picture yang bekerja dengan cara yang sama.

Focal Point

Focal Point adalah kerangka kerja yang memungkinkan pengembang untuk “crop” gambar dan mengontrol fokus pada titik fokus untuk responsive design. 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) dicrop, yang berarti kita berakhir men-download ukuran gambar yang sama. Selain itu, hal ini juga mungkin tidak bekerja dalam kasus di mana gambar tidak dibungkus dengan elemen.

Responsive Images

(Image source: Noupe)
 

Seperti dikatakan, belum ada satu implementasi yang menetapkan standar untuk menjawab masalah ini sepenuhnya. Teknik-teknik dan alat-alat yang tercantum di atas sebagai solusi, memiliki kelemahan mereka sendiri dan tidak bisa keluar sebagai solusi akhir untuk setiap kasus.

Hal ini juga belum bisa diyakinkan apakah menawarkan properti baru <picture>, akan menjadi solusi yang direkomendasikan di masa depan. Jadi, sampai saat itu, tampaknya kita terjebak dengan Image Fluid.

Via hongkiat

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *