Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Gambar adalah bagian penting dari situs web atau aplikasi apa pun. Mereka membantu membuat konten lebih menarik dan menarik secara visual.

Namun, jika gambar tidak dioptimalkan dengan benar, gambar juga dapat memperlambat situs atau aplikasi.

Mengapa Mengoptimalkan Gambar?

Ada beberapa alasan mengapa penting untuk mengoptimalkan gambar.

  • Ini dapat membantu meningkatkan waktu buka situs atau aplikasi.
  • Itu dapat mengurangi jumlah data yang perlu diunduh klien, yang dapat menghemat biaya bandwidth.
  • Ini dapat membantu meningkatkan kinerja situs atau aplikasi secara keseluruhan.

Cara Mengoptimalkan Gambar di Next.js

Ada beberapa cara untuk mengoptimalkan gambar di Next.js. Salah satunya adalah dengan menggunakan komponen Gambar. Komponen ini secara otomatis mengoptimalkan kinerja gambar.

Cara lain untuk mengoptimalkan gambar adalah dengan menggunakan kemampuan pemrosesan gambar bawaan. Next.js dapat secara otomatis mengubah ukuran, mengompres, dan mengoptimalkan gambar untuk performa.

instagram viewer

Terakhir, Anda dapat menggunakan pustaka pihak ketiga seperti gambar yang dioptimalkan reaksi. Pustaka ini menyediakan berbagai kemampuan pengoptimalan gambar.

Menggunakan Komponen Gambar

Komponen Gambar adalah cara termudah untuk mengoptimalkan gambar di Next.js. Untuk menggunakannya, cukup impor komponen dari berikutnya/gambar kemasan.

Setelah Anda mengimpor komponen, Anda dapat menggunakannya seperti komponen lainnya di React. Komponen Gambar memiliki beberapa alat peraga yang dapat Anda gunakan untuk mengontrol cara merender gambar.

impor Gambar dari 'berikutnya/gambar'

eksporbawaanfungsiGambarku() {
kembali (
<Gambar
src="/my-image.jpg"
lebar="200"
tinggi ="200"
kualitas="100"
alt="Gambar saya"
/>
)
}

Dalam contoh ini, komponen Image merender gambar dengan lebar 200px dan tinggi 200px. Anda juga dapat menggunakan CSS atau kerangka kerja seperti Tailwind untuk menata aplikasi dan gambar Anda.

Beberapa props yang dibutuhkan untuk komponen Image adalah width, height, src, dan alt. Prop src adalah URL dari gambar yang ingin Anda gunakan. Gunakan properti lebar dan tinggi untuk mengatur lebar dan tinggi gambar, dalam piksel. Alt prop adalah teks alternatif untuk gambar.

Beberapa props opsional untuk komponen Image adalah layout, loader, placeholder, dan priority. Prop tata letak menentukan tata letak gambar. Anda dapat menggunakan prop loader untuk menentukan loader gambar kustom. Prop placeholder menentukan placeholder gambar khusus. Prop prioritas menentukan prioritas gambar.

Beberapa manfaat menggunakan komponen Gambar adalah:

  • Peningkatan Kinerja: Salah satu manfaat utama penggunaan komponen Gambar adalah peningkatan kinerja. Komponen secara otomatis mengoptimalkan gambar untuk performa.
  • Mengubah Ukuran Gambar Otomatis: Manfaat lain menggunakan komponen Gambar adalah mengubah ukuran gambar secara otomatis. Komponen dapat secara otomatis mengubah ukuran gambar agar sesuai dengan properti lebar dan tinggi.
  • Kompresi Gambar Otomatis: Komponen Gambar juga dapat mengompres gambar secara otomatis untuk mengurangi ukuran file.
  • Dukungan Pemuatan Malas: Komponen Gambar juga mendukung pemuatan lambat. Ini berarti bahwa itu hanya akan memuat gambar ketika terlihat di layar.

Menggunakan Perpustakaan Pihak Ketiga

Jika Anda memerlukan kontrol lebih besar atas pengoptimalan gambar, Anda dapat menggunakan pustaka pihak ketiga seperti reaksi-dioptimalkan-gambar. Pustaka ini menyediakan berbagai kemampuan pengoptimalan gambar.

