Data URI

Data URI (Data URLs scheme)은 웹페이지에 데이터를 인라인으로 포함하는 방법이다

작은 이미지나 파일과 같은 정보를 (HTML, JS, CSS)에 직접 사용할수있게 해준다.

이는 서버에 요청하지 않고도 이미지를 사용할 수 있게 한다.

DataURL은 일반적으로 작은 이미지를 문서에 인라인으로 삽입하는 데 사용되며 아래와 같은 구조를 가진다:

data:[<mediatype>][;base64],<data>

여기서 data:로 시작하며 ,으로 실제 데이터와 구분된다.

예를 들어, "Hello, World!"를 변환하면 다음과 같다

data:,Hello%2C%20World!   // ,을 생략시 기본값 text/plain;charset=US-ASCII
data:text/plain;base64Code,SGVsbG8sIFdvcmxkIQ%3D%3D

DataURL은 데이터 길이 제한이 있을 수 있으며, 쿼리 문자열은 지원하지 않는다. 이미지를 다룰 때 자주 사용되며,

다음과 같이 HTML, CSS, JavaScript에서 사용될 수 있다:

HTML:

<!-- html -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQoU2NkYGD4z0AEYBxViC+UqB88AKk6CgERnGWPAAAAAElFTkSuQmCC" />

CSS:

<style>
/* css */
body {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQoU2NkYGD4z0AEYBxViC+UqB88AKk6CgERnGWPAAAAAElFTkSuQmCC')
}
</style>

JavaScript:

<script>
// js
var img = new Image();
img.addEventListener('load', () => {
    // 캔버스에 그리기
    var ctx = document.querySelector('canvas').getContext('2d');
    ctx.drawImage(img, 0, 0);
});
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQoU2NkYGD4z0AEYBxViC+UqB88AKk6CgERnGWPAAAAAElFTkSuQmCC"
</script>

그러나 문서에 이미지가 포함되기 때문에 이미지 파일을 캐시할 수 없어 성능에 영향을 미칠 수 있으므로 사용 방법에 따라 성능에 좋거나 약한 영향이 있을 수 있다.

---

참조

DataURI참조

MDN설명