[팁] 웹사이트를 위한 이미지 포맷에 대해 (AVIF, WEBP, PNG, SVG) - 리무스BBS

웹사이트를 위한 이미지 포맷에 대해

• 과거에는 웹사이트에 쓰는 이미지의 포맷은 주로 jpeg 혹은 gif 를 사용했었다.
• 사진류는 jpeg, 그림은 gif 가 사이즈도 작고 괜찮은 편이었는데, 이제는 표준의 발달로 다른 이미지 포맷이 선호되게 되었다.
  • 실제로는 이렇게 된지 꽤 지났지만…

현재 브라우저가 ‘선호’하는 이미지 포맷은?

• Edge, 크롬, 네이버 웨일 등의 크로미움 기반 브라우저의 경우, HTTP 요청의 ‘Accept’ 헤더를 보면 내용이 다음과 같다.
  • image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
• 파이어폭스는 다음과 같다
  • image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
• 앞쪽부터 선호하는 이미지 포맷을 나타내고, 가중치는 특별히 ‘q’로 표시가 되지 않으면 모두 1이라는 뜻이다.
  • 따라서, 이제는 jpeg / gif는 0.8의 선호도를 받는 포맷이 된 것이다.

각 포맷에 대한 간략한 설명

AVIF - AVI 의 Frame을 표현하는 스틸이미지 포맷 (2019)

• 동영상 압축용으로 개발되었던 AV1 코덱의 스틸컷 이미지 파일 형식이다.
  • 따라서, 동영상/사진류의 이미지에 좋은 효과를 가진다.
  • Animation 을 제공한다.
  • 사이즈의 제한은 대략 65000x65000 크기까지 지원은 하는데, imagemagick 등으로 변환할 때, 큰 사이즈는 시간이 열악하다.
• 무료 코덱이다. WebP에 비해 늦게 나와서 평균적 압축효율이 webp보다는 낫다.
• 손으로 그린 RGB 이미지를 저장하는 용도는 webp 보다 좋지 않은 경우가 많다. 이런 경우는 webp를 쓰자.
• 경쟁상대인 HEIC 는 유료 포맷.
• 상대적으로 최신 버전이라서, 개발하는 입장에서는 좀 귀찮… 변환용 서버 자원이 많이 남으면 쓰는 것 찬성.

WEBP - 구글에서 만든 웹환경을 위한 이미지 포맷 (2010)

• 브라우저가 웹피를 지원하면 웬만하면 웹피를 보내는게 좋다. 사이즈도 작고, 속도도 빠르다.
• 변환 속도도 좋아서, 실시간 webp 변환도 쓸만 하다.
• 카카오톡 지원이 애매하다.
  • 지원은 하긴 하는데, 웹페이지 썸네일 (preview) 용도로 쓰면 인식을 못하더라.
    • 개발팀이… 좀… 그래서 썸네일은 jpeg로 만들어서 보내주고 있다. ㅋㅋㅋ
  • 다른 이미지는 사진 묶어서 보내는게 되는데, webp 사진들은 묶어서 전송이 안된다. (희안하네…)
• 가로세로 사이즈가 16383 x 16383 픽셀 까지만 지원을 해서, 스압 수준의 유튜브 캡쳐 이미지는 변환이 안된다.
  • 이 경우에, avif 를 쓰면 좋겠지만, 변환 속도가 극악하게 나빠진다. ㅋㅋ

APNG - 모질라에서 주도해서 만든 형식. Animated PNG. 2022년에 확장이 추가됨

• 2007년부터 나왔지만, 정작 표준화가 늦어져서 지원이 잘 안되는 형식이다.
• 당시, 움짤을 위해서는 gif 를 써야만 했던 점을 개선하고자 만든 포맷.
• 움짤용으로는 webp / avif 보다 나을 수도 있다. 압축 방식이 rgb 그림을 위한 방식이기 때문.
• 자체 앱을 제공하는 업체에서는 APNG를 쓰고 있는 경우가 많다.
  • 라인(메신저), 디스코드의 스티커
  • 토스에서 사용하는 애니메이션
• 이외에는 대중성이 좀 떨어지는 관계로, webp를 쓰는 경우가 많다.
• 다른 이미지 위에 알파 채널을 씌운 APNG 움짤을 겹쳐쓰면 좋은 효과를 볼 수 있을 것 같다.

HEIF - MPEG에서 만든 이미지 포맷.

• H.265/HEVC 코덱으로 인코딩된 프레임을 저장하기 위한 ‘컨테이너’ 포맷.
• 갤럭시 폰등에서 이 모드를 사용하여 이미지를 저장하기도 한다. (코덱이 유료라…?)
• iOS 11과 macOS 등에서 사진/동영상 저장 포맷으로 정식 채택되었다.
  • 4k 60fps 촬영은 hevc(heif) 포맷으로만 기록할 수 있다.
• 호환성이 좀 떨어지는 편이다.
  • 주요 이미징 소프트웨어나 그래픽 에디터 등에서는 지원하는 편.
  • 코덱이 유료 → 지원이 적음
  • 브라우저 - 잘 지원하지 않음. 맥에서는 지원하지만 PC는 좀.
  • 어도비 라이트룸, 포토샵은 향후에도 지원할 계획이 없다고 한다. (맥용은 가능)
• 따라서, 안쓰는게 좋다. ㅋㅋㅋ

요약

• 사용자가 올리는 UCC 이미지는 현재까지는 webp 가 제일 속편하다.
• avif 가 큰 이미지나 움짤 변환속도가 빠르면 좋겠는데, 아직 그런 솔루션은 찾지 못했다.
  • 나중에 회사 커지면 생각해보자.
• 디자인 팀이 있고, 자체 움짤 스티커를 만들면 apng 포맷이 좋은 것 같다.
• jpeg / gif 가져다 버리자. 업로드 원본 저장용이 아니면 의미가 없다.
• heif 는…