HTML에서 배경 이미지를 어떻게 인코딩 할 수 있습니까? 예 :HTML 내에서 이미지를 인코딩하는 방법은 무엇입니까?
background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX);
이미지 파일이있는 경우 어떻게 내용을 인코딩 한 다음 문자열로 변환 할 수 있습니까? 이러한 사용자 정의 글꼴 서비스가하는 것과 동일한 것입니까?
당신은이 웹 사이트에 이미지를 변환 할 수 있습니다: 좋아
http://www.greywyvern.com/code/php/binary2base64
및 사용 :
<img alt="Embedded Image" width="158" height="158"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A..." />
CSS 이미지 임베딩 예
(X) HTML 이미지 임베딩 예
을div.image {
width:158px;
height:158px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...);
}
XML 이미지 임베딩 예
<image>
<title>An Image</title>
<link>http://www.your.domain</link>
<url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...</url>
</image>
삽입 다른 물건!
데이터 URI는 이미지가 아닌 모든 유형의 데이터를 저장할 수 있습니다! 크기에 이러한 예제를보십시오 : (X) HTML의 CSS 임베딩 예를
<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
(X) HTML 자바 스크립트 임베딩 예
<script type="text/javascript"
src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
이미지 데이터를 인코딩하는 이미지가에 캐시되지 않습니다 의미주의 방문자의 브라우저는 페이지 렌더링 속도를 늦출 수 있습니다. 아이콘과 같은 매우 작은 이미지의 경우 나쁘지는 않지만 휴대 기기의 경우 특히 큰 이미지의 경우 문제가됩니다. 캐싱이 없다면 무시하십시오. – kevin628
@ kevin628 : 그것에 대해 자세히 설명해 주시겠습니까? CSS 파일이 캐시 된 경우 내부의 base64 데이터도 캐시되지 않습니까? – pixelistik
@pixelistik 예, 캐시에서 단순히 잡아 당기지 않고 base64 데이터를 이미지 데이터로 디코딩해야합니다. 결국 실제 성능이 저하되지는 않지만 프로그래머와 디자이너는 과거에 base64 인코딩을 과도하게 사용하는 것으로 나타났습니다. – kevin628