이미지를 텍스트로 변경하기 - Base64 Image Encoder

#1961

JPG, PNG, GIF, WebP, SVG, BMP 등의 이미지를 Base64 형식의 문자 코드로 변환시켜주는 서비스로 가끔씩 사용하긴 하지만 유용한 서비스입니다.

서비스 첫 화면

Base64 Image Encoder

Browser Support를 보시면 알겠지만, Base64의 브라우저 지원에 대한 걱정을 할 수준은 아닙니다. 상황에 따라 사용할지 말지를 정하면 되는데요. 개인적으로 사용하는 방식은 사용자가 등록하거나, 개발에서 동적으로 이미지를 다루어야 할 때 가끔씩이지만 이미지를 그대로 사용할 수 없을 때에 사용하곤 합니다.

자주 사용하기 곤란한 이유 중에 하나는 이미지를 수정한 뒤에는 당연히 해당 소스도 변경을 해주어야 하는 만큼 유지보수에 드는 작업 코스트가 올라가기 때문입니다. 따라서 수정이 필요 없는 로고나 일부 이미지에서 사용되는 편입니다. 최근에는 로고의 경우 SVG를 많이 사용하는 편이기 때문에 그나마도 사용빈도가 현저히 감소하긴 했습니다만..

샘플로 사용한 JPG 이미지

Drag & Drop으로 이미지를 올려도 되고 CLICK HERE 버튼으로 파일을 선택해도 됩니다.

파일을 올리면 변환되는 과정과 함께 변환된 파일의 용량이 표시되며 코드를 사용할 수 있는 show code, copy image, copy css 옵션이 있습니다. 원본 사이즈가 26.14KB인데 변경되면서 34.86KB로 올라가 버렸네요. 평균적으로 원본 이미지보다 적은 사이즈를 기대하기는 힘들 것 같습니다. 비슷한 서비스를 사용해도 눈에 띌 만큼의 압축률을 기대할 수는 없어서 개인적으로는 이 서비스를 주로 사용하고 있습니다.

show code를 선택하면 팝업과 함께 이미지의 썸네일, <img> 요소로 사용 가능한 소스와 CSS에서 사용 가능한 소스가 표시되니 필요한 부분을 복사해서 사용하면 됩니다.

왼쪽: img용 태그 / 오른쪽: CSS용 태그

copy image, copy css 버튼을 선택하면 각 요소에 해당하는 소스를 복사하게 됩니다. 에디터에 붙이면 각각의 소스를 확인할 수 있습니다.

copy image sample

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAMCAgIC...

copy css sample

url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAMCAgICA...