투명한 이미지에 가능한 최소 데이터 URI 이미지

스프라이트를 사용하고 일부 아이콘에 대한 대체 텍스트를 제공 할 수 있도록 배경 이미지와 함께 투명한 1x1 이미지를 사용하고 있습니다.

HTTP 요청 수를 줄이기 위해 이미지에 데이터 URI를 사용하고 싶지만 투명한 이미지를 생성하는 데 가능한 가장 작은 문자열은 무엇입니까?

스프라이트 대신 실제 이미지에 데이터 URI를 사용할 수 있다는 것을 알고 있지만 모든 것이 흩어져있는 대신 CSS에 보관 될 때 유지 관리가 더 쉽습니다.

다른 투명 GIF로 놀아 본 후 일부는 불안정하고 CSS 결함을 유발합니다. 예를 들어, <img>가능한 가장 작은 투명 GIF를 사용하는 경우 잘 작동하지만 투명 GIF에를 포함하려면 background-image불가능합니다. 어떤 이유로 다음과 같은 일부 GIF는 CSS 배경을 차단합니다 (일부 브라우저에서).

더 짧음 (그러나 불안정-74 바이트)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

다음과 같이 약간 더 길고 안정적인 버전을 사용하는 것이 좋습니다.

⇊ 안정적 ⇊ (약간 더 길어짐-78 바이트)

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

또 다른 팁 image/gif으로 한 댓글이 제안하는대로 생략하지 마세요 . 이것은 여러 브라우저에서 중단됩니다.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

최종 길이는 gzip 파일에 따라 달라집니다.

압축 된 투명한 1x1 GIF 파일 (82 바이트)이어야한다고 생각합니다.

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

로 생성 된 URI 발생기 : dopiaza.org 데이터 .

최소 PNG-114 바이트 :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

이 사람 은 GIF 사양을 통해 문제를 분석합니다. 에 대한 그의 솔루션은 transparent.gif37 바이트입니다.

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

먼저 투명도를 제거한 다음 색상 표를 제거하면 더 작아집니다.

GIF89a 사양

• 헤더 (6 바이트)

  "GIF"바이트와 버전 번호 (일반적으로)로 구성 89a됩니다.

• 논리적 화면 설명자 (7 바이트)

  너무 자세히 설명하지 않고 파일의이 섹션은 다음을 나타냅니다.

  • 파일 크기는 1x1 픽셀입니다.
  • 글로벌 색상 표가 있습니다.
  • 전체 색상 표에는 두 가지 색상이 있으며 두 번째 색상은 배경색으로 사용해야합니다.

• 글로벌 컬러 테이블 (6 바이트)

  색상 당 3 바이트, 빨강, 녹색 및 파랑에 대해 각각 1 바이트로 구성됩니다. 파일에서 첫 번째 색상은 흰색이고 두 번째 색상은 검은 색입니다.

• 그래픽 제어 확장 (8 바이트)

  색상 표의 두 번째 색상이 투명으로 처리되어야 함을 나타내는 데 사용됩니다 (애니메이션 매개 변수에도 사용할 수 있지만이 파일에는 없음).

• 이미지 설명자 (10 바이트)

  GIF 파일에는 실제로 여러 "이미지"가 포함될 수 있으므로 배경색과 동일한 색상을 가진 이미지 부분에 대해 이미지 데이터를 지정하지 않아도됩니다. 각 이미지 블록에는 전체 이미지 크기 내에서 위치와 크기가 있습니다. 위 파일에서 위치는 0,0이고 크기는 1x1입니다.

• 이미지 데이터 (5 바이트)

  LZW로 인코딩 된 이미지 데이터 블록 1 개 . 이미지가 포함하는 단일 픽셀을 나타내는 데 5 바이트가 걸립니다. 압축 알고리즘은 단일 바이트를 잘 압축하도록 설계되지 않았습니다.

• GIF 예고편 (1 바이트)

  16 진수 값이 3B( ;ASCII) 인 단일 바이트 는 GIF의 끝을 나타냅니다.

투명한 GIF에 필요한 구조에 따르면 43 바이트는 가능한 한 작습니다.

그러나 나는 그것을 조금 더 작게 만드는 하나의 트릭을 알아 냈다. 표준에서 전역 색상 표를 갖는 것은 선택 사항이라고 언급되어 있습니다. 물론 색상 표없이 GIF를 만들 때 어떤 일이 발생하는지에 대해서는 정의되어 있지 않습니다.

그러나 투명으로 정의 된 색상 표 인덱스가있는 경우 GIF 디코더는 실제로 색상 표가 없는지 신경 쓰지 않는 것 같습니다.

그래서 나는 글로벌 컬러 테이블이 없다는 것을 나타내도록 논리적 화면 설명자를 변경하고 테이블 자체를 제거하여 총 6 바이트를 절약하여 파일 크기를 37 바이트로 줄였습니다.

흥미롭게도 Wordpress는 Firefox와 GIMP가 파일을 열고 표시한다는 사실에도 불구하고 유효한 GIF 파일이 아니라고 불평하는 GD의 멋진 오류 메시지 목록을 제공했습니다 (투명 할 때 "표시"됩니까?). 괜찮아요.

더 작게 만들기 위해 이미지에서 가장 큰 나머지 "옵션"블록 인 그래픽 컨트롤 확장을 살펴 보았습니다. 투명성이 필요하지 않은 경우이 블록은 더 이상 필요하지 않으며 다른 8 바이트를 제거 할 수 있습니다.

출처 : The Tiniest GIF Ever .

다음 SVG 데이터 (60 바이트)를 시도 할 수 있습니다.

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

독립형 svg 파일은 다음과 같습니다 (62 바이트).

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

또한보십시오:

• 데이터 URI에서 SVG 최적화
• SVG ( GitHub ) / SVG CSS URI 용 URL 인코더 — 최적화 된 대체 프로그램

이것은 내가 찾은 가장 작은 것입니다 (26 바이트).

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

다음 데이터 uri를 사용하여 빈 이미지를 얻습니다. //:0

빈 이미지의 경우 :

data:null

(로 번역됩니다 src=(unknown))