이미지를 데이터 URL로

별도의 이미지 파일 없이 HTML, CSS 또는 JavaScript에 직접 임베드할 수 있는 base64 인코딩 데이터 URL로 모든 이미지를 변환합니다. 데이터 URL은 익숙한 "data:image/png;base64," 접두사로 시작하여 인코딩된 이미지 콘텐츠가 뒤따르는 완전한 이미지 데이터를 인라인으로 포함합니다. 이 기술은 작은 이미지에 대한 HTTP 요청을 제거하여 페이지 로드 성능을 향상시킵니다.

변환은 이미지를 읽고 적절한 MIME 유형 접두사와 함께 base64 문자열로 인코딩합니다. 도구는 결과 문자열 길이를 표시하고 인라이닝이 유익한지 추정합니다. 일반적으로 HTTP 오버헤드가 base64 크기 증가(바이너리보다 약 33% 더 큼)를 초과하는 10KB 미만의 이미지에 대해. 한 번의 클릭으로 전체 데이터 URL을 복사하거나 원시 인코딩 데이터를 기대하는 API를 위해 base64 부분만 복사합니다. 출력 형식 선택(PNG, JPG, WebP)은 MIME 유형과 결과 문자열 크기 모두에 영향을 미칩니다. WebP는 종종 동등한 품질에서 PNG보다 작은 데이터 URL을 생성합니다.

CSS에 아이콘을 임베딩하는 웹 개발자는 중요한 UI 요소에 대한 외부 파일 종속성을 제거합니다. 많은 이메일 클라이언트가 외부 리소스를 차단하기 때문에 이미지를 인라인으로 포함하는 이메일 템플릿 디자이너. 이식성을 위해 모든 자산을 임베딩하는 단일 파일 HTML 문서 제작자. 런타임 자산 로딩을 피하기 위해 코드와 함께 그래픽을 번들링하는 JavaScript 개발자. 임베디드 이미지가 있는 자체 포함된 문서나 코드가 필요한 모든 사람은 데이터 URL 변환이 필수적임을 발견할 것입니다. 모든 처리는 로컬에서 발생합니다. 민감한 이미지가 브라우저를 떠나지 않습니다.