Belajar Gatsby - Images & Media Optimization

#Pendahuluan

Gambar adalah kontributor terbesar bobot sebuah halaman web. Gatsby menyelesaikan ini dengan rangkaian plugin Sharp yang menghasilkan gambar responsif secara otomatis: format modern, ukuran pas untuk setiap layar, lazy loading, dan placeholder yang halus.

Episode 6 membedah gatsby-plugin-image, dua komponen utamanya, konfigurasi plugin pendukung, serta cara menangani media lain seperti audio dan video.

#Mengenal gatsby-plugin-image

#Plugin yang Dibutuhkan

gatsby-plugin-image bekerja bersama Sharp. Install empat paket sekaligus:

npm install gatsby-plugin-image gatsby-plugin-sharp
npm install gatsby-transformer-sharp gatsby-source-filesystem

Kemudian daftarkan di gatsby-config.js:

Konfigurasi plugin gambar

module.exports = {
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images`,
      },
    },
  ],
}

Tiga plugin pertama berjalan bersama: source filesystem menyediakan file, transformer-sharp mengubah gambar menjadi node, dan plugin-image memberi field gatsbyImageData yang siap di-render.

#StaticImage untuk Gambar Statis

#Komponen StaticImage

Untuk gambar yang alamatnya tetap (misalnya logo dan ilustrasi), pakai StaticImage tanpa query:

StaticImage dengan import

import { StaticImage } from "gatsby-plugin-image"
 
const Hero = () => (
  <StaticImage
    src="../images/hero.png"
    alt="Ilustrasi hero"
    width={1200}
    placeholder="blurred"
  />
)

<StaticImage src="../images/hero.png" alt="Ilustrasi hero"{:jsx}> mengharuskan path di-resolve saat build. Properti width dan layout mengontrol ukuran responsif yang dihasilkan.

#GatsbyImage dan Query GraphQL

#GatsbyImage dari Data GraphQL

Untuk gambar dinamis — misalnya gambar dari frontmatter setiap post — query gambar lalu render dengan GatsbyImage:

Query dan render GatsbyImage

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
export const query = graphql`
  query {
    markdownRemark {
      frontmatter {
        featuredImage {
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
          }
        }
      }
    }
  }
`
 
const PostPage = ({ data }) => {
  const image = getImage(data.markdownRemark.frontmatter.featuredImage)
  return (
    <GatsbyImage
      image={image}
      alt="Gambar utama post"
    />
  )
}

Helper getImage mengubah node gambar menjadi object yang siap dipakai GatsbyImage. layout: FULL_WIDTH membuat gambar meregang penuh selebar kontainer.

#Tiga Layout yang Tersedia

Pilih layout sesuai kebutuhan:

• FIXED: ukuran tetap, cocok untuk avatar dan ikon.
• CONSTRAINED: ukuran maksimum tertentu, menyusut jika layar kecil.
• FULL_WIDTH: selebar kontainer, dipakai untuk hero dan banner.

#Konfigurasi, Placeholder, dan Lazy Loading

#Format dan Kualitas

Gatsby otomatis memilih format terbaik di antara WebP dan AVIF, lalu memakai source set untuk tiap resolusi layar. Kualitas bisa diatur lewat argumen query seperti quality: 80 dan transformOptions untuk cropping.

#Placeholder Blur dan Lazy Loading

Placeholder blurred menampilkan versi blur kecil sambil gambar asli dimuat. Untuk gambar di luar area layar, Gatsby memakai Intersection Observer sehingga hanya gambar yang terlihat yang dimuat — inilah lazy loading bawaan.

#Audio dan Video di Halaman

#Video dan Audio

Gatsby tidak men-transcode video secara otomatis; file media besar sebaiknya ditempatkan di folder static atau CDN eksternal, lalu dirender dengan elemen HTML standar:

Embed video dan audio

const MediaSection = () => (
  <section>
    <video controls preload="none" poster="../images/cover.png">
      <source src="/video/demo.mp4" type="video/mp4" />
    </video>
    <audio controls preload="metadata">
      <source src="/audio/episode.mp3" type="audio/mpeg" />
    </audio>
  </section>
)

Atribut preload="none" pada video mencegah unduhan data sebelum diputar. Untuk embed dari layanan eksternal seperti YouTube, iframe standar tetap bekerja baik.

#Memindahkan Media ke static

Folder static di akar project disalin apa adanya ke public saat build. Taruh di sana file yang tidak perlu diproses oleh data layer, sehingga URL-nya langsung bisa diakses seperti /video/demo.mp4.

#Penutup

Episode 6 menuntaskan optimasi media: gatsby-plugin-image dan Sharp untuk gambar responsif, StaticImage untuk gambar statis, GatsbyImage untuk gambar dari query, serta penanganan audio dan video.

Inti yang harus dibawa pulang:

• Install dan daftarkan empat plugin: image, sharp, transformer-sharp, dan source-filesystem.
• StaticImage untuk gambar dengan path tetap; GatsbyImage untuk gambar dari GraphQL.
• Pilih layout FIXED, CONSTRAINED, atau FULL_WIDTH sesuai konteks.
• Lazy loading dan placeholder blur berjalan otomatis.
• Video dan audio pakai elemen HTML dengan file di folder static atau CDN.
• Selalu isi atribut alt untuk aksesibilitas.

Di episode 7 selanjutnya kita akan membahas plugins dan themes — memahami ekosistem plugin Gatsby, cara install dan konfigurasi, membuat theme yang reusable, serta best practice urutan plugin dan dampaknya terhadap performa.