데이터 URL 및 Base64 이미지 - 인라인해야 할 때와 하지 말아야 할 때

데이터 URL은 URL 문자열 내에 파일 바이트를 포함하므로 브라우저는 두 번째 네트워크 요청이 필요하지 않습니다. 일반적으로 Base64를 의미하는 이미지의 경우: 바이너리 픽셀은 HTML `src`, CSS `url()` 또는 단일 파일 데모에 존재할 수 있는 ASCII가 됩니다. 인라인은 강력하고 남용하기 쉽습니다. 이 가이드에서는 해부학적 구조, 크기 비용, 승리할 때와 패배할 때, 이미지에서 Base64로의 변환기를 사용하여 개인적으로 문자열을 작성하는 방법을 다룹니다.

데이터 URL 분석

데이터 URL은 `data:[media-type][;base64],payload`라는 고정된 모양을 갖습니다. PNG 아이콘의 경우 'data:image/png;base64,iVBORw0KGgo...'와 같습니다. 미디어 유형은 페이로드를 디코딩하는 방법을 브라우저에 알려줍니다. 선택적인 `;base64` 플래그는 페이로드가 Base64로 인코딩된 바이너리임을 의미합니다. 그것이 없으면 페이로드는 URL로 인코딩된 텍스트입니다(작은 SVG 마크업에는 적합하고 사진에는 어색함).

• 구성표 - 항상 `data:`로 시작합니다.
• 미디어 유형 - 예: `image/png`, `image/jpeg`, `image/webp`, `image/svg+xml` 또는 `text/css`.
• 인코딩 플래그 - 바이너리 이미지 바이트용 `;base64`; 백분율로 인코딩된 텍스트는 생략하세요.
• 페이로드 - 쉼표 뒤의 인코딩된 바이트 또는 텍스트입니다. 공백이 없습니다. 긴 문자열은 정상입니다.

Base64 자체는 일반적인 인코딩(A-Z, a-z, 0-9, +, / 및 = 패딩)입니다. 동일한 알파벳은 JSON, 토큰 또는 파일 바이트를 전달합니다. 이미지가 아닌 임의의 텍스트나 파일의 경우 Base64 인코더/디코더를 사용하세요. 바로 붙여넣을 수 있는 데이터 URL로 변환된 로컬 이미지 파일의 경우 이미지를 Base64로 변환기를 사용하세요. 변환은 브라우저에 그대로 유지됩니다.

~33% 크기 페널티

Base64는 바이너리의 모든 3바이트를 4개의 ASCII 문자로 매핑합니다. 이는 `data:image/...;base64,` 접두사를 계산하기 전에는 ~33% 증가한 것입니다. 30KB PNG는 HTML 또는 CSS에서 약 40KB의 텍스트가 됩니다. Gzip 또는 Brotli는 반복되는 패턴에 약간의 도움이 되지만 세금을 지우지는 않으며 인라인된 자산을 문서와 별도로 캐시할 수 없습니다.

• 바이너리 파일 - 3바이트는 4개의 Base64 문자가 됩니다(~33% 더 큼).
• HTML/CSS 팽창 - 문자열은 이를 포함하는 모든 페이지 응답과 함께 제공됩니다.
• 독립적인 캐시 없음 - 하나의 아이콘을 변경하면 전체 스타일시트 또는 템플릿 캐시가 손상될 수 있습니다.
• 구문 분석 비용 - 거대한 속성과 스타일 블록으로 인해 약한 장치에서 HTML/CSS 구문 분석이 느려집니다.

인라인이 승리할 때

인라인은 대안이 크기 세금보다 더 많은 비용이 드는 왕복 여행이거나 환경이 외부 파일을 금지하는 경우에 유지됩니다.

• 작은 아이콘 및 UI 문자 모양 - 추가 HTTP 요청으로 인해 페이로드가 작아지는 수백 바이트의 PNG 또는 SVG입니다.
• 이메일 HTML 템플릿 - 많은 클라이언트가 원격 이미지를 차단하거나 다시 작성합니다. 작은 데이터 URL 로고는 추적 픽셀 호스트 없이 렌더링될 수 있습니다.
• 단일 파일 데모 및 CodePen 스타일 스니펫 - 자산 폴더 없이 오프라인으로 작동하는 하나의 HTML 파일입니다.
• 중요한 스크롤 없이 볼 수 있는 마이크로 자산 - 렌더링 차단 이미지 요청을 의도적으로 피하는 드문 경우입니다(먼저 측정).

경험 법칙: 자산이 대략 1-2KB 미만이고 한 번 사용된 경우 데이터 URL이 괜찮은 경우가 많습니다. 확실하지 않은 경우 파일로 보관하여 측정해 보세요.

인라인이 손실되는 경우

• 페이지 전체에 걸쳐 캐시할 수 있는 모든 것(로고, 스프라이트, 공유 아이콘)은 파일(또는 스프라이트/SVG 시스템)에 속하므로 브라우저는 이를 한 번 다운로드합니다.
• 사진, 일러스트레이션, 주요 이미지 등 크기가 큰 것은 HTML/CSS를 폭파하고 First Contentful Paint에 해를 끼칩니다.
• 독립적으로 변경되는 자산 - 하나의 파비콘이 변경되었기 때문에 200KB 스타일시트를 다시 게시하고 싶지 않습니다.
• 캐싱이 좋은 HTTP/2 또는 HTTP/3 사이트 - 병렬 요청이 저렴합니다. 이전의 "모든 요청을 피하세요" 조언은 HTTP/1.1보다 약합니다.

