FrontEnd

WEBP회전 오류

Raconer 2025. 1. 20. 23:45
728x90

이미지를 웹에서 빠르게 노출하기 위한 최적화 방법: WEBP와 AVIF

웹 사이트에서 이미지를 빠르게 로드하기 위해, 많은 개발자들이 이미지 파일을 최적화하고 있습니다. 특히 WEBP와 같은 이미지 포맷은 높은 압축률과 뛰어난 품질로 널리 사용되고 있습니다. 하지만 최근 프로젝트에서 WEBP 이미지가 일부 회전된 상태로 노출되는 문제가 발견되었고, 이를 해결하기 위해 다양한 방법을 탐구한 경험을 공유합니다.


문제 상황: WEBP 이미지의 회전 이슈

이미지 최적화를 위해 기존 JPEG나 PNG 이미지를 WEBP로 변환하여 사용하고 있었습니다. 하지만 몇몇 이미지를 확인해보니, 웹 페이지에서 정상적으로 표시되지 않고 회전된 상태로 노출되는 문제가 있었습니다.

문제를 분석한 결과, 이와 같은 현상은 사진에 포함된 회전 메타데이터 때문이었습니다.

회전 메타데이터란?

스마트폰으로 촬영한 사진은 카메라의 방향에 따라 EXIF 메타데이터에 회전 정보(Orientation)를 저장합니다. 예를 들어, 사진을 세로로 찍었다면 "90도 회전"과 같은 정보가 이미지 파일에 포함됩니다.

JPEG나 PNG는 이 회전 메타데이터를 자동으로 인식하여 이미지를 올바르게 표시합니다. 그러나 WEBP는 이러한 메타데이터를 읽지 않기 때문에, 회전 정보가 무시되고 원본 데이터 그대로 노출되는 문제가 발생하게 됩니다.


문제 해결: AVIF로의 전환

이 문제를 해결하기 위해 AVIF 포맷으로 전환을 고려했습니다. AVIF는 다음과 같은 장점을 가지고 있습니다:

  • 더 높은 압축률: WEBP보다 파일 크기를 더욱 줄일 수 있습니다.
  • 메타데이터 지원: EXIF 데이터를 포함하여 회전 정보를 올바르게 처리할 수 있습니다.
  • 화질: 더 높은 화질을 유지하면서도 용량을 줄일 수 있습니다.

브라우저 지원 문제

과거에는 AVIF 포맷을 지원하는 브라우저가 적어 도입에 어려움이 있었습니다. 하지만 최근 주요 브라우저의 업데이트로 인해 크롬, 엣지, 파이어폭스, 사파리 등 대부분의 브라우저에서 AVIF를 지원하게 되었습니다.

지원 상황은 Can I Use와 같은 사이트를 통해 확인할 수 있습니다.


구현 방법

  1. 이미지 변환:
    • 기존 JPEG/PNG/WEBP 이미지를 AVIF로 변환합니다.
    • 변환 도구: Squoosh, Sharp, imagemagick 등을 사용할 수 있습니다.
  2. HTML 및 서버 설정: 브라우저 호환성을 고려하여 HTML에서 다양한 포맷을 지원하는 방식으로 설정합니다:위 코드는 브라우저가 AVIF를 지원하지 않을 경우 WEBP나 JPEG를 대체로 불러오도록 설정합니다.
  3. <picture>
      <source srcset="image.avif" type="image/avif">
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="Example Image">
    </picture>
  4. CDN 설정:
    • CDN에서 이미지를 자동 변환하거나, 사용자 브라우저에 따라 적절한 포맷을 제공하도록 설정합니다.
    • 예: Cloudflare, AWS CloudFront 등.

WEBP와 AVIF 비교

특징 WEBP AVIF

압축률 좋음 매우 좋음
지원 브라우저 대부분 지원 대부분 지원
회전 메타데이터 지원하지 않음 지원함
이미지 품질 우수 더 우수

결론

WEBP는 여전히 강력한 이미지 포맷이지만, 회전 메타데이터 문제로 인해 특정 상황에서는 AVIF로의 전환이 더 나은 선택이 될 수 있습니다. 특히 AVIF는 더 나은 압축률과 품질을 제공하면서도 점점 더 많은 브라우저에서 지원되고 있어 웹 이미지 최적화의 새로운 기준으로 자리 잡고 있습니다.


참고

728x90