Penayangan gambar berukuran desktop ke perangkat seluler dapat menggunakan data 2–4x lebih banyak daripada yang diperlukan. Ikuti panduan di halaman ini untuk meningkatkan pengalaman pengguna dengan menampilkan berbagai ukuran gambar ke berbagai perangkat.
Gambar responsif dan Core Web Vitals
Saat menampilkan gambar responsif, halaman Anda akan mengevaluasi kemampuan tampilan perangkat pengguna dan memilih salah satu dari serangkaian kandidat gambar yang optimal untuk ditampilkan berdasarkan kriteria tersebut. Tindakan ini akan menghemat data untuk pengguna Anda, terutama dengan menampilkan gambar yang lebih kecil ke perangkat dengan layar yang lebih kecil.
Efek pemuatan gambar yang lebih cepat juga dapat meluas ke Largest Contentful Paint (LCP) halaman Anda. Misalnya, jika elemen LCP halaman Anda adalah gambar, penayangannya secara responsif dapat mengurangi waktu pemuatan resource.
Waktu pemuatan resource yang lebih rendah akan menurunkan waktu pemuatan gambar LCP, sehingga meningkatkan 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. Menampilkan gambar responsif juga dapat mengurangi pertentangan bandwidth untuk resource lain di halaman, sehingga dapat meningkatkan kecepatan pemuatan halaman Anda secara umum.
Mengubah ukuran gambar
Dua alat pengubah ukuran gambar yang paling populer adalah paket npm tajam dan alat CLI ImageMagick.
Paket yang tajam adalah pilihan yang tepat untuk mengubah ukuran gambar secara otomatis (misalnya, membuat beberapa ukuran thumbnail untuk semua video di situs Anda). Cepat dan terintegrasi dengan baik dengan skrip dan alat build. ImageMagick lebih mudah untuk mengubah ukuran gambar satu kali karena berjalan sepenuhnya dari command line.
tajam
Untuk menggunakan Sharp sebagai skrip Node, simpan kode ini sebagai skrip terpisah di project Anda, lalu jalankan untuk mengonversi gambar:
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 sesuai dengan ruang dengan lebar 300 piksel dan tinggi 200 piksel, 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 image yang harus Anda buat?
Tidak ada satu jawaban yang "benar" untuk pertanyaan ini. Namun, biasanya menampilkan 3-5 ukuran gambar yang berbeda. Menampilkan lebih banyak ukuran gambar akan meningkatkan performa, tetapi menghabiskan lebih banyak ruang di server dan mengharuskan Anda menulis sedikit lebih banyak HTML.
Opsi lain
Layanan image seperti Thumbor (open source) dan Cloudinary juga patut dicoba. Keduanya adalah cara mudah untuk membuat gambar responsif yang juga menyediakan manipulasi gambar sesuai permintaan. Untuk menyiapkan Thumbor, instal di server Anda. Cloudinary menangani detail untuk Anda dan tidak memerlukan penyiapan server.
Menayangkan beberapa versi gambar
Saat Anda menentukan beberapa versi gambar, browser akan memilih gambar terbaik untuk digunakan:
| Sebelum | Setelah |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" ukuran="50vw"> |
Atribut <img>
src,
srcset,
dan sizes
berinteraksi untuk mencapai hasil akhir ini.
Atribut "src"
Atribut src membuat kode ini berfungsi untuk browser yang tidak
mendukung atribut srcset dan
sizes. Browser tersebut akan kembali memuat resource yang ditentukan dalam
atribut src.
Atribut "srcset"
Atribut srcset adalah daftar nama file gambar yang dipisahkan koma serta deskripsi
lebar atau kepadatannya.
Contoh ini menggunakan
deskripsi lebar,
yang memberi tahu browser seberapa lebar gambar sehingga browser tidak perlu mendownload
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 bahwa flower-large.jpg memiliki lebar 1.080 piksel.
Kredit Tambahan: Anda tidak perlu mengetahui deskripsi kepadatan untuk menyajikan ukuran gambar yang berbeda. Namun, jika Anda ingin mengetahui cara kerja deskripsi kepadatan, lihat code lab Peralihan Resolusi. Deskripsi kepadatan digunakan untuk menyajikan gambar yang berbeda berdasarkan kepadatan piksel perangkat.
Atribut "sizes"
Atribut ukuran memberi tahu browser seberapa lebar gambar saat ditampilkan, meskipun tidak memengaruhi ukuran tampilan gambar, jadi Anda masih memerlukan CSS untuk itu.
Browser menggunakan informasi ini, beserta hal yang diketahuinya tentang perangkat pengguna (termasuk dimensi dan kepadatan pikselnya), untuk menentukan gambar yang akan dimuat.
Jika browser tidak mengenali atribut "sizes", browser akan kembali untuk
memuat gambar yang ditentukan oleh atribut "src". (sizes dan srcset
diperkenalkan secara bersamaan, sehingga setiap browser mendukung
kedua atribut atau tidak mendukung keduanya.)
Kredit Tambahan: Jika ingin terlihat elegan, Anda juga dapat menggunakan atribut ukuran untuk menentukan beberapa ukuran slot. Hal ini mengakomodasi situs yang menggunakan tata letak berbeda untuk ukuran area pandang yang berbeda. Lihat contoh beberapa kode slot ini untuk mempelajari cara melakukannya.
(Lebih banyak lagi) Kredit ekstra
Selain semua kredit tambahan yang sudah tercantum (gambar itu rumit), Anda juga dapat menggunakan konsep yang sama ini untuk arah seni. Tujuan seni adalah praktik menampilkan gambar yang benar-benar berbeda (bukan versi berbeda dari gambar yang sama) ke area pandang yang berbeda. Anda dapat mempelajari lebih lanjut di codelab Arah Seni.
Verifikasi
Setelah menerapkan gambar responsif, Anda dapat menggunakan Lighthouse untuk memastikan tidak ada gambar apa pun yang terlewat. Jalankan Audit Performa Lighthouse (Lighthouse > Options > Performance) dan cari hasil audit Gambar yang ukurannya sesuai. Hasil ini mencantumkan gambar yang masih perlu Anda ubah ukurannya.