Sejak desain web yang mengharuskan berbasis AMP, maka untuk menampilkan gambar, photo pada halaman web, ada tambahan kode amp pada img. Kemudian ukuran responsif display yang sebelumnya cukup dengan menambahkan prosentasi pada lebar atau width, sekarang sudah tidak bisa.
Pada basis desain web tradisional, jika ingin gambar atau photo yang akan ditampilkan, dapat menyesuaikan ukuran display atau layar pc, laptop, ponsel penggunanya. Maka mengubah ukuran pixel ke ukuran prosentase, prosentasi berdasarkan perbandingan dari ukukuran maksimum lebar body halaman web.
Misalkan ukuran lebar body 1000 px, photo yang ditampilkan lebarnya 100px, maka width lebar photonya (100 x 100% ): 1000, sama dengan 10%. Jika ingin memenuhi lebar halaman, maka width gambar atau photo 100%.
Untuk desain web berbasis amp, maka img ditambahakan menjadi amp-img. Contohnya model tradisional <img src="" ></img>, untuk AMP menjadi <amp-img src=""></amp-img>
Dan untuk ukuran lebar dan tinggi gambar atau photo, pada desain web tradisionalnya, maka hal yang harus dilakukan adalah sebagai berikut. <img src="" width="250" height="150" ></img>, untuk AMP menjadi <amp-img src="" width="250" height="150" ></amp-img>. Disini tidak ada perbedaan diantara keduanya dalam memasukan angka ukuran layar gambar atau photo.
Masalah akan muncul jika memasukan width dengan prosentase pada desain web ketika dikonversi ke desain amp web, gambar atau photo tidak akan tampil pada halaman web. Hal ini disebabkan gambar berbasis amp tidak dapat ditampilkan dengan resolusi menggunakan prosentasi
Untuk amp-img, agar tampilan gambar atau photo dapat ditampilkan menyesuaikan layar device pembaca atau penggunanya, maka pada style atau css gambar, ditambahkan layout = "responsive". Dalam kode gambarnya menjadi <amp-img src="" width="250" height="150" layout="responsive"></amp-img>.
Sekarang gambar atau photo sudah bisa tampil pada halaman web dengan menyesuaikan ke semua ukuran layar device. Jadi itu sedikit perbedaannya dalam pengkodean img untuk AMP dengan img html.
Demikian cara membuat desain gambar atau photo responsif untuk semua ukuran layar device pada desain amp web.
Semoga bermanfaat.
Artikel Terkait
|
Xampp - Mengatasi Koneksi PHP SQL Gagal |
|
Membuat Form Mail Berbasis Ampmail PHP |
|
Amp - Mengubah HTML Ke AMP |
|
Membuat AMP Video Youtube |
|
PHP - Membuat Form Mail Pafa Type Checkbox |
No comments:
Post a Comment