Tip Singkat: Bagaimana Menggunakan "picture" HTML5 Untuk Gambar Responsif

Gambar merupakan salah satu aspek paling menantang dalam desain web responsif. Hari ini kita akan melihat bagaimana elemen <picture>, sebuah solusi untuk masalah gambar responsif, dapat digunakan sekarang.

Pertama-tama, Masalahnya

Hari-hari dimana desain website dengan lebar yang tetap dan pixel yang sempurna telah benar-benar di belakang kita. Di masa monitor layar lebar, internet TV, tablet dan smartphone berbagai ukuran saat ini desain kita sekarang harus mengimbangi semuanya dari lebar 320px hingga setinggi 7680px.

Bersama dengan landscape multi resolusi ini hadir kebutuhan bagi gambar untuk melebar atau menciut untuk mencocokkan dengan persyaratan yang luas ini. Ini dapat membuktikan untuk menjadi sesuatu yang diberikan oleh masalah, dengan pengecualian grafis vector, sebagian besar gambar memiliki lebar berbasis pixel spesifik yang tidak berubah.

Jadi apa yang kita lakukan?

Solusi Paling Umum Terkini

Sebagai aturan umum, kamu akan menemukan berikut ini hanya tentang CSS situs responsif:

img {
    max-width: 100%;
    height: auto;
}

Code ini menggunakan pengaturan max-width: 100%; untuk memastikan gambar-gambar tidak pernah melebihi luas container induknya. Jika container induk menyusut di bawah lebar gambar, gambar itu akan ikut mengecil bersamanya. Pengaturan height: auto; memastikan rasio aspek gambar dipertahankan saat ini terjadi.

Itu menyelesaikan masalah dalam satu hal, memudahkan kita untuk menampilkan gambar yang sama pada banyak keadaan yang berbeda. Namun itu tidak mengijinkan kita untuk menentukan gambar yang berbeda untuk keadaan yang berbeda.

Solusi Baru: <picture>

<picture> adalah elemen baru yang ditentukan untuk menjadi bagian HTML5.

Itu akan membawa proses penempatan gambar responsif pada kecepatan dengan cara elemen <audio> dan <video> berkerja. Itu akan mengijinkanmu untuk menempatkan berbagai tag source, masing-masing menentukan nama file gambar yang berbeda bersamaan dengan kondisi dimana mereka harus dimuat.

Itu akan mengijinkanmu untuk memuat gambar yang benar-benar berbeda tergantung pada:

• Hasil media query misalnya: viewport height, width, orientation
• Ketebalan pixel

Ini artinya kamu dapat:

• Memuat file yang disesuaikan ukurannya dengan benar, memanfaatkan bandwith yang tersedia.
• Memuat gambar crop dengan rasio aspek yang berbeda untuk mencocokkan dengan perubahan layout pada lebar yang berbeda.
• Memuat gambar dengan resolusi yang lebih tinggi untuk layar dengan ketebalan pixel yang lebih tinggi.

Bagaimana Cara Kerja <picture>?

Langkah-langkah dasar berkerja dengan <picture> adalah:

1. Buat pembukaan dan penutupan tag <picture></picture>.
2. Dalam tag ini, buat sebuah elemen <source> untuk tiap query yang ingin kamu jalankan.
3. Tambahkan sebuah atribut <media> berisi query pada hal-hal seperti viewport height, width, orientation dll.
4. Tambahkan sebuah atribut srcset dengan nama file gambar yang sesuai untuk dimuat.
5. Tambahkan sebuah nama file ekstra ke atribut srcset jika kamu ingin menyediakan untuk ketebalan pixel yang berbeda, misalnya Retina display.
6. Tambahkan sebuah elemen <img> kembali.

Berikut merupakan contoh dasar yang memeriksa jika viewport lebih kecil dari 768px, kemudian jika iya akan memuat gambar yang lebih kecil:

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

Kamu akan menyadari sintaks yang digunakan dalam atribut media adalah sama seperti yang mungkin kamu gunakan dari membuat media query CSS. Kamu dapat menggunakan pemeriksaan yang sama, yang berarti kamu dapat menambahkan query max-width, min-width, max-height, min-height, orientation dan sebagainya.

Kamu dapat menggunakan pemeriksaan ini untuk melakukan hal-hal seperti memuat versi landscape atau portrait sebuah gambar tergantung pada orientasi perangkat, dan kamu tetap dapat memadukan dalam query ukuran pada waktu yang sama. Misalnya:

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