Beberapa fitur gambar yang dioptimalkan reaksi meliputi:

  • Optimalkan gambar pada klien dan server: react-optimized-image dapat mengoptimalkan gambar pada klien dan server. Ini berarti gambar dioptimalkan untuk kinerja serta ukuran file.
  • Mengubah ukuran gambar otomatis: react-optimized-image dapat secara otomatis mengubah ukuran gambar agar sesuai dengan properti lebar dan tinggi.
  • Kompresi gambar otomatis: react-optimized-image juga dapat mengompres gambar secara otomatis untuk mengurangi ukuran file.
  • Dukungan pemuatan malas: react-optimized-image juga mendukung pemuatan lambat. Ini berarti bahwa itu hanya akan memuat gambar ketika terlihat di layar.
  • Dukungan untuk berbagai format gambar: react-optimized-image mendukung berbagai format gambar, termasuk JPEG, PNG, dan WebP.

Untuk menggunakan gambar yang dioptimalkan reaksi, cukup instal perpustakaan dengan npm.

Setelah Anda menginstal perpustakaan, Anda dapat mengimpornya ke proyek Anda.

impor Img dari 'gambar-reaksi-dioptimalkan'

eksporbawaanfungsiNextImg() {
kembali (
<Img
src="/my-image.jpg"
ukuran={[400, 800]}
alt="Gambar saya"
/>
)
}

Anda juga dapat menggunakan file SVG dengan gambar yang dioptimalkan reaksi.

impor {Svg} dari 'gambar-reaksi-dioptimalkan'

eksporbawaanfungsiNextImg() {
kembali (
<Svg
src="/my-image.svg"
NamaKelas=“penuh-merah”
/>
)
}

Contoh ini menggunakan prop className untuk menentukan nama kelas untuk SVG. Anda bisa menggunakan nama kelas itu untuk menata SVG dengan CSS atau berinteraksi dengannya menggunakan JavaScript.

react-optimized-image juga memberikan beberapa manfaat lain dibandingkan kemampuan pengoptimalan gambar bawaan.

Salah satu manfaat menggunakan paket dibandingkan fitur bawaan adalah dapat menghasilkan ukuran gambar yang berbeda secara otomatis. Ini berarti Anda tidak perlu membuat versi berbeda dari gambar yang sama.

Manfaat lainnya adalah dapat secara otomatis menyajikan ukuran gambar yang sesuai untuk perangkat pengguna. Artinya perangkat dengan layar beresolusi tinggi akan mendapatkan gambar beresolusi tinggi, dan perangkat dengan layar beresolusi rendah akan mendapatkan gambar beresolusi rendah.

Terakhir, gambar yang dioptimalkan reaksi sepenuhnya proyek sumber terbuka. Ini berarti Anda dapat berkontribusi ke perpustakaan jika Anda memerlukan fitur khusus atau perbaikan bug.

Metode Mana yang Harus Anda Gunakan?

Jadi, metode mana yang harus Anda gunakan untuk mengoptimalkan gambar di Next.js?

Jika Anda memerlukan pengoptimalan gambar dasar, Anda dapat menggunakan kemampuan pemrosesan gambar bawaan. Ini adalah cara termudah untuk memulai pengoptimalan gambar.

Jika Anda memerlukan kontrol lebih besar atas pengoptimalan gambar, maka Anda dapat menggunakan pustaka pihak ketiga seperti gambar yang dioptimalkan reaksi. Pustaka ini menyediakan kemampuan pengoptimalan gambar yang lebih canggih.

Jika Anda membutuhkan kinerja terbaik mutlak, Anda dapat menggunakan kombinasi kemampuan pemrosesan gambar bawaan dan perpustakaan pihak ketiga. Ini akan memberi Anda yang terbaik dari kedua dunia. Namun, pendekatan ini tidak disarankan untuk pemula karena membutuhkan lebih banyak penyiapan.

Tingkatkan SEO Dengan Gambar yang Dioptimalkan

Dengan mengoptimalkan gambar di situs web atau aplikasi Anda, Anda dapat meningkatkan SEO Anda. Algoritme Google memperhitungkan kecepatan pemuatan situs web dan aplikasi. Jika situs web atau aplikasi Anda memuat dengan lambat, itu akan berdampak negatif pada SEO Anda.

Dengan gambar yang dioptimalkan, Anda dapat meningkatkan waktu muat situs web atau aplikasi Anda, yang dapat meningkatkan SEO Anda. Setelah itu, Anda juga dapat menambahkan protokol grafik terbuka untuk kinerja yang lebih baik.