Gambar yang responsif

Codelab ini merupakan bagian dari kursus pelatihan Mengembangkan Progressive Web App yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan codelab secara berurutan.

Untuk detail selengkapnya tentang kursus ini, lihat Ringkasan Progressive Web Apps Progressive.

Pengantar

Lab ini menunjukkan cara membuat gambar di halaman web yang terlihat bagus di semua perangkat.

Yang akan Anda pelajari

  • Cara menjadikan gambar Anda responsif sehingga ukurannya sesuai untuk beberapa faktor bentuk
  • Cara menggunakan srcset dan sizes untuk menampilkan gambar yang tepat untuk lebar area pandang
  • Cara menggunakan picture dan source yang dikombinasikan dengan kueri media sehingga gambar di halaman otomatis merespons saat jendela diubah ukurannya

Yang perlu Anda ketahui

  • HTML dan CSS dasar

Yang akan Anda butuhkan

  • Editor teks
  • Komputer dengan akses terminal/shell

Download atau clone repositori pwa-training-labs dari github dan instal versi LTS Node.js, jika diperlukan.

Jika Anda tidak memiliki server pengembangan lokal pilihan, instal paket http-server Node.js:

npm install http-server -g

Buka direktori responsive-images-lab/app/ dan mulai server:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

Anda dapat menghentikan server kapan saja dengan Ctrl-c.

Buka browser, lalu buka localhost:8080/.

Catatan: Batalkan pendaftaran pekerja layanan dan hapus semua cache pekerja layanan untuk localhost sehingga tidak mengganggu lab. Di Chrome DevTools, Anda dapat melakukannya dengan mengklik Hapus data situs dari bagian Hapus penyimpanan di tab Aplikasi.

Jika Anda memiliki editor teks yang memungkinkan untuk membuka project, buka folder responsive-images-lab/app/. Hal ini akan memudahkan Anda tetap terorganisir. Atau, buka folder di sistem file komputer Anda. Folder app/ adalah tempat Anda akan membuat lab.

Folder ini berisi:

  • Folder images berisi contoh gambar yang masing-masing memiliki beberapa versi dengan resolusi berbeda
  • index.html adalah halaman HTML utama untuk situs/aplikasi contoh kami
  • styles/main.css adalah lembar gaya bertingkat untuk situs contoh

Sebelum membuat gambar menjadi responsif, pastikan gambar tidak meluap di layar.

Ganti TODO 2 di styles/main.css dengan kode berikut:

img {
  max-width: 100%;
}

Simpan kode, lalu muat ulang halaman di browser Anda. Coba ubah ukuran jendela. Lebar gambar harus tetap berada dalam jendela.

Penjelasan

Nilai dalam max-width mewakili persentase elemen penampung, dalam hal ini, elemen article.

Catatan: Anda juga dapat menentukan max-width dalam hal lebar area pandang menggunakan unit vw (misalnya, 100vw). Dalam hal ini, kita menggunakan nilai persentase untuk menjaga agar lebar gambar tetap sama dengan teks.

Tujuannya adalah membuat browser mengambil versi gambar dengan dimensi terkecil yang masih lebih besar dari ukuran tampilan akhir gambar. srcset memungkinkan kita mencantumkan kumpulan gambar dalam berbagai resolusi yang dapat dipilih browser saat mengambil gambar. Pilihan browser bergantung pada dimensi area pandang, ukuran gambar relatif terhadap area pandang, kepadatan piksel perangkat pengguna, dan dimensi file sumber.

Menambahkan srcset ke gambar

Untuk menyelesaikan TODO 3.1 di index.html, tambahkan atribut srcset berikut ke elemen img yang berisi gambar SFO:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

Simpan kode, lalu muat ulang halaman di browser. Buka Developer Tools browser Anda dan lihat permintaan jaringan. Coba muat ulang halaman dengan ukuran jendela yang berbeda. Anda akan melihat bahwa browser mengambil images/sfo-1600_large.jpg berapa pun ukuran jendelanya.

Penjelasan

