Dengan banyaknya perangkat yang berbeda di pasaran saat ini, sebuah situs web perlu dioptimalkan untuk semua ukuran, mulai dari ponsel pintar kecil hingga monitor desktop besar. Anda juga bisa menggunakan gambar dan media yang responsif untuk membantu mencapai pengoptimalan ini. Dengan desain web responsif, gambar dan media lainnya beradaptasi dengan resolusi atau orientasi layar apa pun, sehingga apa pun yang Anda lihat pada halaman web, akan terlihat bagus. Pada artikel ini, kita akan membahas tentang responsivitas gambar dan media, mengapa Anda sangat membutuhkannya dan bagaimana menerapkan gambar atau media yang responsif dengan praktik terbaik.
Peran Apa yang Dimainkan oleh Gambar dan Media yang Responsif?
Meskipun situs web harus menyesuaikan diri dengan antarmuka yang diutamakan untuk perangkat seluler yang ditandai dengan ukuran layar, resolusi, dan kecepatan koneksi yang baru, penggunaan internet seluler akan terus meningkat. Media yang secara alami tetap responsif sesuai dengan perangkat, memberikan waktu muat dan kinerja yang lebih cepat serta pengalaman pengguna yang lebih baik. Jika gambar-gambar tersebut tidak responsif, maka kemungkinan besar gambar berukuran desktop akan dimuat di perangkat seluler yang mengakibatkan pemborosan bandwidth dan kecepatan muat halaman yang lambat. Hal ini dapat membuat para pencari dengan cepat meninggalkan halaman Anda, sehingga membuat pengguna frustasi.
Selain itu, desain responsif meningkatkan aksesibilitas melalui penskalaan gambar dan media yang dapat menjadi faktor untuk memastikan pengalaman yang sesuai bagi pengguna dengan kemampuan yang berbeda. Selain itu, alternatif untuk teks dan jenis media yang dapat diskalakan memastikan bahwa setiap pengguna, termasuk tunanetra atau mereka yang menggunakan teknologi bantu untuk menjelajahi web dapat terlibat dengan konten secara tepat.
Bekerja dengan Gambar Responsif
Pengembang Gambar Responsif menggunakan strategi yang berbeda untuk menangani gambar dan ukuran untuk setiap resolusi atau kondisi layar. Ada beberapa cara untuk melakukan hal ini:
Atribut srcset
Elemen HTML memiliki fitur yang sangat berguna, yaitu atribut srcset, yang memungkinkan pengembang untuk mengatur daftar sumber gambar khusus untuk resolusi dan lebar layar yang berbeda. Properti ini akan membantu browser untuk memilih gambar terbaik berdasarkan perangkat pengguna dan ukuran layar.
Contoh:
<img src="image-small.jpg"
srcset="image-medium.jpg 600w, image-large.jpg 1200w"
alt="Responsive image example">
Dalam kasus ini, browser akan mengambil gambar-medium. 2) dengan jpg untuk layar selebar 600px dan image-large. jpg untuk layar dengan lebar 1200px Jika layar tidak memenuhi salah satu dari kriteria tersebut, kita menggunakan gambar src default (image-small. jpg) yang akan dimuat.
Sumber: gamelab.id
Atribut ukuran
Atribut sizes digunakan bersama dengan srcset untuk memodifikasi ukuran gambar yang sesuai dengan layar. Jadi, browser dapat memilih ukuran gambar yang paling sesuai untuk lebar layar dan ukuran viewport tertentu.
Contoh:
<img src="image-small.jpg"
srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive image example">
Jadi, dalam kasus ini, apabila viewport, lebarnya di bawah 600px, maka gambar akan menempati 100% lebar viewport (100vw): Dibutuhkan 50vw pada layar besar. Ini menjamin bahwa gambar yang tepat dimuat, tergantung pada kapasitas perangkat dan ruang layar yang ada.
Arahan Seni dengan
Dalam beberapa kasus, Anda ingin menggunakan gambar yang berbeda untuk alasan apa pun - mungkin tidak hanya karena resolusi (misalnya lanskap). Dengan elemen ini, pengembang dapat secara harfiah mengetahui dengan tepat gambar mana yang harus digunakan oleh media tertentu.
Contoh:
<picture>
<source media="(max-width: 600px)" srcset="image-small.jpg">
<source media="(min-width: 601px)" srcset="image-large.jpg">
<img src="image-large.jpg" alt="Responsive image example">
</picture>
Dalam contoh ini, ini bergantian antara gambar-ukuran-kecil. gambar-kecil. jpg untuk perangkat yang lebih kecil;; gambar-besar. jpg untuk layar yang lebih besar. Hal ini sangat efektif terutama dalam hal pengarahan seni, yaitu pemangkasan dan/atau penyesuaian rasio aspek dari satu ukuran layar ke ukuran layar berikutnya, >
Menerapkan Media Responsif
Meskipun gambar adalah salah satu jenis media teratas yang kami fokuskan sebagai media responsif, ada jenis lain seperti video dan gambar latar belakang yang perlu mengambil pendekatan serupa untuk memberikan pengalaman pengguna yang optimal.
Sematan Video Responsif
Anda juga dapat melampirkan video yang disematkan dengan CSS agar responsif. Cara yang umum dilakukan adalah dengan meletakkannya di dalam wadah yang memiliki lebar yang diatur dalam persentase, hal ini akan memungkinkan video berubah ukuran di dalamnya berdasarkan ukuran layar.
Contoh:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-container iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
Metode ini menjaga rasio aspek tetap konstan sekaligus memungkinkan penskalaan video dengan ukuran layar.
Gambar Latar Belakang Responsif
Namun, dengan memanfaatkan kueri media CSS serta properti ukuran latar belakang, kami dapat membuat gambar yang responsif untuk situs web Anda.
Contoh:
.hero {
background-image: url('background-large.jpg');
background-size: cover;
background-position: center center;
}
@media (max-width: 768px) {
.hero {
background-image: url('background-small.jpg');
}
}
Dalam hal ini gambar latar belakang akan berubah sehingga memenuhi lebar minimum 768px (perangkat kecil hingga menengah) dari yang besar.
Gambar responsif dan praktik terbaik media
- Jadi, Optimalkan ukuran file gambar: dengan mengompres lebih banyak. Rendering yang lebih baik sehingga waktu muat dan kinerja, terutama untuk seluler, menjadi lebih cepat.
- Gunakan Format Vektor Jika Memungkinkan: SVG sangat bagus jika logo atau grafik Anda sederhana (yang sebenarnya merupakan praktik terbaik untuk logo). Format ini berbasis vektor yang dapat diskalakan dan mempertahankan kualitas pada berbagai ukuran layar.
- Gunakan Pengujian Lintas Perangkat: Uji gambar dan media responsif Anda pada perangkat yang berbeda (seluler, tablet, desktop) untuk memastikan pengalaman pengguna berjalan mulus di semua platform.
- Gunakan Lazy Loading: Terapkan pemuatan malas pada gambar dan media, sehingga jika konten tidak ada dalam viewport, Anda hanya akan memuatnya saat konten tersebut ada. Mengurangi jumlah skrip awal akan meningkatkan kecepatan dan kinerja pemuatan halaman.
Kesimpulan
Gambar dan media yang responsif - Cara membuat pengalaman web modern yang ramah pengguna Melalui srcset, ukuran dan, pengembang dapat membuat gambar tertentu ditambah elemen media lainnya akan beradaptasi dengan ukuran + resolusi layar. Berdasarkan permintaan yang merajalela untuk perangkat seluler, media responsif tidak dapat ditekankan dengan cukup, menjadikannya unsur penting dari setiap rencana desain web responsif.
Kembali ke>> Desain Web Responsif: Panduan Langkah-demi-Langkah