AVIF를 Base64로

AVIF를 Base64로 변환하는 방법

1. .avif 파일을 상자에 끌어다 놓거나 파일 선택기로 고르세요.
2. 원본 파일을 인코딩하려면 최대 너비, 변환 형식, 메타데이터(EXIF) 제거를 비워 두세요.
3. 출력 형식을 Data URI로 두거나 CSS, <img>, Markdown, JSON, 일반 Base64 중에서 고르세요.
4. 출력 복사를 누르세요. 미터에 입력 크기, 출력 크기, 오버헤드가 표시됩니다.

미리보기가 비어 있다면 브라우저가 AVIF를 디코딩하지 못하는 것입니다. 파일은 여전히 올바르게 인코딩되며, 여기서 표시만 되지 않을 뿐입니다.

AVIF는 대개 그대로 두는 것이 좋은 이유

AVIF는 작게 만들기 위해 존재하는 형식입니다. 사진이라면 비슷한 화질에서 JPEG나 WebP보다 작은 경우가 많아서, Base64 한 바이트 한 바이트가 아쉬운 인라인 플레이스홀더나 썸네일에 매력적입니다.

문제는 인코딩입니다. 크기 조정, 형식 변환, 메타데이터 제거 옵션은 브라우저 canvas에 이미지를 다시 그리는데, 브라우저는 canvas를 PNG, JPEG, WebP로는 내보낼 수 있어도 AVIF로는 내보낼 수 없습니다. 따라서 다음과 같습니다.

• 원래 형식 유지에 최대 너비를 주면 PNG가 나옵니다. 사진이라면 그 PNG가 AVIF보다 몇 배 클 수 있습니다.
• WebP로 변환하면 크기 면에서 가장 가까운 대안이 됩니다. 다만 Safari는 WebP도 인코딩하지 못해 PNG로 대신합니다.
• JPEG로 변환하면 호환성은 넓어지지만 투명도가 사라집니다.

더 작은 AVIF가 필요하다면 이미지 편집기나 명령줄 인코더처럼 AVIF를 지원하는 도구로 크기를 줄인 다음, 그 파일을 여기서 그대로 인코딩하세요.

Base64로 본 AVIF

AVIF는 HEIC, MP4와 같은 ISO 기본 미디어 파일 형식을 씁니다. 파일은 ftyp 박스로 시작하며, 4바이트 박스 크기, 문자 ftyp, 브랜드로 이루어집니다.

다섯 번째 문자는 박스 크기에 따라 바뀌므로, 코드에서 AVIF를 감지할 때는 9번째 문자부터 eXBhdmlm이나 eXBhdmlz를 비교하세요.

대체 이미지와 인라인

웹사이트의 일반적인 AVIF 이미지는 보통 <picture>로 대체 이미지를 함께 두어, AVIF 소스를 먼저 쓰고 JPEG나 WebP를 그 뒤에 씁니다. data URI로도 그렇게 할 수 있지만, 그러면 모든 형식이 HTML에 인라인으로 들어가 페이지가 전부를 싣고 다니게 됩니다. 작은 플레이스홀더보다 큰 이미지라면 파일을 링크해서 브라우저가 쓸 수 있는 하나만 내려받게 하세요.

받은 Base64 문자열을 확인하려면 Base64를 이미지로에서 디코딩하세요. 대부분의 브라우저가 인코딩도 할 수 있는 WebP는 WebP를 Base64로를 참고하세요.

자주 묻는 질문