WebP를 Base64로

WebP를 Base64로 변환하는 방법

1. .webp 파일을 상자에 놓거나 파일 선택기로 고르세요.
2. 형식을 바꾸려면 변환 형식에서 PNG나 JPEG를 고르세요. 원래 형식 유지인 상태에서 최대 너비를 설정하면 선택한 품질로 WebP로 다시 인코딩합니다.
3. 출력 형식을 고르세요. 기본값은 data URI입니다.
4. 출력 복사를 누르세요. 막대 표시가 입력과 출력 크기를 비교해 줍니다.

WebP가 data URI에 잘 맞는 이유

Base64는 무엇을 인코딩하든 약 3분의 1을 더하므로 원본이 작을수록 좋습니다. 손실 WebP는 비슷한 품질의 JPEG보다 대개 작고, 무손실 WebP는 투명도를 유지하면서 PNG보다 작은 경우가 많습니다. 인라인으로 넣고 싶은 아이콘, 상품 썸네일, 플레이스홀더라면 WebP가 보통 PNG나 JPEG보다 짧은 문자열을 줍니다.

애니메이션 WebP 파일은 그대로 인코딩됩니다. GIF와 마찬가지로 재인코딩 옵션은 첫 프레임만 그리므로, 움직이는 이미지라면 옵션을 건드리지 마세요.

받는 곳이 WebP를 받지 않을 때

아직 PNG나 JPEG를 기대하는 소프트웨어가 많습니다. Base64 이미지를 받는 일부 API, 오래된 데스크톱 프로그램, 문서 생성기, 많은 이메일 클라이언트가 그렇습니다. 다른 곳에서 파일을 먼저 변환하지 말고, 여기서 변환 형식을 PNG나 JPEG로 고른 뒤 결과를 바로 인코딩하세요.

• PNG는 투명도와 모든 픽셀을 유지하지만 크기가 커집니다.
• JPEG는 사진에서 더 작지만 투명한 영역을 흰색으로 채웁니다.

HTML <a download>와 JSON 출력의 파일 이름은 새 형식에 맞게 바뀝니다. 예를 들어 banner.webp는 banner.png가 됩니다.

브라우저에서 WebP로 재인코딩

대부분의 브라우저는 캔버스에서 WebP를 쓸 수 있으므로, WebP의 크기나 품질을 바꿔도 WebP로 남습니다. Safari는 그렇지 못합니다. 그때 도구는 PNG로 대체하고 미리보기 아래에 그렇게 알려 주는데, 사진을 PNG로 만들면 원래 WebP의 몇 배 크기가 될 수 있습니다. WebP 출력이 필요하면 Chrome, Edge, Firefox를 쓰거나 원본 파일을 그대로 두세요.

Base64에서 WebP 알아보기

WebP는 WAV 오디오, AVI 동영상과 같은 RIFF 컨테이너를 씁니다.

UklGRlAAAABXRUJQVlA4IEQAAAD...
└─┬─┘└─┬──┘│└─┬┘
 RIFF  size W EBP

UklGR는 “RIFF"라는 것만 알려 줍니다. 형식 태그 WEBP는 811번째 바이트에 있으며 1216번째 문자에 XRUJQ로 나타나고, 그 뒤에 VP8 청크를 뜻하는 VlA4가 옵니다. 코드에서 형식을 판별한다면 두 부분을 모두 확인하세요. 더 많은 시그니처는 자주 보는 Base64 접두사에 있고, Base64를 WebP로는 문자열을 다시 파일로 디코딩합니다.

자주 묻는 질문