Tutorial Mengoptimalkan Gambar dengan Next.js

Sebagai developer kita perlu memperhatikan Gambar dengan baik karena dapat mempengaruhi dalam peringkat Search Engine Optimization (SEO) bila digunakan dengan benar.

Next.js menawarkan fitur pengoptimalan gambar yang dapat membantu kita dalam mengoptimalkan loading dan rendering gambar di aplikasi website kita. Dengan begitu akan melakukan otomatis pengoptimalan gambar untuk kinerja yang menerapkan berbagai teknik seperti lazy loading, responsive loading, dan optimization formats.

Kita juga harus mempertimbangkan hal-hal berikut ini untuk menggunakan Gambar pada website kita:

  • Pemilihan Format Gambar

Pemilihan format gambar sangatlah penting, adapun 3 format gambar yang paling populer adalah PNG, JPEG, dan WebP. Dari ketiga format tersebut yang sangat direkomendasi adalah format WebP karena mempunyai banyak kelebihan dan manfaat kinerjanya.

WebP merupakan format gambar yang dikembangkan oleh Google. WebP memiliki kompresi gambar lossy dan lossless superior untuk gambar web tanpa mengorbankan kualitas.

  • Ukuran Gambar

Ketika kita hendak menyajikan gambar ke dalam website make kita perlu juga memperhatikan ukuran gambar tersebut. Sebagai contoh kita mempunyai ukuran gambar yang sangt besar misal 1080×1000 yang akan kita tampilkan ke perangkat pengguna dengan ukuran perangkat 100×100. Hal tersebut akan menyebabkan pengguna akan mendownload bandwidth yang tidak perlu.

Sehingga akan memperlambat proses loading halaman. Maka dari itu kita perlu menyesuaikan ukuran file gambar sesuai ukuran perangkat yang digunakan.

  • Kompres Gambar

Ukuran file gambar juga dapat mempengaruhi kinerja website. Apabila kita mempunyai ukuran file gambar yang besar. Alangkah baiknya kita melakukan kompres gambar terlebih dahulu setidaknya dibawah 1 Mb. Kita juga harus memperhatikan kualitas gambar saat kita melakukan kompres gambar, supaya kualitas gambar tetap terjaga.

Memulai Menggunakan Komponen <Image/> di Next.js

Untuk menggunakan komponen <Image/> di next.js kalian bisa melakukan import terlebih dahulu dari next/image seperti berikut ini.

import Image from 'next/image'

Setelah itu kalian menggunakan kompoenen <Image/> seperti berikut ini.

import Image from 'next/image'
import picture from '../public/hero.webp'

const Page = () => {
    return (
        <>
            <Image
                src={picture}
                alt='Image description'
                width={600}
                height={300}
            />
        </>
    )
}

export default Page;

Dalam contoh diatas, kita memberikan atribut src dengan path file gambar kita, alt untuk deskripsi gambar, kemudian width dan height untuk menentukan dimensi gambar yang diinginkan. Next.js akan secara otomatis mengoptimalkan gambar dan menghasilkan berbagai ukuran untuk resolusi perangkat yang berbeda.

Properti yang Terdapat pada Komponen <Image/>

Komponen <Image/> akan meneirma sejumlah properti (props) yang dapat meningkatkan kinerjanya. Pada dasarnya terdapat 3 macam properti yang dapat diteruskan ke komponen yaitu required, optional, dan advanced.

  • Properti Required pada Komponen <Image/>

Adapun properti yang harus digunakan pada komponen <Image/> yaitu src, width, dan height.

src berisi mengenai alamat pada gambar yang akan ditampilkan. Properti src ini akan menerima 2 jenis yaitu objek gambar lokal yang diimpor secara statis atau string URL gambar absolut atau relatif eksternal.

width dan height digunakan untuk menentukan dimensi pada gambar. Properti width dan height dapat mewakili lebar gambar yang dirender atau asli, tergantung pada nilai tata letak

  • Properti Optional pada Komponen <Image/>

Adapun properti yang bersifat optional pada komponen <Image/> yaitu layout, loader, sizes, placeholder, priority, dan quality.

Layout

layout akan menerima nilai string yang digunakan untuk menentukan perilkau tata letak gambar saat viewport berubah ukuran.

