데이터 URL로 그림 보이기 ※ 속도 비교

이 기사는 Qita에 기고한 것이다.최종 업데이트: 2021년 09월 03일
일반적으로 이미지를 표시할 때<img src="./img/hoge.png">,<img src="http://example.com/hoge.png"> 따위는 해야 하지만 HTML과 CSS 파일에 직접 데이터를 쓰는 방법이 있기 때문에 해봤습니다.

방법

HTML 포함

<img src="data:[<mediatype>][;base64],<data>">그림은 보통base64 인코딩입니다.<mediatype>부분은 이른바 MIME 유형을 넣었다.대표적인 것은 다음과 같다.
파일 형식
MIME 유형
PNG
image/png
JPEG
image/jpeg
GIF
image/gif
WebP
image/webp
AVIF
image/avif
APNG
image/apng
SVG
image/svg+xml<data>에서 base 64 인코딩 이미지를 사용합니다.그림파일에서 온라인이나 명령줄을 적당히 사용해서 변환하십시오.예를 들어 Mac/Linux라면 베이스 64 명령에 이미지 파일을 base64 hoge.png > hoge_base64.txt처럼 건네주면 됩니다.
예.pg 이미지를 포함할 때

<img src="data:image/png;base64,iVBORw0KGgoAAAA(以下省略)">

또한 SVG 파일을 삽입하면base64 이외에 백분율 인코딩된 xml 파일을 사용할 수 있다.이 경우 다음과 같습니다.

<img src="data:image/svg+xml,%3Csvg%20version%3D%221.1%22(以下省略)">

CSS 포함

CSS에 같은 방법으로 삽입할 수도 있습니다.예컨대

.hoge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAA……");
}

와 같이 url()에 데이터 URL을 지정할 수 있습니다.

외부 파일의 읽기 및 속도 비교

표시Qiita용 가정용 컴퓨터.repl.it 의 Starter 프로그램 에서 위탁 관리 페이지를 검증하고 Google PageSpeedInsights 에서 '최대 내용의 그리기' 를 측정하는 데 걸린 초수를 3회 측정하여 평균치를 얻었다.
file
data URL
시험을 준비하다
time(s)
1.0/0.3
0.8/0.2
모바일/컴퓨터 형식
filesize(KB)
3.86
5.15
파일 크기가 증가했지만 그리기 전의 시간이 단축되었습니다.서버와 고객 환경에 따라 결정되지만 고속화 효과가 있는 것 같다.

장점과 단점

장점

읽기 속도가 다소 빨라졌습니다.

JavaScript에서 생성한 이미지를 표시할 수 있습니다.예를 들어 toDataURLMDN을 사용하여 Canvas를 데이터 URL로 변환한 다음 DOM에 삽입하면 이미지 파일로 다운로드할 수 있다.(단, 이 경우에도 Blob로 대체할 수 있음)

결점

브라우저가 문자 수에 제한이 있을 경우(예를 들어 Opera11에서 인코딩된 문자열은 최대 65529자) 가벼운 파일에만 적용됩니다.

HTML 파일이 길어지고 서비스가 저하됩니다.예를 들어 접기 기능이 없는 편집기에서 볼 수 밖에 없는 경우 미치게 될 것이다.

데이터 전송량이 증가하다.

총결산

데이터 URL을 사용하여 HTML에 이미지를 포함할 수 있습니다.빠르기는 하지만 나쁜 점도 많아 활용할 점을 고려해야 한다.다만, JavaScierpt에서 생성한 이미지를 동적으로 삽입하는 것은 매우 효과적인 방법입니다.

참고 자료

인라인 이미지에 HTML이 포함된 데이터 URL 스키마 at softtel 노트

데이터 링크 - HTTP | MDN