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
dansizes
untuk menampilkan gambar yang tepat untuk lebar area pandang - Cara menggunakan
picture
dansource
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 kamistyles/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.
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
- Gambar responsif Penampung (NPM) - memerlukan libvips di Mac
- Gambar responsif disimpan di GitHub (GitHub) - memerlukan grafis yang bagus di semua platform
- Generator Breakpoints Gambar Responsif v2.0
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/