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

PNG는 사람들이 가장 자주 인라인하는 형식입니다. 아이콘, 로고, 작은 스프라이트처럼 그러지 않으면 각각 별도의 네트워크 요청을 잡아먹을 자잘한 인터페이스 조각들이죠. 이것을 Base64로 인코딩하면 스타일시트나 HTML 속성에 곧바로 붙여넣을 수 있는 텍스트가 됩니다. 그게 좋은 생각인지는 거의 전적으로 파일이 얼마나 작은지에 달려 있습니다.

PNG를 Base64로 변환하는 방법

1. 1 .png 파일을 업로드 영역에 놓으세요.
2. 2 결과가 즉시 나타납니다. 누를 버튼도, 기다릴 것도 없습니다.
3. 3 필요한 형태를 복사하세요. HTML과 CSS용 데이터 URI, JSON용 원시 문자열, 또는 바로 쓸 수 있는 CSS 규칙입니다.

인라인이 실제로 이득인 경우

페이지의 이미지 하나하나가 요청을 소모하고, 요청에는 실어 나르는 바이트를 넘어서는 부대 비용이 있습니다. 1 KB짜리 아이콘이라면 그 부대 비용이 파일 자체보다 클 수도 있습니다. 그래서 스타일시트 안으로 접어 넣는 것은 진짜 이득입니다. 대략적인 기준으로, 몇 킬로바이트 미만에서는 인라인이 도움이 되고 10 킬로바이트를 넘어가면 해가 되기 시작합니다. 손익분기점은 고정된 숫자가 아니라 회선과 서버, 대역폭을 두고 경쟁하는 다른 자원의 수에 따라 움직입니다. 다만 거래의 성격은 늘 같습니다. 왕복 한 번을 여분의 바이트와 맞바꾸는 것입니다.

무엇을 포기하게 되는가

세 가지인데, 두 번째가 사람들을 놀라게 합니다. 첫째는 용량입니다. 인코딩된 텍스트는 파일보다 약 3분의 1 큽니다. 둘째는 캐시입니다. 인라인한 이미지는 따로 캐시할 수 없어서, 그것을 담고 있는 스타일시트가 바뀔 때마다 다시 내려받게 됩니다. 그리고 스타일시트는 로고보다 훨씬 자주 바뀝니다. 셋째, 브라우저는 그리기 전에 문자열을 디코딩해야 합니다. 아이콘이라면 사소하지만 큰 것이라면 측정될 만큼입니다. 투명도만큼은 그대로 남습니다. 알파 채널은 PNG 데이터의 일부이고 Base64는 그것을 바이트 단위로 복사합니다.

아이콘이라면 SVG를 먼저 고려하세요

인코딩하려는 것이 평면 아이콘이나 단순한 로고라면, SVG는 대개 인코딩 전에도 PNG보다 작고 인코딩 후에는 차이가 더 벌어집니다. SVG는 이미 텍스트라서 Base64가 아예 필요 없기 때문입니다. 게다가 두 번째 파일 없이도 어떤 화면 밀도에나 맞춰집니다. 사진 같은 디테일이나 부드러운 그러데이션, 벡터가 잘 못 다루는 효과가 있을 때 PNG를 쓰세요. 그리고 그럴 때는 인코딩한 뒤가 아니라 인코딩하기 전에 작게 만드세요. Base64는 건네받은 것이 무엇이든 충실히 키웁니다.