Tayangkan gambar dengan dimensi yang benar

Katie Hempenius
Katie Hempenius

Glitch ini cukup kecil sehingga gambarnya dapat diperiksa dengan tangan. Namun, untuk sebagian besar situs, penggunaan alat seperti Lighthouse untuk mengotomatiskan hal ini sangatlah penting.

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

Audit ukuran gambar yang tepat gagal di Lighthouse.

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

Memperbaiki flower_logo.png

Mulai dari bagian atas halaman dan perbaiki gambar logo.

  • Periksa flower_logo.png di panel Elements DevTools.

Panel elemen DevTools

Berikut 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 cocok. Anda dapat menggunakan ImageMagick untuk mengubah ukuran gambar agar pas. ImageMagick adalah alat CLI untuk pengeditan gambar yang sudah diinstal sebelumnya di lingkungan codelab.

  1. Klik Remix to Edit untuk membuat project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).
  3. Di konsol, ketik:
convert flower_logo.png -resize 50x50 flower_logo.png

Memperbaiki flower_photo.jpg

Selanjutnya, perbaiki foto bunga ungu.

  • Periksa flower_photo.jpg di panel elemen DevTools.

Panel elemen DevTools

Berikut adalah CSS untuk flower_photo.jpg:

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

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

Ukuran ideal untuk gambar ini akan bergantung pada perangkat yang digunakan untuk melihatnya, jadi Anda harus mengubah ukurannya ke ukuran yang berfungsi dengan baik untuk sebagian besar pengguna. Anda dapat memeriksa data analisis untuk mempelajari resolusi layar yang umum digunakan pengguna:

Google Analytics untuk resolusi layar.

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

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

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

  • Gunakan ImageMagick untuk mengubah ukuran gambar menjadi lebar 960 piksel. Di terminal, ketik:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

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

Menjalankan Ulang Lighthouse

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

Audit ukuran gambar Lighthouse yang tepat.

… Dan gagal! Mengapa demikian?

Lighthouse menjalankan pengujiannya di 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 dari gambar yang diubah ukurannya.

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

Kompromi di sini adalah antara kualitas gambar pada perangkat beresolusi tinggi dan performa. Anda mungkin melebih-lebihkan seberapa cermat pengguna akan memeriksa gambar—jadi sebaiknya Anda membuatnya lebih kecil—tetapi tentu saja ada kasus penggunaan saat kualitas gambar lebih penting.

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