Nginx webp, avif 파일 캐시 적용

---

차세대 이미지 형식

WebP 파일 포맷

WebP는 구글¹이 개발한 이미지 파일 포맷으로 2010년에 처음으로 발표되었고², 기존의 JPEG, PNG, GIF 파일보다 더 높은 압축률과 품질을 제공합니다. 손실 압축과 무손실 압축을 모두 지원하여 다양한 용도로 활용될 수 있습니다. WebP는 동일한 화질을 유지하면서도 파일 크기를 줄일 수 있어 웹 페이지의 로딩 속도를 향상시키고, 대역폭 사용을 줄이는 데 기여합니다.

WebP는 애니메이션, 알파 투명도 및 색상 프로필을 지원하여 다양한 이미지 표현이 가능합니다. 특히, 웹사이트 최적화에 중요한 역할을 하며, 많은 브라우저와 응용 프로그램에서 지원되고 있습니다. WebP 포맷을 사용하면 웹 페이지 성능이 향상되고, 사용자 경험이 개선될 수 있습니다.

AVIF 파일 포맷

AVIF^{(AV1 Image File Format)}는 AV1 비디오 코덱을 기반으로 한 이미지 파일 포맷으로, Alliance for Open Media^(AOM)3가 개발했습니다. AVIF는 고효율의 압축률과 뛰어난 이미지 품질을 제공하며, 손실 및 무손실 압축을 모두 지원합니다. AVIF는 특히 저비트레이트에서도 높은 화질을 유지할 수 있어, 웹 이미지 최적화에 매우 유리합니다.⁴

AVIF는 HDR^{(High Dynamic Range)} 지원, 알파 채널을 통한 투명도 처리, 색상 공간 프로필 등 다양한 기능을 제공합니다. 이러한 기능들은 사진, 그래픽, 애니메이션 등 다양한 이미지 컨텐츠를 보다 풍부하고 세밀하게 표현할 수 있게 합니다. AVIF는 최신 브라우저에서 지원되며, 향후 이미지 포맷의 표준으로 자리 잡을 가능성이 큽니다.

---

Nginx configuration

아래 설정은 차세대 이미지 포맷(WebP, AVIF) 파일을 캐싱하고 nginx를 통해 서빙할 수 있도록 하여 웹 페이지의 성능을 최적화하는 데 도움을 줍니다. 이를 통해 웹 페이지의 이미지 로딩 시간을 단축하고, 서버의 대역폭 사용을 줄일 수 있습니다.

전체 설정 파일 구조

# Map suffix
map $http_accept $webp_suffix {
	default "";
	"~*webp" ".webp";
}
map $http_accept $avif_suffix {
	default "";
	"~*avif" ".avif";
}
# Cache images
location ~* ^.+\.(png|jpe?g|gif|webp|webm|avif|heif)$ {
    add_header Vary Accept;
    expires max;
    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
}

Webp 매핑 설정

map $http_accept $webp_suffix {
	default "";
	"~*webp" ".webp";
}

• map 지시어는 요청 헤더나 변수 값을 기준으로 새로운 변수를 설정할 때 사용됩니다. 여기서는 $http_accept 헤더 값을 기반으로 $webp_suffix와 $avif_suffix 변수를 설정합니다.
• $http_accept 헤더를 확인하여, 해당 값에 ‘webp’가 포함되어 있는 경우 $webp_suffix 변수에 “.webp”를 할당합니다.
• 기본값은 빈 문자열입니다.

AVIF 매핑 설정

map $http_accept $avif_suffix {
	default "";
	"~*avif" ".avif";
}

• $http_accept 헤더를 확인하여, 해당 값에 ‘avif’가 포함되어 있는 경우 $avif_suffix 변수에 “.avif”를 할당합니다.
• 기본값은 빈 문자열입니다.

이미지 파일 캐싱 및 서빙 설정

location ~* ^.+\.(png|jpe?g|gif|webp|webm|avif|heif)$ {
    add_header Vary Accept;
    expires max;
    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
}

• location 블록은 특정 URL 패턴에 대한 요청을 처리하는 방법을 정의합니다.
• location ~* ^.+\.(png|jpe?g|gif|webp|webm|avif|heif)$:
  • 정규 표현식을 사용하여 확장자가 png, jpg, jpeg, gif, webp, webm, avif, heif인 파일에 대해 이 블록이 적용되도록 합니다.
  • ~*는 대소문자를 구분하지 않는 정규 표현식 매칭을 의미합니다.
• add_header Vary Accept;:
  • Vary: Accept 헤더를 추가하여 클라이언트의 Accept 헤더에 따라 캐시를 다르게 처리하도록 합니다.
  • 이는 서로 다른 이미지 포맷을 클라이언트가 요청할 때 각각의 요청을 별도로 캐시하도록 도와줍니다.
• expires max;:
  • 캐시 만료 시간을 최대한 길게 설정하여, 브라우저가 이미지를 오랫동안 캐시할 수 있도록 합니다.
• try_files $uri$avif_suffix $uri$webp_suffix $uri =404;:
  • 요청된 URI 뒤에 AVIF와 WebP 확장자를 순서대로 시도합니다.
  • 먼저 $uri$avif_suffix를 시도하고, AVIF 파일이 존재하지 않으면 $uri$webp_suffix를 시도합니다.
  • 두 파일 모두 없으면 기본 파일 $uri를 사용하고, 이 파일이 존재하지 않으면 404 오류를 반환합니다.

---

정리

차세대 이미지 형식인 webp, avif 파일을 nginx 서버에서 캐싱하고 서빙할 수 있도록 하여, 웹 페이지의 성능을 최적화하는 방법을 알아봤습니다. 이를 통해 이미지 로딩 시간을 단축하고, 서버의 대역폭 사용을 줄일 수 있을 것입니다.

참고자료

1. An image file format for the Web
   developers.google.com ↩︎
2. WebP Wikipedia
   wikipedia.org ↩︎
3. What is AVIF?
   aomedia.org – Alliance for Open Media ↩︎
4. AVIF Wikipedia
   wikipedia.org ↩︎