LayoutPerilaku
intrinsic (default)Perkecil agar sesuai dengan lebar wadah,
hingga ukuran gambar
fixedUkuran lebar dan tinggi persis
responsiveSkala agar sesuai dengan lebar wadah
fillTumbuh di sumbu X dan Y untuk mengisi wadah

Loader

loader adalah fungsi yang mengembalikan string URL untuk gambar. Mengatur loader sebagai prop pada komponen Image akan menggantikan loader default yang ditentukan di bagian images di next.config.js. Berikut ini contohnya.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
        loader={myLoader}
        src="leravio.webp"
        alt="logo"
        width={400}
        height={400}
    />
  )
}

Sizes

Properti sizes akan menerima sebuah string yang akan memberikan informasi mengenai seberapa lebar gambar pada breakpoint yang berbeda. Nilai ukuran akan sangat mempengaruhi performa gambar menggunakan layout=”responsive” atau layout=”fill”. Ini akan diabaikan untuk gambar yang menggunakan layout=”intrinsic” atau layout=”fixed”.

Berikut ini contoh penggunaan properti sizes.

import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/leravio.webp"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

Placeholder

Placeholder digunakan saat gambar yang sedang dimuat. Nilai yang mungkin blur atau empty. Defultnya yaitu empty.

Saat memilih nilai empty, maka ruang kosong akan ditampilkan hingga gambar asli terisi penuh. Sedangkan untuk nilai blur, maka properti blurDataURL akan digunakan sebagai placeholder. Jika src adalah objek dari impor statis dan gambar yang diimpor adalah .jpg, .png, .webp, atau .avif, maka blurDataURL akan diisi secara otomatis

Priority

Properti ini akan memberitahu browser untuk memuat gambar terlebih dahulu karena dianggap sebagai prioritas tinggi. Lazy loading akan dinonaktifkan secara otomatis untuk gambar yang menggunakan prioritas

Quality

Kualitas gambar yang dioptimalkan, bilangan bulat antara 1 dan 100 dengan 100 adalah kualitas terbaik. Default ke 75.

  • Properti Advanced pada Komponen <Image/>

Adapun properti yang bersifat advanced pada komponen <Image/> yaitu objectFit, objectPosition, style, blurDataURL, loading, dan onLoadingComplete.

objectFit

Properti ini digunakan untuk menentukan bagaimana gambar akan masuk ke wadah induknya saat menggunakan layout=”fill”. Nilai ini diteruskan ke properti CSS sesuai-objek untuk gambar src. Nilai yang mungkin digunakan adalah fillcover, atau contain

objectPosition

Digunakan untuk menentukan bagaimana posisi gambar dalam elemen induknya saat menggunakan layout=”fill”. Nilai ini diteruskan ke properti CSS posisi objek yang diterapkan pada gambar

style

Dengan menggunakan properti ini memungkinkan kita untuk menambah style CSS khusus ke elemen gambar yang mendasarinya. Berikut ini contohnya.

<Image
    src="/leravio.webp"
    alt="leravio"
    width={750}
    height={750}
    style={{ opacity: 0.5 }}
/>

blurDataUrl

URL Data untuk digunakan sebagai gambar placeholder sebelum gambar src berhasil dimuat. Hanya berpengaruh bila digabungkan dengan placeholder=”blur”

loading

Properti ini akan menentukan perilaku pemuatan gambar dengan menerima 2 nilai antara lazy dan eager. Nilai lazy sebagai defaultnya.

Saat anda memilih lazy maka pemuatan gambar ditunda hingga mencapai jarak yang dihitung dari viewport, sedangkan ketika anda memilih eager maka akan memuat gambar segera setelah halaman dipasang

onLoadingComplete

Fungsi panggilan balik yang dipanggil setelah gambar dimuat sepenuhnya dan placeholder telah dihapus. Fungsi onLoadingComplete menerima satu parameter, sebuah objek dengan properti yaitu naturalWidth dan naturalHeight

Kesimpulan

Pada tutorial ini kita telah mempelajari bagaimana cara menggunakan next/image untuk mengoptimalkan gambar di next.js. Jika kalian punya pertanyaan terkait dengan pembahasan diatas, kalian bisa komentar dibawah sini.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top