최소한의 투명 데이터 URI 이미지에 대한 최적의 크기는 무엇입니까?

투명 이미지를 위한 최소 데이터 URI

CSS 내에서 배경 이미지와 함께 1x1 투명 이미지를 활용하는 것을 상상해 보세요. 이를 통해 특정 아이콘에 대한 대체 텍스트를 계속 제공하면서 스프라이트를 활용할 수 있습니다.

성능을 최적화하려면 이미지에 데이터 URI를 사용하는 것이 좋습니다. 그런데 이 접근 방식을 사용하여 투명한 이미지를 만들기 위한 최적의 크기는 얼마입니까?

간결한 반응

투명 GIF에 대한 광범위한 실험을 통해 일부 이미지가 불안정하고 CSS 내의 결함. 예를 들어, 가능한 가장 작은 크기를 사용하여 투명 GIF에 배경 이미지를 추가하려고 하면 기능이 저하될 수 있습니다. 이상하게도 아래와 같은 특정 GIF는 일부 브라우저에서 CSS 배경을 차단할 수 있습니다.

짧지만 불안정함(74바이트)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

안정적이지만 약간 길다(78 bytes)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

추가로 고려해야 할 사항은 댓글에서 자주 발견되는 제안으로 "image/gif"를 생략하지 않는 것입니다. 이러한 누락으로 인해 여러 브라우저에서 오작동이 발생할 수 있습니다.

위 내용은 최소한의 투명 데이터 URI 이미지에 대한 최적의 크기는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!