이미지 최적화를 할 수 있는 방법 중 하나인 WebP와 AVIF에 대해 이해하기 위해 쓰는 글
프로젝트들을 진행하며 성능 최적화에 신경을 더 쓰게 된 요즘
페이지의 초기 로딩 속도를 줄이고 이미지를 더 빨리 보여줄 수 있는 방법에 대해 관심이 가기 시작했다!
이미지 최적화를 할 수 있는 방법은 여러 가지이다.
간단히 어떤 방법들이 있는지 먼저 살펴보자!
- 이미지 크기 줄이기
(1) 벡터 이미지 활용
: SVG 사용
(2) 불필요한 메타데이터 제거
: 카메라 정보, GPS 좌표 등 제거
(3) CSS로 대체
: 배경이나 간단한 요소는 이미지 대신 CSS
- 응답형 이미지 제공
(1) 다양한 해상도 이미지
: 사용자 화면 크기와 해상도에 따른 최적의 이미지 제공
(2) 동적 이미지 제공
: 디바이스와 네트워크 상태 감지로 최적의 크기와 품질의 이미지 제공
- 브라우저 캐싱 및 CDN
(1) 캐싱
: 이미지에 캐싱 헤더를 추가해 재요청 줄임
(2) CDN (Content Devlivery Network)
: 사용자 위치에 가장 가까운 서버에서 이미지 제공
Ex) Cloudfare Images, AWS CloudFront, Akamai
- Lazy Loading
: 사용자가 화면을 스크롤할 떄 필요한 이미지만 로드
등등 이 외에도 더 많은 이미지 최적화 방법들이 존재한다!
오늘은 자바스크립트/리액트 환경에서 WebP와 AVIF를 이용해 이미지 최적화하는 방법에 대해 알아보려고 한다 :)
먼저 여기서 드는 궁금증
WebP와 AVIF가 뭐야??
WebP와 AVIF는 최신 이미지 파일 형식이고,
JPG나 PNG보다 더 높은 압축률과 이미지 품질을 제공하는 포맷이라고 한다!
WebP란
: 구글이 개발한 이미지 파일 형식이다.
- 이미지 포맷 변환 툴 사용으로 JPEG, PNG 등의 이미지 포맷을 WebP 형식으로 변환 가능
- WebP 형식으로 제공되는 이미지 다운
(현재 표준에 가까운 포맷으로 폭넓게 사용됨)
WebP의 특징으로는
- 손실 압축과 무손실 압축 모두 지원
- 투명한 배경을 지원하는 알파 채널 사용 가능
- 기존의 JPG나 PNG보다 25~34% 더 작음
- GIF를 대체할 수 있는 애니메이션 기능 지원
- 파일 크기가 작아 웹 페이지 로드 속도 빠름
- 품질 저하 없이 저장 용량 절감
- 대부분의 최신 브라우저에서 지원(크롬, 파이어폭스 등)
- 일부 오래된 브라우저에서 지원하지 않음
AVIF란
: AOM(Alliance for Open Media)에서 개발한 최신 이미지 포맷이다.
- 웹 기반 도구를 사용하여 JPEG, PNG 같은 이미지를 AVIF 포맷으로 변환할 수 있다.
(기술적으로 더 뛰어나지만, 지원 환경이 제한적)
AVIF의 특징은
- AV1 코덱(비디오 압축 기술)을 기반으로 이미지 압축
- 손실 압축 및 무손실 압축 모두 지원
- WebP보다 더 높은 압축률과 품질 제공
- HDR(High Dynamic Range) 이미지 지원
- WebP보다 파일 크기가 더 작아 효율적임
- 고풀질 이미지 및 색상 지원으로 선명함 유지
- 인코딩 속도가 느릴 수 있음
- 최신 브라우저에서 지원(크롬 85 이상, 파이어폭스 93 이상 등) -> 최신 브라우저에서 점차 지원 확대 중
- 일부 브라우저와 플랫폼에서는 지원하지 않음
이 두가지를 언제 사용하면 좋을까?
WebP는
- 빠른 인코딩과 디코딩이 필요할 때
- 이미지 품질 저하 없이 파일 크기 줄이고 싶을 때
AVIF는
- 고품질의 이미지와 압축 효율이 필요할 때
- HDR 콘텐츠를 처리 또는 고해상도 이미지를 사용할 때
그렇다면 우선 자바스크립트 환경에서의 WebP 사용법을 알아보자!
1. 웹에서 WebP 지원 여부 확인
: 브라우저가 WebP를 지원하는지 먼저 확인 후, 지원하지 않을 때 대체 이미지를 제공하는 코드 작성
브라우저가 WebP를 지원하고, 지원 여부를 callback 함수로 전달하는 함수
(브라우저가 WebP를 지원하면 true, 아니면 false를 반환하는 함수)
WebP의 이미지는 1x1 크기지만 webP.height === 2가 true로 평가되면 WebP를 지원한다고 판단
(성공적으로 이미지 로드 시 높이가 2로 설정됨)
callback 함수는 webP를 지원하면 true, 지원하지 않으면 false 반환
2. WebP 지원 여부에 따른 이미지 변경
(위의 supportsWebP 함수 호출)
true를 반환하면 webp 형식의 이미지로 이미지 경로 설정, false면 jpg나 png로 이미지 경로 설정
리액트 환경에서 WebP 사용 방법을 확인해보자!
리액트 환경에서는 세 가지의 방법으로 WebP를 사용할 수 있다는 걸?
1. 태그 사용하기
: 이 태그를 사용하면 WebP 이미지 포맷을 지원하는 브라우저에는 WebP 이미지를, 지원하지 않다면 JPG나 PNG 같은 이미지 포맷을 사용할 수 있다.
(가장 일반적으로 사용되는 방식이라고 한다! : 더 간단하고 효율적인 방법)
대부분 picture 태그를 이용할 때,
태그 내에 2개의 source, 1개의 img 태그를 정의해준다.
첫 번째 source는 webp 형식의 이미지 경로, 두 번째 source는 jpg나 png 같은 다른 이미지 경로
img에는 jpg나 png 이미지가 설정되지 않았을 경우 띄워줄 기본 이미지 경로
2. 함수로 WebP 지원 여부 확인 후 이미지 변경
: 지원 여부 확인 함수를 정의하고 useEffect와 useState를 이용해 이미지 변경
Promise의 resolve로 반환하는 함수를 정의한 후
useEffect에서 지원 여부 함수를 호출시켜 결과를 state로 설정한다.
그런 다음, img 태그에서 삼항 연산자를 이용해 이미지의 경로를 지연 여부에 따라 다르게 정의한다!
3. 이미지 최적화 라이브러리 사용
: react-image 라이브러리 사용으로 이미지 최적화를 자동으로 처리
react-image 라이브러리 설치 후, Img 내 src에서 배열로 정의해준다.
WebP 포맷 이미지와 JPG나 PNG 포맷 이미지 둘다 넣어준다!
그러면, AVIF 사용 방법에 대해 알아볼까?
(WebP 사용 방법과 거의 흡사하다고 한다!)
먼저 자바스크립트 환경에서의 AVIF 사용 방법을 확인해보자!
1. 브라우저 지원 여부 확인 및 여부에 따른 이미지 경로 설정
: WebP의 지원 여부 확인 함수와 똑같다!
대신 webP라는 변수명 대신 avif, 이미지 경로에서 webp 대신 avif로 정의해주면 되는 것이다.
그 다음 리액트에서의 AVIF 사용 방법은?
1. 태그를 사용하여 AVIF 이미지 제공
: WebP의 리액트 환경 사용방법과 똑같다!
이미지 경로 포맷이 webp가 아니라 avif로 정의해주면 된다
두 가지 이미지 포맷을 사용하는 방법이 거의 똑같았다!
공통적으로는 브라우저 호환성을 고려해서 대체 이미지 포맷(JPEG, PNG, WebP 등)을 함께 제공하는 것이다.
생각보다 너무 간단히 이미지 최적화를 할 수 있잖아?
다음 프로젝트에서 바로 적용해보고 얼마나 더 빨리 로드가 되는지 확인해봐야겠다!