Dalam folder images/, terdapat beberapa versi gambar SFO, masing-masing memiliki resolusi yang berbeda. Kita mencantumkannya di atribut srcset guna memberi browser opsi untuk memilih file yang akan digunakan. Namun, browser tidak memiliki cara untuk menentukan ukuran file sebelum memuatnya, sehingga selalu memilih gambar pertama dalam daftar.

Menambahkan deskripsi lebar ke srcset

Untuk memuat ukuran gambar yang tepat berdasarkan lebar area pandang, kita perlu memberi tahu browser seberapa besar setiap file sebelum mengambilnya.

Untuk menyelesaikan TODO 3.2 di index.html, tambahkan deskripsi lebar ke elemen img SFO:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

Simpan kode, lalu muat ulang halaman di browser. Muat ulang halaman pada berbagai ukuran jendela dan periksa permintaan jaringan untuk melihat versi gambar yang diambil pada setiap ukuran. Pada tampilan 1x, browser mengambil sfo-500_small.jpg saat jendela lebih sempit dari 500 piksel, sfo-800_medium.jpg saat lebih sempit dari 800 piksel, dan seterusnya.

Catatan: Jika versi gambar yang lebih besar tersedia dalam cache browser (HTTP), beberapa browser mungkin memuat gambar tersebut meskipun itu bukan gambar yang ditentukan oleh srcset (karena jika browser sudah memiliki gambar beresolusi lebih tinggi yang disimpan secara lokal, mengapa tidak menggunakannya?). Untuk menonaktifkannya di lab, pastikan cache HTTP Anda dinonaktifkan di alat developer.

Catatan: Di Chrome, dengan DevTools terbuka, dimensi jendela browser akan muncul saat ukurannya diubah (lihat gambar di bawah). Fitur ini akan sangat berguna di seluruh codelab ini.

chrome-dimension.png

Penjelasan

Dengan menambahkan deskripsi lebar ke setiap file di srcset, kita memberi tahu browser tentang lebar setiap gambar dalam piksel sebelum mengambil gambar. Kemudian, browser dapat menggunakan lebar ini untuk memutuskan gambar mana yang akan diambil berdasarkan ukuran jendelanya. Alat ini mengambil gambar dengan lebar terkecil yang masih lebih besar dari lebar area pandang.

Catatan: Anda juga dapat menentukan kepadatan piksel, bukan lebar. Namun, Anda tidak dapat menentukan kepadatan dan lebar piksel dalam atribut srcset yang sama. Kita akan mempelajarinya menggunakan kepadatan piksel di bagian selanjutnya.

Menampilkan gambar dengan lebar setengah area pandang (50vw)

Ganti TODO 4.1 di styles/main.css dengan kode berikut:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

Simpan kode, lalu muat ulang halaman di browser. Coba muat ulang halaman dalam berbagai ukuran jendela dan periksa permintaan jaringan di setiap ukuran. Browser mengambil gambar yang berukuran sama seperti sebelumnya.

Penjelasan

Karena CSS diuraikan setelah HTML pada waktu proses, browser tidak memiliki cara untuk mengetahui ukuran tampilan akhir gambar yang akan diambil saat CSS diambil. Kecuali jika kita menyatakan sebaliknya, browser menganggap gambar akan ditampilkan pada 100% dari lebar area pandang dan mengambil gambar berdasarkan hal ini. Kita memerlukan cara untuk memberi tahu browser terlebih dahulu apakah gambar akan ditampilkan dalam ukuran yang berbeda.

Menambahkan atribut ukuran ke gambar

Kita dapat memberi img atribut sizes untuk memberi tahu browser ukuran tampilan gambar sebelum diambil.

Untuk menyelesaikan TODO 4.2 di index.html, tambahkan sizes="50vw" ke elemen img sehingga terlihat seperti ini:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

Simpan kode, lalu muat ulang halaman di browser. Muat ulang halaman dalam berbagai ukuran jendela dan periksa permintaan jaringan setiap kali melakukannya. Anda akan melihat bahwa untuk perkiraan ukuran jendela yang sama dengan yang digunakan untuk menguji langkah sebelumnya, browser mengambil gambar yang lebih kecil.

