Penayangan gambar berukuran desktop ke perangkat seluler dapat menggunakan data 2–4x lebih banyak daripada diperlukan. Ikuti pedoman di halaman ini untuk meningkatkan pengalaman pengguna dengan menyajikan ukuran gambar yang berbeda ke perangkat yang berbeda.
Gambar responsif dan Core Web Vitals
Saat Anda menayangkan gambar responsif, halaman akan mengevaluasi kemampuan tampilan perangkat pengguna dan memilih salah satu dari serangkaian kandidat gambar yang optimal untuk ditampilkan berdasarkan kriteria tersebut. Ini menyimpan data untuk pengguna Anda, terutama dengan menyajikan gambar yang lebih kecil ke perangkat dengan layar yang lebih kecil.
Efek dari pemuatan gambar yang lebih cepat juga dapat diperluas ke Largest Contentful Paint (LCP). Misalnya, jika halaman Elemen LCP adalah gambar, yang menyajikan secara responsif dapat mengurangi durasi pemuatan resource.
Durasi pemuatan resource yang lebih rendah akan menurunkan waktu pemuatan gambar LCP, sehingga skor LCP halaman Anda. LCP yang lebih rendah berarti pengguna akan melihat situs Anda dimuat lebih cepat, dan terutama karena memuat konten yang paling penting (elemen LCP) lebih cepat. Menayangkan gambar yang responsif juga dapat mengurangi pertentangan bandwidth sumber daya pada halaman, yang dapat meningkatkan kecepatan pemuatan halaman secara umum.
Ubah ukuran gambar
Dua alat pengubah ukuran gambar yang paling populer adalah paket npm tajam dan alat ImageMagick CLI.
Paket tajam adalah pilihan yang baik untuk mengotomatiskan perubahan ukuran gambar (misalnya, membuat beberapa ukuran thumbnail untuk semua video di situs Anda). Ini cepat dan terintegrasi dengan baik dengan skrip dan alat build. ImageMagick lebih mudah untuk mengubah ukuran gambar satu kali karena sepenuhnya berjalan dari perintah garis.
tajam
Untuk menggunakan Sharp sebagai skrip Node, simpan kode ini sebagai skrip terpisah di lalu jalankan untuk mengonversi gambar Anda:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Untuk mengubah ukuran gambar menjadi 33% dari ukuran aslinya, jalankan perintah berikut di terminal Anda:
convert -resize 33% flower.jpg flower-small.jpg
Untuk mengubah ukuran gambar agar pas dengan ruang dengan lebar 300px kali tinggi 200px, jalankan perintah berikut:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Berapa banyak versi gambar yang sebaiknya Anda buat?
Tidak ada satu pun yang "benar" untuk menjawab pertanyaan ini. Namun, umumnya menyediakan 3-5 ukuran gambar yang berbeda. Menyajikan lebih banyak ukuran gambar lebih baik untuk performa tinggi, tetapi membutuhkan lebih banyak ruang pada server dan mengharuskan Anda menulis sedikit lebih banyak HTML.
Opsi lain
Layanan gambar seperti Thumbor (open source) dan Cloudinary juga patut dicoba. Keduanya adalah cara mudah untuk membuat gambar responsif yang juga memberikan manipulasi sesuai permintaan. Untuk menyiapkan Thumbor, instal di server Anda. Cloudinary mengurus detailnya untuk Anda dan tidak memerlukan pengaturan server.
Menyajikan beberapa versi gambar
Saat Anda menetapkan beberapa versi gambar, browser akan memilih yang terbaik untuk gunakan:
| Sebelum | Setelah |
|---|---|
| <img src="flower-large.jpg"> | <img src="bunga-besar.jpg" srcset="flower-small.jpg 480w, bunga-besar.jpg 1080w" sizes="50vw"> |
Tag <img>
src,
srcset,
dan sizes
berinteraksi untuk
mencapai hasil akhir ini.
"src" atribut
Atribut src membuat kode ini berfungsi untuk browser yang tidak
mendukung srcset dan sizes
. Browser tersebut akan kembali memuat resource yang ditentukan dalam
Atribut src.
"srcset" atribut
Atribut srcset adalah daftar nama file gambar dan nama file gambar yang dipisahkan koma
deskriptor lebar atau kepadatan.
Contoh ini menggunakan
deskripsi lebar,
yang memberi tahu browser seberapa lebar gambar sehingga tidak perlu mengunduh
gambar untuk mengetahuinya. 480w adalah deskripsi lebar yang memberi tahu browser bahwa
flower-small.jpg memiliki lebar 480 piksel. 1080w adalah deskripsi lebar yang memberi tahu
browser yang lebar flower-large.jpg-nya 1080 px.
Kredit Tambahan: Anda tidak perlu mengetahui tentang deskriptor kepadatan untuk menyajikan ukuran gambar yang berbeda. Akan tetapi, jika Anda ingin tahu tentang cara kerja deskriptor kepadatan, lihat Code Lab Peralihan Resolusi. Deskripsi kepadatan digunakan untuk menyajikan gambar yang berbeda berdasarkan kepadatan piksel.
"Ukuran" atribut
Atribut ukuran memberi tahu browser seberapa lebar gambar saat ditampilkan, meskipun tidak mempengaruhi ukuran tampilan gambar, jadi Anda tetap perlu CSS untuk melakukannya.
Browser menggunakan informasi ini, beserta apa yang diketahuinya tentang perangkat (termasuk dimensi dan kepadatan piksel), untuk menentukan gambar mana yang akan memuat halaman.
Jika browser tidak mengenali "sizes" , metode ini akan kembali ke
memuat gambar yang ditentukan oleh "src" . (sizes dan srcset
diperkenalkan pada saat yang sama, sehingga setiap {i>browser<i} mendukung
atribut atau tidak keduanya.)
Kredit Tambahan: Jika ingin yang menarik, Anda juga dapat menggunakan atribut ukuran untuk menentukan dengan berbagai ukuran slot. Hal ini mengakomodasi {i>website<i} yang menggunakan tata letak berbeda untuk dan ukuran area pandang yang berbeda. Lihat beberapa contoh kode slot ini untuk mempelajari bagaimana melakukan ini.
(Lebih banyak lagi) Kredit ekstra
Selain semua kredit tambahan yang sudah tercantum (gambar rumit!), Anda juga dapat menggunakan konsep yang sama untuk arah seni. Pengaturan seni adalah praktik menyajikan gambar dengan tampilan yang benar-benar berbeda (bukan versi berbeda dari gambar yang sama) ke area pandang yang berbeda. Anda dapat mempelajari lebih lanjut di code lab Art Direction.
Verifikasi
Setelah menerapkan gambar yang responsif, Anda dapat menggunakan Lighthouse untuk memastikan Anda tidak melewatkan gambar apa pun. Menjalankan Audit Performa Lighthouse (Lighthouse > Options > Performance) dan cari hasil Audit Menyesuaikan ukuran gambar dengan benar. Hasil ini mencantumkan gambar yang masih perlu Anda ubah ukuran.