HTML 페이지에 PNG 이미지 삽입

이미지 파일에 연결하지 않고 PNG 이미지를 HTML 페이지에 삽입하는 작업은 의문을 제기합니다. : 이미지 데이터를 HTML에 직접 통합하는 방법은 무엇입니까?

Base64로 임베딩 인코딩

Base64 인코딩은 HTML에 이미지를 삽입하는 솔루션을 제공합니다. 다양한 온라인 Base64 인코더가 있지만 http://www.greywyvern.com/code/php/binary2base64에 있는 것과 같은 강력한 인코더를 사용하는 것이 좋습니다.

이 도구는 두 가지 기본 삽입 옵션을 제공합니다. : CSS 또는 태그 사용.

CSS 삽입

CSS에서, 삽입은 다음과 같이 수행할 수 있습니다:

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

태그 삽입

또는 태그를 사용할 수도 있습니다:

Base64 인코딩을 활용하면 PNG 이미지를 HTML 페이지에 직접 포함할 수 있으므로 외부 이미지 파일 없이도 이미지를 표시할 수 있습니다.