Penjelasan

Nilai sizes cocok dengan nilai max-width gambar di CSS. Browser kini memiliki semua yang dibutuhkan untuk memilih versi gambar yang benar. Browser mengetahui lebar area pandangnya sendiri dan kepadatan piksel perangkat pengguna, dan kami telah memberinya dimensi sumber file (menggunakan deskripsi lebar) dan ukuran gambar yang relatif terhadap area pandang (menggunakan atribut sizes).

Untuk informasi selengkapnya

Menambahkan kueri media ke CSS

Kita dapat menggunakan kueri media untuk mengubah ukuran gambar secara real time berdasarkan lebar area pandang.

Ganti TODO 5.1 di styles/main.css dengan kode berikut:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

Simpan kode, lalu muat ulang halaman di browser. Perkecil jendela hingga kurang dari 700px (di Chrome, dimensi area pandang ditampilkan di layar jika DevTools terbuka). Gambar harus diubah ukurannya untuk mengisi 90% lebar jendela.

Penjelasan

Kueri media menguji lebar area pandang layar, dan menerapkan CSS jika area pandang kurang dari 700 piksel.

Untuk informasi selengkapnya

Menambahkan kueri media ke atribut sizes

Kita dapat memberi tahu browser tentang kueri media di atribut sizes agar browser mengambil gambar yang benar saat ukuran gambar berubah.

Untuk menyelesaikan TODO 5.2 di index.html, update atribut sizes dalam gambar SFO:

sizes="(max-width: 700px) 90vw, 50vw"

Simpan kode, lalu muat ulang halaman di browser. Ubah ukuran jendela browser sehingga lebarnya menjadi 600 px. Pada tampilan 1x, browser akan mengambil sfo-800_medium.jpg.

Kita dapat menggunakan elemen picture dan elemen source, bersama dengan kueri media, untuk mengubah sumber gambar saat jendela diubah ukurannya.

Ganti TODO 6 di index.html dengan kode berikut:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

Simpan kode, lalu muat ulang halaman di browser. Coba ubah ukuran jendela browser. Anda akan melihat perubahan gambar pada 750px dan 500px.

Penjelasan

Elemen picture memungkinkan kita menentukan beberapa file sumber menggunakan tag source. Hal ini berbeda dengan hanya menggunakan tag img dengan atribut srcset karena tag sumber memungkinkan kita menambahkan hal-hal seperti kueri media ke setiap kumpulan sumber. Daripada memberikan ukuran gambar ke browser dan membiarkannya menentukan file yang akan digunakan, kita dapat menentukan gambar untuk digunakan di setiap ukuran jendela.

Kami telah menyertakan beberapa versi gambar sampel, masing-masing dengan resolusi yang berbeda dan dipangkas untuk membuat fokus gambar terlihat pada ukuran yang lebih kecil. Pada kode di atas, dengan ukuran lebih besar dari 750 piksel, browser akan mengambil horses-1600_large_2x.jpg (jika perangkat memiliki tampilan 2x) atau horses-800_large_1x.jpg. Jika lebar jendela kurang dari 750 piksel tetapi lebih besar dari 500 piksel, browser akan mengambil horses_medium.jpg. Dengan ukuran kurang dari 500 piksel, browser akan mengambil gambar penggantian, horses_small.jpg.

Catatan: Jika browser pengguna tidak mendukung elemen picture, browser akan mengambil apa pun yang ada dalam elemen img. Elemen picture hanya digunakan untuk menentukan beberapa sumber untuk elemen img yang ada di dalamnya. Elemen img adalah yang menampilkan gambar.

Untuk informasi selengkapnya

Anda telah mempelajari cara membuat gambar di halaman web terlihat bagus di semua perangkat.

Resource

Pelajari cara mengotomatiskan proses

Pelajari srcset dan ukuran lebih lanjut

Pelajari arah seni lebih lanjut

Untuk melihat semua codelab dalam kursus pelatihan PWA, lihat Codelab selamat datang untuk kursus/