그림을 삽입하면 해당 바이트가 HTML, CSS 또는 다른 문서 안에 저장됩니다. 작은 아티팩트를 독립적으로 만들 수 있지만 이미지를 해당 문서의 전달 및 캐싱에 연결하기도 합니다. URL 수가 적을수록 페이지 속도가 더 빨라진다고 가정하기보다는 전체 작업 흐름을 기반으로 결정하세요.
올바른 래퍼 빌드
PNG 이미지 데이터 URI은 다음으로 시작됩니다. data:image/png;base64,, 그 뒤에 원본 파일의 Base64 표현이 옵니다. JPEG에는 다음이 필요합니다. image/jpeg; WebP 필요 image/webp. MIME 유형의 이름을 바꾸면 바이트가 변환되지 않습니다. 수신기에 JPEG이 필요한 경우 데이터 URI을 구축하기 전에 이미지를 다시 인코딩하세요.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">위의 자리 표시자는 작업 이미지가 아닙니다. 이를 인코더의 전체 출력으로 교체합니다. 출력에 이미 다음이 포함된 경우 data: 접두사를 추가하지 마세요. 주변 따옴표의 균형을 유지하고 서식 있는 텍스트 편집기에서 줄바꿈이 발생하지 않도록 하세요.
실제 크기를 계산해 보세요
인코딩된 부분에는 3개의 입력 바이트마다 4개의 문자가 필요하며 전체 그룹으로 반올림됩니다. Data URI 접두사는 조금 더 추가됩니다. 30,000바이트 파일의 경우 페이로드만 40,000자입니다. HTML 압축으로 인해 전송된 크기가 변경될 수 있지만 브라우저는 여전히 문서를 구문 분석하고 이미지를 디코딩해야 합니다. 소스 파일뿐만 아니라 실제 페이지를 측정합니다.
별도로 제공되는 이미지는 페이지 전체에서 독립적으로 캐시되고 재사용될 수 있습니다. 포함된 이미지는 이를 포함하는 모든 문서에 연결됩니다. 따라서 큰 반복 일러스트레이션은 자동 인라인 처리에 적합하지 않습니다. 자체 포함된 보고서에 있는 작은 일회성 아이콘은 합리적인 절충안이 될 수 있습니다.
목적지를 확인하세요
콘텐츠 보안 정책은 다음을 제한할 수 있습니다. data: 이미지. 이메일 클라이언트는 포함된 콘텐츠를 제거하거나 거부할 수 있습니다. 브라우저에서 미리 보는 파일은 수신자의 응용 프로그램이 해당 파일을 표시한다는 것을 증명하지 않습니다. 지원해야 하는 정확한 내보내기, 이메일 클라이언트 또는 다운스트림 시스템을 테스트하십시오.
임시 로컬 미리 보기의 경우 Blob URL은 큰 Base64 문자열 생성을 방지하는 경우가 많습니다. 해당 뷰가 제거되면 URL을 취소합니다. 내보낸 독립 실행형 HTML의 경우 데이터 URI이 적합할 수 있습니다. 두 경우 모두 대체 텍스트와 치수를 유지합니다. 구문 및 브라우저 고려 사항은 다음에서 다룹니다. MDN: 데이터 URL.