Back

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

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

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

Step1 - Image to base64 code

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

별거없습니다.. 그냥 내 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로 표현하기에는 아주 좋은 방법이나 약간의 문제점이 있습니다.

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

Licensed under CC BY-NC-SA 4.0
Last updated on Jul 10, 2021 01:05 +0900