Base64를 WebP로

Base64를 WebP로 변환하는 방법

1. Base64나 전체 data:image/webp;base64,... URI를 붙여넣으세요. CSS url()이나 <img> 태그처럼 URI가 들어 있는 코드도 됩니다.
2. 상태 표시줄의 감지된 형식이 WebP인지 확인한 다음, 미리보기와 그 위의 크기를 확인하세요. 애니메이션 WebP는 미리보기에서 재생됩니다.
3. 파일 다운로드를 누르세요. 확장자는 webp로 지정됩니다.

WebP의 세 가지 종류

WebP는 RIFF 컨테이너이며, WEBP 태그 바로 뒤에 세 가지 청크 유형 중 하나가 옵니다. 태그가 고정된 오프셋에 있으므로 유형도 Base64에서 고정된 위치에 나타납니다.

UklGR과 XRUJQ 사이의 여섯 문자는 파일 크기를 인코딩하므로 파일마다 달라집니다. XRUJQ(WEBP에서 나옴)는 항상 1216번째 문자에, VlA4(VP8에서 나옴)는 1720번째 문자에 있습니다. 봐야 할 것은 21번째 문자인 I, T, W입니다.

종류에 따라 파일을 변환했을 때 결과가 달라집니다. 무손실 WebP는 PNG를 대신하기에 좋습니다. 손실 WebP는 이미 디테일을 잃었으므로 PNG로 변환해도 화질은 돌아오지 않고 파일만 커집니다. 확장 파일에는 여러 프레임이 들어 있을 수 있으며, 정지 이미지 형식으로 변환하면 첫 프레임만 남습니다.

코드에서 WebP 종류 확인하기

Python에서도 같은 방식으로 청크 태그를 읽고, 확장 파일이면 플래그 바이트를 읽습니다.

import base64

def webp_kind(b64: str) -> str:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:4] != b"RIFF" or data[8:12] != b"WEBP":
        return "not WebP"
    chunk = data[12:16]
    if chunk == b"VP8 ":
        return "lossy"
    if chunk == b"VP8L":
        return "lossless"
    flags = data[20]
    parts = ["extended"]
    if flags & 0x10:
        parts.append("alpha")
    if flags & 0x02:
        parts.append("animated")
    return ", ".join(parts)

Pillow로 만든 WebP 파일에 대해 lossy, lossless, 투명도가 있는 손실 이미지에는 extended, alpha, 애니메이션에는 extended, animated를 돌려줍니다. 자세한 내용은 Python에서 Base64에 있습니다.

RIFF가 항상 WebP는 아닙니다

UklGR은 “RIFF"라는 뜻일 뿐입니다. WAV 오디오와 AVI 동영상도 똑같이 시작하며, 8~11번째 바이트의 태그로 구별됩니다. 디코더는 이 태그를 확인하므로 여기에 WAV를 붙여넣으면 WebP가 아니라 WAV로 보인다는 안내와 함께 .wav로 저장하는 버튼이 나타납니다. Base64를 오디오로에서 재생할 수 있습니다.

WebP Base64를 만나는 곳

• 캔버스 내보내기: toDataURL("image/webp", quality)로 만든 결과입니다. WebP 인코더가 없는 브라우저는 조용히 PNG를 돌려주므로 결과를 확인하세요.
• 이미지 API와 CDN: WebP를 받을 수 있는 클라이언트라면 어디든 WebP를 보냅니다. 브라우저가 이미지를 가져왔다면 thumbnail_jpg라는 필드에도 WebP가 들어 있을 수 있습니다.
• 인라인 플레이스홀더와 아이콘: HTML과 CSS에서 WebP는 PNG나 JPEG보다 짧은 문자열을 만듭니다.
• 채팅 스티커: WebP인 경우가 많고, 애니메이션인 경우도 있습니다.

오래된 프로그램이 저장한 파일을 거부하면 여기에 표시된 SHA-256을 프로그램이 받은 파일과 비교하세요. 일치한다면 그 프로그램이 WebP를 읽지 못하는 것이므로 PNG나 JPEG 사본을 쓰면 됩니다.

자주 묻는 질문