HTML img 및 CSS 배경 이미지

HTML에서 전체 데이터 URL을 `src`에 붙여넣습니다.

• `<img src="data:image/png;base64,..." alt="..." width="16" height="16">` - 대체 텍스트를 유지합니다. 레이아웃이 점프하지 않도록 크기를 설정합니다.
• `data:image/svg+xml,...` 형식의 인라인 SVG는 작동하지만 문서의 원시 `<svg>`가 더 명확하고 접근하기 쉬운 경우가 많습니다.
• `src`에 메가바이트 규모의 문자열을 넣지 마십시오. DOM 속성만으로는 편집하고 전달하기가 어렵습니다.

CSS에서는 동일한 문자열이 `url()` 안에 들어갑니다.

• 배경 이미지: url("data:image/png;base64,...");
• `배경`, `목록 스타일 이미지` 및 `마스크 이미지`에 대해 동일한 방식으로 작동합니다.
• 데이터 URL을 포함하는 CSS를 생성한 후에도 CSS Minifier를 통해 스타일시트를 실행하여 주석을 제거하고 공백을 낭비할 수 있습니다. 축소는 Base64를 많이 축소하지 않지만 파일의 나머지 부분을 정리합니다.

CSP 및 캐싱 주의 사항

Content-Security-Policy는 이미지나 스타일에 대해 기본적으로 `data:`를 차단하는 경우가 많습니다. CSP를 강화한 후 아이콘이 사라지면 `img-src`(및 스타일시트 내에서 데이터 URL을 사용하는 경우 `style-src` / `style-src-elem`)를 확인하세요. `data:`를 허용하면 공격 표면이 약간 넓어집니다. CSP가 엄격하게 유지되어야 하는 경우 외부 파일을 선호합니다.

• 캐싱 - 인라인 바이트는 HTML 또는 CSS 문서의 캐시 수명을 상속합니다. 자산별 `Cache-Control` 및 CDN 에지 캐싱이 손실됩니다.
• 서비스 작업자 - 이미지가 포함된 거대한 HTML 셸은 작은 HTML 파일과 해시된 자산보다 외과적으로 업데이트하기가 더 어렵습니다.
• 이메일 - 데이터 URL은 일부 클라이언트에는 도움이 되지만 다른 클라이언트에는 실패합니다. 캠페인을 출시하기 전에 항상 주요 고객을 테스트하십시오.
• 개인 정보 보호 - ToolsMinify를 사용하여 로컬로 변환하면 이미지가 업로드되지 않습니다. 이는 스크린샷과 아직 출시되지 않은 UI에 중요합니다.

자주 묻는 질문

Base64 암호화인가요?

아니요. Base64는 암호화가 아니라 인코딩입니다. 누구나 해독할 수 있습니다. 데이터 URL에 비밀을 입력하지 마세요.

내 사이트 로고를 데이터 URL로 인라인해야 합니까?

일반적으로 로고가 여러 페이지에 나타나는 경우에는 그렇지 않습니다. 캐시된 `/logo.svg`는 한 번 다운로드됩니다. 로고가 작고 일회성 컨텍스트(예: 단일 이메일)로 사용되는 경우에만 인라인으로 사용됩니다.

데이터 URL이 핵심 웹 바이탈에 도움이 됩니까?

때로는 하나의 작은 중요한 아이콘의 경우도 있습니다. 종종 HTML을 부풀릴 때 상처를 받습니다. 전후의 LCP와 페이지 무게를 측정합니다. 큰 인라인 영웅은 일반적인 회귀입니다.

이미지를 업로드하지 않고 데이터 URL로 변환할 수 있나요?

예. 이미지를 Base64로 변환기는 브라우저에서 파일을 읽고 데이터 URL 또는 원시 Base64를 출력합니다. 아무것도 서버로 전송되지 않습니다.

SVG - Base64 또는 원시 마크업은 어떻습니까?

HTML의 인라인 SVG 마크업은 일반적으로 접근성과 스타일 측면에서 더 좋습니다. URL(일부 CSS 속성, 일부 이메일 경로)만 허용하는 컨텍스트에 SVG를 드롭해야 하는 경우 데이터 URL을 사용하세요.

ToolsMinify에서 이미지 변환

아래의 모든 도구는 무료로, 가입이나 업로드가 필요하지 않은 브라우저에서 실행됩니다.

• 이미지를 Base64 변환기로 - 로컬 이미지를 HTML 및 CSS용 데이터 URL 또는 Base64 문자열로 변환합니다.
• Base64 인코더/디코더 - 임의의 텍스트와 이미지가 아닌 페이로드를 인코딩하거나 디코딩합니다.
• CSS 축소기 - 작은 데이터 URL 배경을 포함하는 스타일시트를 축소합니다.
• 모든 개발자 도구 - 전체 카테고리 색인.