base64로 이미지를 인코딩하면 어떤 효과가 있습니까?

96

이미지 (jpg 또는 png)를 base64로 변환하면 더 커질까요, 아니면 같은 크기일까요? 얼마나 클까요?

내 웹 사이트에서 base64로 인코딩 된 이미지를 사용하는 것이 좋습니까?

— 대니 폭스
소스

1

이와 같은 작업을하고 싶은 유일한 경우는 일반 텍스트 리소스로 제한되어 있고 어떤 이유로 원시 이미지 형식을 사용할 수없는 경우입니다.

— Wug

여기에 좋은 대답이 있습니다 : stackoverflow.com/questions/1533113/…

— Steed

base64는 딥 링크를 불가능하게 만듭니다. 이것은 플러스가 될 수 있습니다.

— damoeb

@Wug-이것이 늦게 회신하고 상황이 변경되었음을 알고 있지만 확실히 bas64를 전송하여 성능을 향상시킬 수있는 시간입니다. base64로 인코딩 된 이미지 (작은 이미지)가있는 웹 소켓을 통해 메시지를 보내는 것이 각 이미지를 자체적으로 요청하는 것보다 성능이 더 좋습니다.

— 필립

좋은 질문입니다. "이진 이미지 저장 또는 base64 인코딩"에 대한 좋은 답변을 찾고있었습니다. 나는 몇 가지 좋은 답변을 찾을 이와 같은

— moreirapontocom

132

약 37 % 더 커집니다.

대략적으로 Base64로 인코딩 된 바이너리 데이터의 최종 크기는 원래 데이터 크기의 1.37 배입니다.

출처 : http://en.wikipedia.org/wiki/Base64

— 블렌더
소스

28

137 % 더 크지 않고 원본 크기의 137 % :-) 37 % 더 큽니다 (소스에 따라 다름).

— Eric J.

4

나는 그것이 원래 크기의 거의 4/3라고 말할 것입니다.

— kiwixz

이미지를 base64로 변환하는 이미지 크기에 대한 제한이 있습니까?

— 151291

2

@Blender하지만 내 경우에는 70kb 비트 맵을 문자열로 변환하면 500kb가됩니다. 37 %가 아닙니다. 5mb 이미지를 70kb로 압축 한 다음 압축 된 이미지를 500kb가되는 문자열로 변환했습니다.

— KJEjava48

@ KJEjava48 : 어떻게 문자열로 변환합니까?

— Blender

16

다음 은 David Calhoun 이 base64로 인코딩 할 때와하지 않을 때에 대한 정말 유용한 개요입니다 .

기본 답변 = gzip으로 압축 된 base64 인코딩 파일은 파일 크기가 표준 바이너리 (jpg / png)와 거의 비슷합니다. Gzip 바이너리 파일은 파일 크기가 더 작습니다.

테이크 아웃은 = 등, 인코딩 및 UI 아이콘을 Gzip으로 압축 몇 가지 장점이 있습니다,하지만 현명하지 못한 큰 사이즈의 이미지에 대해이 작업을 수행 할 수 있습니다.

— 불독
소스

14

base64에서 더 커질 것입니다.

Base64는 데이터를 인코딩하기 위해 바이트 당 6 비트를 사용하는 반면 바이너리는 바이트 당 8 비트를 사용합니다. 또한 Base64에는 약간의 패딩 오버 헤드가 있습니다. 이진이 아닌 데이터 만 올바르게 처리 할 수있는 시스템에서 이진 데이터를 인코딩하기 위해 처음 개발 되었기 때문에 모든 비트가 Base64와 함께 사용되는 것은 아닙니다.

즉, 인코딩 된 이미지가 약 25 % 더 커지고 패딩에 대한 지속적인 오버 헤드가 발생합니다.

— 에릭 J.
소스

7

이미지를 base64로 인코딩하면 이미지가 약 30 % 더 커집니다.

데이터 URI 스킴 에 대한 wikipedia 문서의 세부 사항을 참조하십시오 .

Base64로 인코딩 된 데이터 URI는 해당 바이너리보다 크기가 1/3 더 큽니다. (단, HTTP 서버가 gzip을 사용하여 응답을 압축하면이 오버 헤드가 2-3 %로 감소합니다.)

— 오데드
소스

7

대답은 다음과 같습니다 .

base64 이미지는 더 크지 만 base64가 더 나은 선택 인 몇 가지 조건이 있습니다.

base64 이미지의 크기

Base64는 64 개의 다른 문자를 사용하며 이는 2 ^ 6입니다. 따라서 base64는 8 비트 문자 당 6 비트를 저장합니다. 따라서 비율은 변환되지 않은 데이터에서 base64 데이터로의 6/8입니다. 이것은 정확한 계산이 아니라 대략적인 추정치입니다.

예:

48kb 이미지는 base64 변환 이미지로 약 64kb가 필요합니다.

계산 : (48/6) * 8 = 64

Linux 시스템의 간단한 CLI 계산기 :

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

또는 이미지 사용 :

$ cat my.png|base64|wc -c

Base64 이미지 및 웹 사이트

이 질문은 대답하기가 훨씬 더 어렵습니다. 일반적으로 base64를 사용하면 이미지가 클수록 의미가 없습니다. 그러나 다음 사항을 고려하십시오.

HTML 파일 또는 CSS 파일에 포함 된 많은 이미지는 유사한 문자열을 가질 수 있습니다. PNG의 경우 자주 반복되는 "A"문자를 찾습니다. gzip ( "deflate"라고도 함)을 사용하면 크기가 이길 수도 있습니다. 그러나 이미지 내용에 따라 다릅니다.
HTTP1.1의 요청 오버 헤드 : 특히 쿠키가 많은 경우 요청 당 몇 킬로바이트의 오버 헤드를 쉽게 가질 수 있습니다. base64 이미지를 포함하면 대역폭을 절약 할 수 있습니다.
gzip은 base64보다 XML에서 더 효과적이므로 SVG 이미지를 base64로 인코딩하지 마십시오.
프로그래밍 : 동적으로 생성 된 이미지에서는 두 개의 종속 요청을 조정하기 위해 하나의 요청으로 이미지를 전달하는 것이 더 쉽습니다.
딥 링크 : 이미지 다운로드를 방지하려면 HTML 페이지에서 이미지를 추출하는 것이 약간 까다 롭습니다.

— Trendfischer
소스

3

base64로 인코딩 된 이미지를 사용하려면 더 많은 공간과 대역폭이 필요합니다. 그러나 사이트에 작은 이미지가 많이있는 경우 이미지를 base64로 인코딩하고 html에 배치하여 페이지 로딩 시간을 줄일 수 있습니다. 이런 식으로 클라이언트 브라우저는 이미지에 많은 연결을 할 필요가 없지만 html로 표시됩니다.

— Brad Larson
소스

그러나 HTTP 2가 실제로 전달되면 문제가되지 않습니다.

— 필립

@Philip 사실이지만 HTML 파일에 모든 리소스가 포함 된 이식성 요소가 마음에 듭니다. 이는 네트워크가 불안정한 영역에서 모바일 웹 캐싱에 도움이됩니다.

— aalaap

@aalaap 문제는 페이지에서 한 번만 변경하면 이미지를 포함한 모든 콘텐츠를 다시로드해야한다는 것입니다. 자산이 분리 된 경우 해당 자산에 대해 더 높은 연령을 가질 수 있으며 캐시에 저장되고 캐시에 다시로드되지 않고 페이지 자체에서 만료됩니다.

— Philip