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

대답은 다음과 같습니다 .

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 페이지에서 이미지를 추출하는 것이 약간 까다 롭습니다.