PNG 이미지를 HTML에 직접 통합

PNG 이미지를 HTML에 포함하면 외부 파일 참조 없이 브라우저 내에서 직접 표시할 수 있습니다. 이를 달성하려면 Base64 인코딩 기술을 활용하십시오:

Base64 PNG 이미지 인코딩:

온라인 인코더를 사용하여 PNG 이미지를 Base64 문자열로 변환합니다. 이 문자열은 텍스트 형식의 이진 이미지 데이터를 나타냅니다.

Base64 문자열을 HTML에 통합:

CSS 옵션:

이미지에 대한 CSS 클래스를 정의하고 url() 함수와 Base64 문자열을 사용하여 background-image 속성을 설정합니다. 예:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

이미지 태그 옵션:

또는 Base64 문자열을 태그에 직접 삽입합니다:

이것은 PNG 이미지를 데이터 URI 구성표로 변환하므로 브라우저가 이미지를 직접 해석하고 표시할 수 있습니다.