Tayangkan gambar dengan dimensi yang benar

Katie Hempenius

Jalankan Lighthouse

Glitch ini cukup kecil sehingga gambarnya dapat diperiksa secara manual. Namun, bagi sebagian besar situs, menggunakan alat seperti Lighthouse untuk mengotomatiskan langkah ini penting.

1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Lighthouse.
4. Pastikan kotak Performa dicentang pada daftar Kategori.
5. Klik tombol Buat laporan.
6. Cari hasil audit Ukuran Gambar dengan Benar.

Audit Lighthouse menunjukkan bahwa kedua gambar halaman ini perlu diubah ukurannya.

Perbaiki flower_logo.png

Mulailah di bagian atas halaman dan perbaiki gambar logo.

• Periksa flower_logo.png di panel DevTools Elements.

Ini adalah CSS untuk flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

Lebar CSS gambar ini adalah 50 piksel, sehingga flower_logo.png harus diubah ukurannya agar sesuai. Anda dapat menggunakan ImageMagick untuk mengubah ukuran gambar agar sesuai. ImageMagick adalah alat CLI untuk pengeditan gambar yang sudah terinstal di lingkungan codelab.

1. Klik Remix untuk Mengedit agar project dapat diedit.
2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin harus menggunakan opsi Layar Penuh).
3. Di konsol, ketik:

convert flower_logo.png -resize 50x50 flower_logo.png

Perbaiki flower_photo.jpg

Selanjutnya, perbaiki foto bunga ungu.

• Periksa flower_photo.jpg di panel elemen DevTools.

Ini adalah CSS untuk flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw menetapkan lebar CSS flower_photo.jpg menjadi "setengah lebar browser". (1vw sama dengan 1% lebar browser).

Ukuran ideal untuk gambar ini bergantung pada perangkat yang digunakan untuk melihat gambar, jadi Anda harus mengubah ukurannya ke ukuran yang sesuai untuk sebagian besar pengguna. Anda dapat memeriksa data analisis untuk mempelajari resolusi layar mana yang umum di antara pengguna:

Data ini menunjukkan bahwa lebih dari 95%pengunjung situs ini menggunakan resolusi layar selebar 1920 piksel atau kurang.

Dengan menggunakan informasi ini, kita dapat menghitung lebar gambar yang seharusnya: (lebar 1920 piksel) * (50% dari lebar browser) = 960 piksel

Pada resolusi yang lebih besar dari 1920 piksel, gambar akan direntangkan agar memenuhi area. Gambar yang diubah ukurannya masih cukup besar, sehingga efeknya seharusnya tidak terlalu terlihat.

• Gunakan ImageMagick untuk mengubah ukuran gambar menjadi selebar 960 piksel. Pada jenis terminal:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Jalankan Kembali Mercusuar

• Jalankan kembali audit Performa Lighthouse untuk memverifikasi bahwa Anda telah berhasil mengubah ukuran gambar.

... Dan gagal! Why is that?

Lighthouse menjalankan pengujiannya pada Nexus 5x. Nexus 5x memiliki layar 1080 x 1920. Untuk Nexus 5x, ukuran optimal flower_photo.jpg adalah lebar 540 piksel (1080 piksel * . 5). Ini jauh lebih kecil daripada gambar yang diubah ukurannya.

Apakah Anda perlu mengubah ukuran gambar agar menjadi lebih kecil? Mungkin. Namun, jawabannya tidak selalu jelas.

Kompromi di sini adalah antara kualitas gambar pada perangkat beresolusi tinggi dan performa. Sangat mudah untuk melebih-lebihkan seberapa dekat pengguna akan memeriksa gambar—jadi Anda mungkin harus memperkecil gambar—tetapi pasti ada kasus penggunaan yang mengutamakan kualitas gambar.

Kabar baiknya, Anda dapat mengabaikan kompromi ini sama sekali dengan menggunakan gambar responsif untuk menyajikan beberapa ukuran gambar. Anda dapat mempelajari hal ini lebih lanjut di panduan Gambar Responsif.