src나 css 배경 이미지의 url값은 base64 인코딩 code_HTML/Xhtml_웹페이지 제작

웹 페이지에 있는 일부 사진의 URL 뒤에는 다음과 같은 긴 문자열이 따라오는 것을 볼 수 있습니다. data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i 1 BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==. 그래서 이것은 무엇입니까? 이것이 데이터 URI 체계입니다.

데이터 URI 체계는 RFC2397에 정의되어 있습니다. 그 목적은 일부 작은 데이터를 웹 페이지에 직접 삽입하여 외부 파일에서 로드할 필요가 없도록 하는 것입니다. 예를 들어 위의 문자열은 실제로는 작은 그림입니다. 이 문자를 복사하여 Firefox의 주소 표시줄에 붙여넣고 이동하면 1X36 흰색 및 회색 png 그림이 표시됩니다.

위 데이터 URI에서 data는 데이터를 얻기 위한 프로토콜 이름을 나타내며, image/png는 데이터 유형 이름, base64는 데이터의 인코딩 방법, 쉼표 뒤에 오는 것은 base64로 인코딩된 데이터입니다. 이미지/png 파일입니다.

현재 데이터 URI 체계에서 지원되는 유형은
data:, text data
data:text/plain, text data
data:text/html, HTML code
입니다. data :text/html;base64,base64로 인코딩된 HTML 코드
data:text/css,CSS 코드
data:text/css;base64,base64로 인코딩된 CSS 코드
data:text/javascript,Javascript 코드
data:text/javascript;base64,base64로 인코딩된 Javascript 코드
data:image/gif;base64,base64로 인코딩된 gif 이미지 데이터
data:image/png;base64,base64로 인코딩된 png 이미지 데이터
data :image/jpeg;base64, base64로 인코딩된 jpeg 이미지 데이터
data:image/x-icon;base64, base64로 인코딩된 아이콘 이미지 데이터

base64는 단순히 일부 8비트 데이터를 표준으로 변환합니다. ASCII 문자 인터넷에는 base64_encode() 함수를 사용하여 인코딩할 수 있는 무료 base64 인코딩 및 디코딩 도구가 많이 있습니다.
현재 IE8, Fifox, Chrome 및 Opera 브라우저는 모두 이 작은 파일 삽입을 지원합니다.

사진의 예:

웹페이지의 사진은 다음과 같이 표시될 수 있습니다.

코드 복사

코드는 다음과 같습니다. Ov8CDADlIUQBs7MD3wAAAABJRU 5ErkJggg==”/>

이미지 파일을 넣습니다. 내용이 HTML 파일에 직접 작성된다는 장점이 있습니다. HTTP 요청을 저장한다는 것입니다. 단점은 브라우저가 그러한 이미지를 캐시하지 않는다는 것입니다. 누구나 실제 상황에 따라 자유로운 선택을 할 수 있습니다.