인라인 이미지 : 홈페이지()

Question

나는이 같은 내 .css 파일 내에서 GIF 파일을로드하기 위해 노력하고있어 :

li.box_entry { 
    background-image: url(data:image/gif;base64,R0lGODlhDAANANUAAPv7+/r6+vn5+ff39/b29vX19fPz8/Dw8O/v7+7u7u3t7ezs7Onp6ejo6Ofn5+bm5uTk5OPj4+Hh4eDg4N/f397e3tzc3Nvb29ra2tnZ2dbW1tXV1dPT09LS0tHR0c3NzcjIyMfHx8bGxsXFxby8vLe3t7W1tbOzs62traurq6mpqaioqKenp6ampqWlpaOjo6KioqGhoaCgoJ+fn5qampmZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADYALAAAAAAMAA0AAAZxQJtwyGYrVaLEQswGYWAOAygxWELxaFwCVUWi/bRyZaJM5nUezjInkcjHi8U2rVNhmJY++QZDg0NBgTExEPhxJ+NCogDY6PjiMqGisLCJeYDTIaNikmCgOhAwgnKUICKCsdBgYdMSgCRBgogSgZQ0EAOw==); 
    background-repeat: no-repeat; 
} 

있는 GIF 이미지를 base64로 사용하여 인코딩됩니다 http://www.motobit.com/util/base64-decoder-encoder.asp

그것은 내가 이미지를 일반적인 방법으로 연결하면 잘 작동 : 바로로드하기 위해 노력하고있어 왜 그러나

li.box_entry { 
    background-image: url(images/dot.gif); background-repeat: no-repeat; 
} 

를, 그것은 단지 작은 파일이며, 내가 HTTP-요청을 줄이려는 이잖아 ...에서 CSS 파일은 더 빨라야하지만 파일은 base64 인코딩으로 인해 더 커집니다.

인라인 이미지는이 예에서와 같이, HTML 내에서 나를 위해 잘 작동 :

<a href="index.php?mod=home&amp;language=es"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI 
WXMAAAsTAAALEwEAmpwYAAAAMklEQVR42mP8//8/AzUBEwOVweA3kPE/A8P/keVlFup6eEQmmxFo 
IAsD48grHEZcAQsAaegJIuin2YEAAAAASUVORK5CYII=" alt="es" title="Español" width="20" height="20" border="0" /></a> 

이것은 또한 CSS 파일에서 작동합니다이 페이지에 따르면 그러나 http://www.websiteoptimization.com/speed/tweak/inline-images/

, 나는 구글 크롬 테스트 파이어 폭스 등이있다.

나는 뭔가를 놓친가요? 왼쪽 아래에 http://lansuite.orgapage.de 플래그가 이미 작동 인라인 HTML 모든 페이지에 걸쳐 회색/노란 점들이 그러나 여러 번 나타납니다 여기에

내가 일하고 있어요 페이지입니다. 그래서 인라인 HTML로 작성하는 것은 좋지 않습니다. CSS 파일에서 그래픽을 한 번만 정의하고 이미지가 필요할 때마다 적절한 클래스를로드하고 싶습니다.

Answer 1

다만 문제는 base64로 인코더이었다 발견 : -/

지금이 하나를 사용

, 그것은 GIF 이미지에 대해 서로 다른 코드를 생성하고 그 일 : http://www.opinionatedgeek.com/dotnet/tools/base64encode/

탱크를 응답을 위해!

Answer 2

this을 반드시 읽으십시오. 주제의 많은 측면 (예 : IE 지원)을 다룹니다.