[Gatsby] Gatsby-image-plugin

마크튠·2021년 4월 13일

gatsby gatsby-image-plugin styled components

Gatsby

목록 보기

2/3

이미지 사용이 필요할 때 <img> 대신 gatsby-image-plugin 사용

장점

1. 구조 안정화

웹사이트 로딩시 <img> 태그를 사용한 구조는 Image의 자리가 
빈 값에서 새롭게 나타나는 형태로 로딩된다. 
따라서 Image 아래쪽에 텍스트가 있을 시 로딩되며 밀어내는 Push 현상이 발생한다. 

gatsby-image-plugin 사용시 먼저 적은 데이터로 구조를 잡아준 상태에서 이미지를 
로드하므로 이러한 현상이 발생하지 않게 된다.

2. 유연한 리소스 관리

일반적으로 <img> 태그를 사용할 시 3MB 크기의 이미지를 로드할 때 
Width 값을 작은 수치로 변경해도 동일하게 3MB를 로드한다. *NetWork창 확인

gatsby-image-plugin 사용시 Width값에 따른 이미지의 크기가
현저하게 줄어드는 것을 확인 할 수 있다. 
이는 페이지 로드속도와 직결된다.

3. 코드 가독성 향상

일반적으로 <img> 태그 사용시 
src 값에 따라 이미지의 Static/Dynamic 여부를 확인 할 수 있다. 
    
gatsby-image-plugin 사용시 TagName이 <StaticImage>, <GatsbyImage>로 
구분되므로 해당 이미지가 정적이미지인지 동적이미지인지 
TagName만으로도 손쉽게 예상할 수 있다.

플러그인 설치

1. npm install

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

2. gatsby-config.js 설정

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
  ],
}

예시)

StaticImage

import { StaticImage } from "gatsby-plugin-image"

export function Dino() {
 return <StaticImage src="../images/dino.png" alt="A dinosaur" />
}

DynamicImage

(Query 설정 별도로 필요)

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <h2>{data.blogPost.title}</h2>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`