투명한 이미지를 위해 가능한 가장 작은 데이터 URI 이미지

투명한 이미지를 위해 가능한 가장 작은 데이터 URI 이미지

---

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

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

스프라이트 대신 실제 이미지에 data URI : s를 사용할 수 있다는 것을 알고 있지만 모든 것이 흩어져있는 대신 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

최종 길이는 압축 된 대상에 따라 다릅니다.

---

압축 된 투명한 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 바이트, 빨강, 녹색 및 파랑의 바이트로 구성됩니다. 이 파일에서 첫 번째 색은 흰색이고 두 번째 색은 검은 색입니다.

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

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

• 이미지 디스크립터 (10 바이트)

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

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

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

• GIF 트레일러 (1 바이트)

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

투명한 GIF에 필요한 구조를 기반으로하면 43 바이트는 가능한 한 작게 가깝습니다.

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

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

따라서 논리적 화면 설명자를 변경하여 전역 색상 표가 없음을 표시하고 테이블 자체를 제거하여 총 6 바이트를 저장하여 파일 크기를 37 바이트로 줄였습니다.

흥미롭게도 Wordpress는 Firefox와 김프가 모두 열리고 표시된다는 사실에도 불구하고 파일이 유효한 GIF 파일이 아니라고 불평하는 멋진 GD 오류 메시지 목록을 제공했습니다. 괜찮아

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

Source: The Tiniest GIF Ever.

---

You can try the following SVG data (60 bytes):

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

Standalone svg file would look like (62 bytes):

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

See also:

• Optimizing SVGs in data URIs
• Url encoder for SVG (GitHub) / SVG CSS URI — Optimized replacer

---

I'm using following data uri to get an empty image: //:0

---

This is the smallest I found (26 bytes):

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

---

For empty image :

data:null

(it will translate into src=(unknown) )

참고URL : https://stackoverflow.com/questions/6018611/smallest-data-uri-image-possible-for-a-transparent-image