Base64 이미지 사용하기

Base64가 뭐지??

“Base 64″란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다.

 

 

Base64 이미지 사용

이 아이콘을 Base64로 인코딩하면 아래와 같은 문자값을 얻을 수 있다.
( https://www.base64-image.de/ )

data:image/gif;base64,R0lGODlhDwAOAPYBAAAAAP///+Pj5MzS6qy33bfA4sDI5dne8I6e0JGg0Zim1Jqo1aGu2H6SyZOj0HWMxYWYytbY3V98vLG801p9ulN6u2SHw0JvtYiix8vU4TBmsDBmrx9fqyJgrEB1uGCOxRpeqoGjygdXpwlYpw5aqBVhrGOUx6C+3N/p8+/0+dzd3gBVpQNWpgtdphBgqxpmqxpnqyBqsDB1tmqbx3CfzJe62Z+/3a/K46/J4r/V6c/f7t/q9AJaoQhcpAlcpVuSwh9sqC10rF+Xv5G20cXY5cba5wxnnZu7zXKfthhxmS6EloezvVqcqFeeqJq+w1SjqYC0sajNysrh3drp4trn4fD49O/18vb6+Pf5+OXs6Pz9/Pv8+////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAPAA4AAAeYgAEBThYVFxocJCwrL4KCW0gIDxIUGyAiKys6jlMhCg0TKhgdI5kzjksGDA4RKgInLpkwglhHAwQJEBmCOrErOAFUNQcFCx4uN4IpMis/AUwrJh8lKy45gjvMLQFPmZkymwG9mT4oVU2ZMSmCNt5ARYJaUDwrNgE03kHrjgFRRisxvAnhx09KEm9DCBLMoqQHEYUKrVyBGAgAOw==

마크업과 css에서 이미지를 넣을 때 이미지 대신 Base64 문자열을 넣어주면 Base64 이미지를 넣을 수 있다.

/* html : 이미지태그 */
<img src="이미지.png" alt="" />
<img src="base64 인코딩 문자" alt="" />

/* css : background */
background:url(이미지.png);
background:url(base64 인코딩 문자);

 

장점

1. 별도 이미지 파일이 필요 없다. 위의 문자열 자체가 이미지이기 때문에 별도 이미지 파일이 없어도 브라우저에서 이미지를 렌더링한다.
2. 브라우저가 이미지를 렌더링할 때, 문서 로딩이 끝난 후에 이미지를 렌더링하기 시작하는데 이미지가 깜박이는 화면이 보이거나 네트워크가 좋지 않을 때 이미지가 로딩되지 않는 때도 있다. 만약 base64로 인코딩한 이미지를 사용하면, 문서를 로딩할 때 base64 이미지도 로딩되기 때문에 그런 현상이 사라진다.

 

단점

1. 용량이 커진다. 위의 아이콘을 예로 들면 571바이트짜리 이미지가 인코딩 후에는 777바이트로 용량이 증가하였다. 약 137% 정도 커진다.
2. 큰 이미지를 인코딩한 경우 어마어마한 길이의 base64 코드로 인코딩되기 때문에 소스의 가독성이 떨어진다.
3. Base64 인코딩 이미지를 많이 사용할 경우, 문서 자체를 로딩하는데 많은 시간이 걸려 자칫 더 느리다는 느낌이 들 수 있다.

 

전체소스

See the Pen jOPGmgd by 최충현 (@nenara) on CodePen.

 

 

 

 

 

 

출처 : https://pilot376.tistory.com/3