Menjalankan Lighthouse
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.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
- Cari hasil audit Ukuran Gambar yang Sesuai.
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.
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.
- Klik Remix to Edit untuk membuat project dapat diedit.
- Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).
- 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.
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:
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.
… 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.