Cara Menempatkan Gambar Responsif Pada Situs Anda?

Cara Menempatkan Gambar Responsif Pada Situs Anda?

Cara Menempatkan Gambar Responsif Pada Situs Anda?. Desain Web Responsif (RWD) kini telah menjadi salah satu teknik desain website dan se... 19.23.00

Cara Menempatkan Gambar Responsif Pada Situs Anda?. Desain Web Responsif (RWD) kini telah menjadi salah satu teknik desain website dan sebagai landasan untuk pengembangan mobile web modern.
Biasanya, Desain Web Responsif harus dengan fluid images, yaitu gambar yang mengubah ukuran sendiri tergantung pada ukuran layar pengguna dan resolusi. Mereka bekerja dengan baik untuk desktop dan tablet, tapi masalah terbesar dengan fluid images, User agent kemudian mengubah ukuran gambar sesuai dengan spesifikasi.

Gambar Elemen dalam HTML 5
Unsur <picture> diatur untuk menjadi standar untuk gambar responsif dalam HTML 5, dan itu akan memungkinkan kita untuk menggunakan berbagai sumber untuk gambar tunggal saat memutuskan sumber akan dilakukan tergantung pada ukuran layar. Markup tampak sebagai berikut :

<picture id="my_images">
   <source media="(min-width: 50em)" srcset="large1.jpg 1x, large2.jpg 2x">
   <source media="(min-width: 20em)" srcset="medium1.jpg 1x, medium2.jpg 2x">   
</picture>

Karena HTML 5 belum sepenuhnya selesai, unsur ini masih sedang diusulkan, dan sedang dalam tahap pengujian. Jadi belum dapat digunakan. Itu membuat penggunaan tag span, dan markup yang terlihat seperti ini;

<span data-picture data-alt="Some ALT text">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg" data-media="(min-width: 500px)"></span>
</span>

Jika Anda memiliki situs web WordPress, Ada berbagai plugin yang dapat digunakan untuk melakukan proses seperti ini.

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

Script PHP
Anda dapat menggunakan script PHP pihak ketiga kustom untuk memberikan gambar diubah ukurannya untuk pengguna tergantung pada ukuran layar pengguna dan resolusi. Dan pasti lebih baik daripada menggunakan JavaScript untuk mendeteksi user agent. Salah satu naskah tersebut adalah Adaptive Gambar. Adaptive Image adalah sebuah script PHP kecil yang mendeteksi ukuran layar pengguna dan memberikan gambar yang tepat untuk itu ukuran layar.

[source]