WebP를 Base64로 변환 - 무료, 즉시, 브라우저에서

WebP는 애초에 작은 쪽입니다. PNG로는 40 KB일 파일이 WebP에서는 흔히 15 KB 안팎에 머무릅니다. 즉 Base64가 더하는 33%가 절대량으로는 다른 어떤 형식보다 덜 아픕니다. 그래서 WebP는 인라인 후보로 유난히 좋습니다. 크기와는 무관한 걸림돌 하나만 빼면요.

WebP를 Base64로 변환하는 방법

1. 1 .webp 파일을 업로드 영역에 놓으세요.
2. 2 인코딩된 형태들이 변환 전후 용량과 함께 곧바로 나타납니다.
3. 3 맞는 형태를 복사하세요. 데이터 URI, 원시 문자열, 또는 CSS 규칙입니다.

인라인은 대체 경로를 없앱니다

WebP를 제공하는 일반적인 방법은 picture 요소로 WebP를 먼저, JPG나 PNG를 그다음에 두어 각 브라우저가 이해하는 쪽을 가져가게 하는 것입니다. 데이터 URI는 그렇게 할 수 없습니다. 단일 미디어 타입을 가진 하나의 문자열일 뿐이라, WebP를 디코딩하지 못하는 브라우저는 그냥 아무것도 보여 주지 않습니다. 오늘날 지원 범위가 아주 넓어 열린 웹에서는 이 문제가 드물게 나타나지만, 이메일 클라이언트와 오래된 내장 브라우저, 낡은 엔진으로 HTML을 그리는 데스크톱 앱에서는 분명히 걸립니다.

잘 맞는 곳

실행 환경을 여러분이 통제하고 WebP가 디코딩된다는 것을 아는 모든 곳입니다. 내부 대시보드, 관리자 패널, 브라우저 확장, Electron 앱, 최신 환경만을 대상으로 하는 디자인 시스템 같은 곳이죠. 그런 자리에서는 WebP의 압축과 추가 요청 없음을 동시에 얻습니다. 인라인이 도달할 수 있는 거의 최상의 상태입니다. 반면 방문자의 몇 분의 1 퍼센트도 여전히 중요한 공개 마케팅 페이지라면 picture 요소와 평범한 파일을 택하세요.

더 큰 손실은 여전히 캐시입니다

WebP 파일이 작다 보니 여러 장을 인라인하고 싶어집니다. 두 번째 비용이 불어나는 지점이 바로 거기입니다. 인라인된 이미지는 모두 스타일시트 안에 살기 때문에, CSS 한 줄만 바뀌어도 전부가 한꺼번에 무효가 되고 방문자는 그 묶음 전체를 다시 내려받습니다. 작은 이미지 열 장을 인라인하는 것은 캐시된 파일 열 개보다 나빠지기 쉽습니다. 개수는 적게, 하나하나는 정말로 작게 유지하고, 나머지는 브라우저가 캐시해 여러 페이지에서 재사용할 수 있는 평범한 파일로 두세요.