[240205] 이미지 최적화

이미지 최적화의 필요성

이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다.

 

---

적절한 이미지 포맷 선택하기

PNG	JPEG	WebP
👍 비손실 압축	👍 색상이 다양한 이미지에 적합 👍 PNG보다 용량이 비교적 작다	👍 용량이 PNG, JPEG보다 작다
👎 색상이 다양한 이미지에 부적합	👎  손실 압축 👎  투명도 지원 X	👎 구형 브라우저 지원 X 👎 이미지 변환 작업 필요

⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자!

 

---

반응형 이미지 제공하기

<img>의 속성 이용!

• src
  • 반응형 X
  • fallback으로 이용
• srcset
  • 제공할 이미지들을 적는다.
  • "이미지이름 크기w, 이미지이름 크기w, ..."  형식으로 적어주면 된다.
• sizes
  • 이미지 출력 시 어느 정도의 너비를 가져야 하는지 알려주기 (% 사용불가)
  • "(미디어 조건문) 이미지가 가질 너비 ..." 형식으로 적어주면 된다.

 

<img src="ham-l.png" 
    srcset="ham-s.png 640w, ham-m.png 1080w, ham-l.png 2048w" 
    sizes="(max-width: 991px) 80vw, 100vw" />

 

---

이미지 스프라이트

[240115] 이미지 스프라이트와 자동화

 

---

Lazy Loading

보여지는 이미지를 먼저 로딩

 

---

이미지 CDN 활용하기

[240203] CDN이란?

 

---

next/image 활용하기

next/image는 위에서 제안한 최적화 방법들을 대부분 제공하고 있다.

• 이미지 포맷 선택 가능 - WebP 포맷이 디폴트

// next.config.js

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

• fill 속성을 이용하여 자동으로 반응형 이미지 제공
• Lazy Loading 디폴트

 

---

참고자료

Components: <Image> | Next.js

JPG vs PNG vs WEBP: Which Image Format is Best for WordPress