Menayangkan gambar yang responsif

Katie Hempenius

Menayangkan 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 menayangkan berbagai ukuran gambar ke berbagai perangkat.

Gambar responsif dan Core Web Vitals

Saat menayangkan gambar responsif, halaman Anda akan mengevaluasi kemampuan tampilan perangkat pengguna dan memilih salah satu kumpulan kandidat gambar yang optimal untuk ditampilkan berdasarkan kriteria tersebut. Hal ini menghemat data untuk pengguna Anda, terutama dengan menayangkan gambar yang lebih kecil ke perangkat dengan layar yang lebih kecil.

Efek pemuatan gambar yang lebih cepat juga dapat memengaruhi Largest Contentful Paint (LCP) halaman Anda. Misalnya, jika elemen LCP halaman Anda adalah gambar, menayangkannya secara responsif dapat mengurangi durasi pemuatan resource.

Durasi 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, terutama karena memuat konten yang paling penting (elemen LCP) lebih cepat. Menayangkan gambar responsif juga dapat mengurangi pertentangan bandwidth untuk resource lain di halaman, yang dapat meningkatkan kecepatan pemuatan halaman Anda secara umum.

Mengubah ukuran gambar

Dua alat pengubahan ukuran gambar yang paling populer adalah paket npm sharp dan alat CLI ImageMagick.

Paket sharp adalah pilihan yang baik untuk mengotomatiskan pengubahan ukuran gambar (misalnya, membuat beberapa ukuran thumbnail untuk semua video di situs Anda). Alat ini cepat dan terintegrasi dengan baik dengan alat dan skrip build. ImageMagick lebih mudah digunakan 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 dalam project, 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 selebar 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 gambar yang sebaiknya Anda buat?

Tidak ada satu jawaban yang "benar" untuk pertanyaan ini. Namun, hal yang umum adalah menayangkan 3-5 ukuran gambar yang berbeda. Menyajikan lebih banyak ukuran gambar akan meningkatkan performa, tetapi menghabiskan lebih banyak ruang di server Anda 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 menyediakan manipulasi gambar sesuai permintaan. Untuk menyiapkan Thumbor, instal di server Anda. Cloudinary akan menangani detailnya untuk Anda dan tidak memerlukan penyiapan server.

Menayangkan beberapa versi gambar

Saat Anda menentukan beberapa versi gambar, browser akan memilih versi terbaik untuk digunakan:

Atribut src, srcset, dan sizes tag <img> semuanya 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 dan deskripsi lebar atau kepadatannya.

Contoh ini menggunakan deskripsi lebar, yang memberi tahu browser seberapa lebar gambar sehingga tidak perlu mendownload gambar untuk mengetahuinya. 480w adalah deskripsi lebar yang memberi tahu browser bahwa flower-small.jpg memiliki lebar 480 px. 1080w adalah deskripsi lebar yang memberi tahu browser bahwa flower-large.jpg memiliki lebar 1080 piksel.

Kredit Tambahan: Anda tidak perlu mengetahui deskripsi kepadatan untuk menayangkan berbagai ukuran gambar. Namun, jika Anda ingin tahu cara kerja deskripsi kepadatan, lihat Lab kode Peralihan Resolusi. Deskripsi kepadatan digunakan untuk menayangkan gambar yang berbeda berdasarkan kepadatan piksel perangkat.

Atribut "sizes"

Atribut ukuran memberi tahu browser lebar gambar saat ditampilkan, meskipun tidak memengaruhi ukuran tampilan gambar, sehingga Anda masih memerlukan CSS untuk itu.

Browser menggunakan informasi ini, beserta informasi yang diketahui tentang perangkat pengguna (termasuk dimensi dan kepadatan pikselnya), untuk menentukan gambar mana yang akan dimuat.

Jika browser tidak mengenali atribut "sizes", browser akan kembali memuat gambar yang ditentukan oleh atribut "src". (sizes dan srcset diperkenalkan secara bersamaan, sehingga setiap browser mendukung kedua atribut atau tidak sama sekali.)

Kredit Tambahan: Jika ingin tampil beda, Anda juga dapat menggunakan atribut ukuran untuk menentukan beberapa ukuran slot. Hal ini mengakomodasi situs yang menggunakan tata letak yang berbeda untuk berbagai ukuran area pandang. Lihat contoh kode beberapa slot ini untuk mempelajari cara melakukannya.

(Lebih banyak lagi) Kredit ekstra

Selain semua kredit tambahan yang telah tercantum (gambar itu kompleks), Anda juga dapat menggunakan konsep yang sama ini untuk arahan seni. Art direction adalah praktik untuk menampilkan gambar yang terlihat sama sekali berbeda (bukan versi yang berbeda dari gambar yang sama) ke berbagai area pandang. Anda dapat mempelajari lebih lanjut di code lab Art Direction.

Verifikasi

Setelah menerapkan gambar responsif, Anda dapat menggunakan Lighthouse untuk memastikan Anda tidak melewatkan gambar apa pun. Jalankan Lighthouse Performance Audit (Lighthouse > Options > Performance), lalu cari hasil audit Gambar yang berukuran benar. Hasil ini mencantumkan gambar yang masih perlu Anda ubah ukurannya.