두 API의 스펙은 MDN Data URL 문서와 MDN URL.createObjectURL 문서를 기준으로 확인했습니다. 실제 선택 기준은 img-compressor 코드가 두 방식을 각각 어디에 쓰는지로 비교합니다.
둘 다 “파일을 문자열 URL처럼 다루게” 해 준다
Data URL과 Blob URL은 목적이 비슷합니다. 둘 다 <img src>나 <a href>에 넣을 수 있는 문자열을 만들어, 서버에 파일을 올리지 않고도 브라우저 안에서 파일 내용을 참조할 수 있게 합니다. 차이는 그 문자열이 실제로 무엇을 담고 있는가에 있습니다.
| Data URL | Blob URL | |
|---|---|---|
| 만드는 방법 | FileReader.readAsDataURL(file) | URL.createObjectURL(file) |
| 실제 내용 | 파일 전체를 base64로 인코딩한 문자열 자체 | 브라우저 메모리 안의 파일을 가리키는 참조 문자열 |
| 문자열 길이 | 원본 크기에 비례해 길어짐 (약 1.37배) | blob:https://... 형태로 항상 짧음 |
| 정리 필요 여부 | 필요 없음 (참조를 놓으면 GC 대상) | URL.revokeObjectURL()로 명시적 해제 필요 |
| 비동기 여부 | 비동기 (FileReader 이벤트) | 동기 (즉시 문자열 반환) |
img-compressor는 Canvas 입력에는 Data URL을 쓴다
browser-image-processing.ts는 Canvas에 그릴 이미지를 준비할 때 FileReader.readAsDataURL을 씁니다.
reader.onload = (event) => {
const image = new Image();
image.onload = () => { /* canvas.drawImage(...) */ };
image.src = event.target?.result as string;
};
reader.readAsDataURL(file);이 지점에서는 이미지가 로드되고 나면 Data URL 문자열이 더 필요 없습니다. Image가 디코딩을 끝내면 문자열은 그냥 버려도 되는 일회성 값이라, revokeObjectURL 같은 별도 정리 코드가 필요 없는 Data URL 쪽이 코드를 단순하게 유지합니다.
결과 미리보기·다운로드에는 Blob URL을 쓴다
반면 압축이 끝난 결과를 화면에 계속 보여주고, 사용자가 다운로드 버튼을 여러 번 누를 수도 있는 결과 카드는 URL.createObjectURL을 씁니다.
const url = URL.createObjectURL(resizedFile);
// ...
images.forEach((image) => {
URL.revokeObjectURL(image.url);
if (image.webpUrl) URL.revokeObjectURL(image.webpUrl);
});결과 카드는 사용자가 화면을 스크롤하거나 다른 작업을 하는 동안 계속 살아 있어야 하는 값입니다. 이런 값을 매번 base64 문자열로 들고 있으면 여러 장을 처리할수록 메모리에 큰 문자열이 계속 쌓이지만, Blob URL은 실제 데이터를 브라우저 내부에 한 번만 저장하고 짧은 참조만 문자열로 돌려주므로 여러 결과를 동시에 유지하는 화면에 더 적합합니다. 다만 이 참조는 자동으로 해제되지 않으므로, 카드를 삭제하거나 화면을 초기화할 때 revokeObjectURL을 호출하지 않으면 메모리에 남습니다. 정리 시점과 실패 사례는 Object URL 메모리 누수 가이드에서 자세히 다룹니다.
선택 기준 요약
- 결과를 만들자마자 한 번 쓰고 버릴 값(예: Canvas에 그리기 위한 임시 소스)이라면 Data URL이 간단합니다.
- 결과를 화면에 계속 보여주거나, 사용자가 나중에 다시 참조할 수 있어야 한다면 Blob URL이 메모리 관리에 유리합니다.
- Blob URL을 쓴다면 정리 로직(개별 삭제, 전체 삭제, 언마운트)을 반드시 함께 설계해야 합니다.
- 다운로드 링크의
href에 넣을 값도 대부분 Blob URL 쪽이 자연스럽습니다. 다운로드 흐름 전체는 파일 다운로드 방법 총정리에서 확인할 수 있습니다.
확인해 봐야 할 것
두 방식을 같은 화면에서 섞어 쓸 때는 어떤 URL이 언제 만들어지고 언제 필요 없어지는지부터 정리해야 합니다. Data URL을 결과 미리보기에 그대로 쓰면 메모리 사용량이 파일 크기에 비례해 늘어나는지, Blob URL을 임시 변환에 쓰면 해제를 잊어버리지 않는지를 직접 여러 파일로 테스트해 확인하는 편이 안전합니다.
