[HTML] data URL Scheme를 이용한 html 내 이미지 나타내기

vais 툴 개발중에 로고 이미지를 파일로 가져가지 않고 페이지에 넣는 방법에 대해 고민이였습니다.
물론 data URL Scheme를 이용한 방법이 적합하다고 생각되어 오래가지는 않았지만요.

오늘은 제가 개인적으로 좋아하는 data URL Scheme를 이용해서 <img> 태그에서 외부 이미지를 참조하지 않고 이미지를 나타내는 방법에 대해 알아보겠스니다. (data URL Scheme가 웹 해킹 시 은근히 유용하다는..)

Step1 - Image to base64 code

data URL Scheme에 데이터를 집어넣는 방법에는 여러가지가 있는데 대표적으로 base64로 인코딩한 방법과 url 인코딩을 통한 데이터 삽입이 있습니다. 이중에서 output이 상대적으로 짧은 base64가 효율적이기 때문에 base64를 <img> 태그 내 src에 넣어보죠.

먼저 이미지를 코드화해야합니다. 리눅스에서 기본 명령인(없으면 설치해주시고..) base64 명령을 통해 파일,이미지,음악 등 파일을 base64 형태로 변환할 수 있습니다.

#> base64 vais.png
iVBORw0KGgoAAAANSUhEUgAAANgAAACtCAYAAADSz7GfAAAAAXNSR0ICQMB9xQAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZp
Y2V/7TVxAAAWJklEQVR4Xu2df3AV13XHL6SWCWAHnASLmGDLTkAUOkXQ8mOGjCH5w6JtYlMnNZpp
YxG32O4kRbSTsXAby7TTIJo0iDQDeDwZY7dT7IwbbNczxn80mJIZIBkjy05GxgkWru0Kk8TgFPM7
qPvdd5+07767u3f37d23u+/7mVl09+np6emx3z3nnnPuueNGHAQhxArj5VdCiAUoMEIsQoERYhEK
jBCLUGCEWIQCI8QiFBghFqHACLEIBUaIRSgwQixCgRFiEQqMEItQYIRYhAIjxCIUGCEWocAIsQgF
RohFKDBCLEKBEWIRCowQi1BghFiEAiPEIhQYIRahwEgkXn31VfHCCy+I48ePy0dIEBQYCeXcuXNi
586dYs6cOe6xYsUKMX36dNHX1yefQfxgZ1+i5aWXXhKnTp0SBw8eFFu3bvW1WP39/WL+/PnyjKjQ
gpFRYKVaWlrEuHHjRFtbm2upNmzYEOgOwl0k/uRaYJgP4ALo6Ohw77gkPvgc16xZI44dOyYfMQPu
IwkALmLeOHDgwMiSJUvg2lYcPT098hkkCsPDwyMTJkyo+jzDjubm5pGzZ8/KVyE6cmXBcLfEnXbp
0qXu3EDl6aefliMSBbh5cSzRli1bhCNMeUZ05EZgTz31lBvB6u3tlY9UAzeRLkt0orqFoL29Xaxe
vVqeET8yLzDcXTHZXrVqldGFwLlYdKLelGC1tm/fLs9IEJkVGMS0cuVKV1xRIlU615Eky3333Sdu
[....]

위처럼 base64로 바꿔주면.. 아주 긴 코드가 나타납니다. (아무래도 이미지 바이너리이기 때문에 굉장히 문자가 많이 필요하죠.)

Step2 - <img> tag에 삽입하기

별거없습니다.. 그냥 <img> 내 src 구간에 data URL Scheme 를 명시하고 인코딩을 base64로 지정한 후 넣어주시면 이미지가 잘 출력됩니다.

data:image/png;base64,[데이터값!]

간략하게 풀어서 보면 data: 로 data URL Scheme 를 명시하고, type을 image/png로 나타내준 후 어떤 인코딩이 되었는지 웹에게 알려줍니다.
우리는 base64니깐 base64로 넘겨주고 인코딩된 데이터를 넘겨주시면 됩니다.

한줄로 다시 표현하면..


<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAACtCAYAAADSz7.......">

요런식이 되겠죠.

위 같은 방식으로 표현했을 땐 이미지 파일을 따로 두지 않고 하나의 html 파일에서 데이터를 불러올 수 있습니다.
하나의 html로 표현하기에는 아주 좋은 방법이나 약간의 문제점이 있습니다.

성능적인 이슈에선 좀 큰 부분이긴 합니다. 캐시되지 않기 때문에 매번 요청마다 이미지 크기만큼의 데이터를 불러와야해서
파일을 따로 두고 불러오는 형태보단 성능이 떨어지게됩니다.