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

JPG 파일은 사진이고, 사진은 큽니다. 이 사실 하나만으로도 아이콘을 인코딩할 때와는 계산이 달라집니다. 200 KB짜리 사진은 대략 267 KB의 텍스트가 되고, 브라우저는 그것을 전부 내려받아 메모리에 담고 디코딩한 뒤에야 무언가를 보여 줄 수 있습니다. 대부분의 웹사이트에서 이는 나쁜 거래입니다. 다만 정확히 옳은 선택이 되는 상황이 세 가지 있습니다.

JPG를 Base64로 변환하는 방법

1. 1 .jpg 또는 .jpeg 파일을 업로드 영역에 놓으세요.
2. 2 도구가 보여 주는 용량 줄을 확인하세요. 인라인이 합당한지를 결정하는 숫자가 바로 그것입니다.
3. 3 HTML과 CSS에는 데이터 URI를, JSON에 넣을 거라면 원시 문자열을 복사하세요.

일반적인 웹페이지에서는 대개 실수입니다

평범한 이미지 태그는 브라우저가 사진을 병렬로 가져오고, 몇 달씩 캐시하고, 화면 아래에 있으면 아예 건너뛰고, 휴대폰에서는 더 작은 버전으로 바꿔 넣게 해 줍니다. 인라인은 이 네 가지를 한꺼번에 버리는 일입니다. 이제 사진은 HTML이나 CSS 안에 담겨 첫 렌더링을 막고, 따로 캐시되지 못하며, 거기까지 스크롤하지 않는 방문자에게도 내려받아지고, 4K 모니터에서든 저가 휴대폰에서든 똑같습니다. 사진이 클수록 이 각각의 대가가 커집니다.

옳은 선택이 되는 세 가지 경우

첫째는 이메일 템플릿입니다. 많은 클라이언트가 외부 이미지를 기본적으로 차단하므로, 확실히 보이는 것은 인라인된 사진뿐입니다. 둘째는 아주 작은 자리표시자입니다. 일부러 흐리게 만든 수백 바이트짜리 이미지를 인라인해, 진짜 사진이 로드되는 동안 무언가 보이게 하는 것이죠. 셋째는 텍스트만 받는 시스템으로 그림을 통과시킬 때입니다. JSON API, 웹훅 페이로드, 데이터베이스 컬럼, 메시지 큐 같은 것들 말입니다. 세 경우 모두 대안은 "더 빠른 이미지"가 아니라 "이미지 없음"입니다.

인코딩하기 전에 사진을 줄이세요

Base64는 무엇을 건네받든 의견이 없습니다. 3 MB짜리 휴가 사진도 썸네일과 똑같이 충실하게 키웁니다. 그러니 순서를 지켜 작업하세요. 실제로 보여 줄 크기로 자르고, 차이가 보이지 않을 때까지 JPG 품질을 낮춘 다음, 그때 인코딩하세요. 400픽셀 너비로 보여 줄 사진을 4000픽셀로 인코딩할 이유는 없습니다. 그러고도 결과가 수백 킬로바이트라면, 그건 파일에 링크를 걸라는 신호입니다.