외부 링크 없이 PNG 이미지를 HTML 페이지에 직접 포함하는 방법은 무엇입니까?

HTML 페이지에 PNG 이미지 삽입

디지털 영역에서 이미지는 사용자 경험을 향상하고 시각적 정보를 전달하는 데 중요한 역할을 합니다. 웹 개발자가 직면하는 일반적인 질문 중 하나는 PNG(Portable Network Graphics) 이미지를 외부에 연결하지 않고 HTML 페이지에 직접 삽입하는 방법입니다.

Base64 인코딩으로 이미지 삽입

HTML에 PNG 이미지를 삽입하려면 Base64 인코딩을 활용할 수 있습니다. 이 프로세스는 바이너리 이미지 데이터를 HTML 코드에 삽입할 수 있는 문자열로 변환합니다.

여러 온라인 Base64 인코더가 이 작업을 지원할 수 있습니다. 권장되는 도구 중 하나는 http://www.greywyvern.com/code/php/binary2base64에 있습니다.

이미지를 인코딩한 후 다음 두 가지 방법 중 하나를 사용하여 이미지를 삽입할 수 있습니다.

1. CSS 배경 이미지 속성 사용:

div 요소를 생성하고 해당 배경 이미지 속성을 Base64로 인코딩된 문자열로 설정합니다. 예:

<code class="css">div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

2. 태그:

또는 이미지를 직접 삽입하려면 태그를 사용하세요. src 속성은 인코딩된 문자열을 값으로 사용합니다. 예:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

이러한 방법을 사용하면 PNG 이미지를 HTML 페이지에 성공적으로 삽입하여 외부 파일 참조 없이 표시할 수 있습니다.

위 내용은 외부 링크 없이 PNG 이미지를 HTML 페이지에 직접 포함하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!