큰 HTML 테이블을 생성하고 있으며 많은 셀에 이미지를 사용하고 있습니다. 예를 들어, 하나의 열에 엄지 손가락 업 이미지 또는 축소 이미지가있을 수 있습니다. 나는 아래 이미지를 엄지 손가락에 같은 이미지도 100 배를 얻기 위해 서버에 200 번 갈거야처럼 300 개 행이 그 중 200 엄지 손가락이 있다면, 그들은 모두HTML 테이블에서 반복적 인 이미지를 여러 개 최적화하는 방법
<a href="link"><img src="http://myserver.com/thumbsup.png"></a>
이 그렇게 보인다.
더 효율적으로 만들 수있는 방법이 있습니까? 브라우저는 이것을 인식하고 캐싱 된 이미지의 가치를 부여 받습니까?
많은 반복 이미지가있는 큰 HTML 표를 반환 할 때 가장 좋은 방법은 무엇입니까?
모든 브라우저는 이미지를 캐시하고 한 번만 다운로드합니다.
배경 속성이있는 CSS 클래스를 만듭니다. css가 캐쉬되고 300 src="http://myserver.com/thumbsup.png"보다 작기 때문에 html은 각 페이지 호출에서 더 작을 것입니다.
this thread을 확인하여 CSS 배경 이미지에 대한 추가 정보를 얻으십시오. 장단점이 있습니다.
요르단이 말했듯이 브라우저는 첫 번째 다운로드 후 이미지를 캐시합니다. 그러나로드 할 이미지가 많은 경우 image sprite을 사용해야합니다.
나는이 상황에서 CSS를 사용할 것이다.
위에서 언급 한 것처럼 css sprites을 사용하십시오. css가 비활성화 된 사용자 (화면 판독기)와 검색 엔진에서 빈 링크가 표시되고 앵커에 텍스트를 추가해야합니다 (텍스트가 들여 쓰기 : -9999px,이 텍스트는 CSS를 통해 표시되지 않으므로 배경 이미지 앞). 그것은 또한 당신의 SEO를 도울 것입니다. 예를 들어
:
<style type="text/css">
a.th-up{
background-image:url(http://myserver.com/sprite.png);
background-position:-10px -20px; /*or whatever the "thumbsup" image's coordinates are in your sprite*/
text-indent:-9999px;
}
</style>
<a href="link" class="th-up">Thumbs Up!</a>