Code di atas memuat versi landscape gambar yang lebih kecil pada sebuah perangkat yang lebih kecil dengan orientasi landscape. Itu memuat versi yang lebih besar gambar yang sama pada perangkat dengan orientasi landscape yang lebih besar.

Jika perangkat menggunakan orientasi portrait itu membuat versi crop portrait, pada ukuran kecil untuk perangkat kecil atau pada ukuran besar untuk perangkat besar.

Jika kamu ingin menyediakan versi resolusi berbeda dari gambarmu untuk layar dengan ketebalan lebih tinggi, kamu melakukannya dengan menambahkan nama file ekstra pada atribut srcset. Misalnya, mari kita lihat snippet code pertama di atas dengan penambahan penanganan untuk 2x resolusi pada Retina:

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

Media query masih dievaluasi awalnya sehingga kamu dapat mengendalikan dimensi gambarmu yang akan tampil pada layar. Kemudian ketebalan pixel layar akan diperiksa dan jika ketebalan yang lebih tinggi didukung dan diizinkan oleh preferensi user, versi gambar itu akan dimuat.

Penggunaan <picture> Saat Ini

Sekarang ini penerapan asli <picture> berkerja untuk Chrome, Firefox dan Opera. Di masa mendatang tampaknya kita akan melihat dukungan yang meluas dimana browser lainnya akan ikut mendukung. Namun itu saat ini dukungan itu masih belum muncul.

Sementara itu, kamu tidak harus menunggu jika kamu ingin mulai menggunakan <picture> sekarang ini. Kamu cukup harus menggunakan Picturefill 2.0; sebuah polyfill yang disediakan oleh rekan-rekan yang pintar tersebut di Filament Group.

Setelah mendownload file picturefill.js ke projectmu itu dapat diterapkan hanya dengan memuatnya ke section head pada situsmu:

<script src="picturefill.js"></script>

Ada juga sebuah pilihan untuk memuat script secara asinkron untuk menambahkan efisiensi, yang dapat kamu baca di dokumentasi Picturefill.

Ketika script ini dimuat, elemen <picture> akan berkerja sebagaimana yang saya jelaskan, dengan hanya beberapa batasan.

Batasan Picturefil

IE9

Picturefill berkerja baik dengan versi IE lainnya, bagaimana pun juga IE9 tidak mengenali elemen source yang dibungkus pada tag picture. Untuk menangani ini, bungkus elemen source dalam tag video yang akan membuatnya tampak bgi IE9, sebagai contoh:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="default.jpg" alt="My default image">
</picture>

Android 2.3

Seperti IE9, Android 2.3 tidak dapat melihat elemen source di dalam sebuah elemen picture. Bagaimana pun juga, itu dapat mengerti atribut srcset kemudian digunakan pada tag img reguler. Pastikan untuk selalu mencantumkan elemen img kembali dengan nama file default dalam atribut srcset untuk Android 2.3 dan browser lainnya yang mungkin memiliki isu yang sama.

Membutuhkan JavaScript dan Dukungan Media Query Asal

Dengan ini menjadi solusi berbasis JavaScript, itu dengan demikian memerlukan JavaScript untuk diaktifkan dalam browser. Picturefill 2.0 tidak menyediakan solusi "no-js" karena jika itu dilakukan, berbagai gambar akan muncul ketika browser asli yang mendukung <picture> digunakan. Bagaimana pun juga, kamu memiliki pilihan untuk menggunakan Picturefill 1.2 jika sebuah pilihan "no-js" harus kamu miliki.

Persyaratan lainnya yang diminta Picturefill adalah dukungan media query asal, untuk mengaktifkan query dalam atribut media untuk berkerja. Semua browser modern mendukung media query, dengan hanya IE8 dan versi di bawahnya yang merupakan browser tidak mendukung itu dengan tersisa basis pengguna yang sedikit.

Kemungkinan Persyaratan Extra HTTP

Dalam browser yang memiliki dukungan asal untuk srcset, namun belum untuk picture, mungkin bagi nama file yang ditentukan dalam elemen img balik diminta sebelum penyesuaian gambar yang lebih baik dari elemen source ditentukan.

Ini hanyalah isu sementara dan akan menghilang setelah penerapan picture asal digulirkan.

Informasi Lebih Lanjut

• Baca lebih lanjut tentang Picturefill 2.0 dan download itu untuk projectmu di halaman Picturefill
• Dapatkan informasi lengkap tentang elemen <picture> dari responsiveimages.org.

Cobalah <picture> dalam projectmu hari ini dan lihat apa yang kamu pikirkan!