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 sudah 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.

Perbaiki 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 sesuai. ImageMagick adalah alat CLI untuk pengeditan gambar yang sudah diinstal sebelumnya di lingkungan codelab.

  1. Klik Remix to Edit agar 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 tempat gambar tersebut dilihat, jadi Anda harus mengubah ukurannya ke ukuran yang sesuai untuk sebagian besar pengguna Anda. Anda dapat memeriksa data analisis untuk mempelajari resolusi layar yang umum di antara 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 dengan lebar lebih dari 1920 piksel, gambar akan direntangkan hingga 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 Kembali Lighthouse

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

Audit Lighthouse untuk ukuran gambar 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.

Haruskah Anda 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 adalah Anda dapat mengabaikan kompromi ini sepenuhnya dengan menggunakan gambar responsif untuk menyajikan beberapa ukuran gambar. Anda dapat mempelajari hal ini lebih lanjut di panduan Gambar Responsif.