Hình ảnh URI dữ liệu nhỏ nhất có thể cho hình ảnh trong suốt

Tôi đang sử dụng hình ảnh 1x1 trong suốt với hình nền, để có thể sử dụng sprites và vẫn cung cấp văn bản thay thế cho một số biểu tượng.

Tôi muốn sử dụng URI dữ liệu cho hình ảnh để giảm số lượng yêu cầu HTTP, nhưng chuỗi nhỏ nhất có thể để tạo ra hình ảnh trong suốt là bao nhiêu?

Tôi nhận ra rằng tôi có thể sử dụng URI: s dữ liệu cho các hình ảnh thực tế thay vì các sprite, nhưng sẽ dễ bảo trì hơn khi mọi thứ được giữ trong CSS thay vì nằm rải rác.

Sau khi thử với các ảnh GIF trong suốt khác nhau, một số ảnh không ổn định và khiến CSS bị trục trặc. Ví dụ: nếu bạn có <img>và bạn sử dụng GIF trong suốt nhỏ nhất có thể, nó hoạt động tốt, tuy nhiên, nếu sau đó bạn muốn GIF trong suốt của mình có một tệp GIF background-image, thì điều này là không thể. Vì một số lý do, một số GIF chẳng hạn như sau ngăn nền CSS (trong một số trình duyệt).

Ngắn hơn (nhưng không ổn định - 74 byte)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Tôi khuyên bạn nên sử dụng phiên bản dài hơn và ổn định hơn một chút như sau:

⇊ Ổn định ⇊ (nhưng dài hơn một chút - 78 byte)

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

Một mẹo khác, đừng bỏ qua image/gifnhư một nhận xét gợi ý. Điều này sẽ bị hỏng trong một số trình duyệt.

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

Độ dài cuối cùng phụ thuộc vào những gì nó được nén.

Tôi nghĩ đó phải là tệp GIF 1x1 trong suốt được nén (82 byte):

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

Được tạo bằng dữ liệu dopiaza.org: Trình tạo URI .

PNG nhỏ nhất - 114 byte:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Anh chàng này giải quyết vấn đề thông qua thông số GIF. Giải pháp của anh ấy cho transparent.gifsẽ là 37 byte:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Anh ta thậm chí còn nhỏ hơn bằng cách đầu tiên loại bỏ độ trong suốt, sau đó là bảng màu ...

Đặc điểm kỹ thuật GIF89a

• Tiêu đề (6 byte)

  Bao gồm byte "GIF" và số phiên bản, thường là 89a.

• Bộ mô tả màn hình logic (7 byte)

  Không đi vào quá nhiều chi tiết, phần này của tệp cho biết những điều sau:

  • Tệp có kích thước 1x1 pixel.
  • Có một bảng màu toàn cầu.
  • Có 2 màu trong bảng màu toàn cục, màu thứ hai nên được sử dụng làm màu nền.

• Bảng màu toàn cầu (6 byte)

  Bao gồm 3 byte cho mỗi màu, một byte cho màu đỏ, xanh lục và xanh lam, tương ứng. Trong tệp của chúng tôi, màu đầu tiên là màu trắng và màu thứ hai là màu đen.

• Phần mở rộng điều khiển đồ họa (8 byte)

  Được sử dụng để chỉ ra rằng màu thứ hai trong bảng màu phải được coi là trong suốt (cũng có thể được sử dụng cho các thông số hoạt ảnh, nhưng không có trong tệp này).

• Bộ mô tả hình ảnh (10 byte)

  Một tệp GIF thực sự có thể chứa nhiều “hình ảnh” bên trong nó, điều này giúp bạn không phải chỉ định dữ liệu hình ảnh cho các phần của hình ảnh có cùng màu với màu nền. Mỗi khối ảnh có một vị trí và kích thước trong kích thước ảnh tổng thể. Trong tệp trên, vị trí là 0,0 và kích thước là 1x1.

• Dữ liệu hình ảnh (5 byte)

  Một khối dữ liệu hình ảnh được mã hóa LZW . Cần 5 byte để thể hiện pixel đơn lẻ mà hình ảnh có trong đó. Thuật toán nén không được thiết kế để nén một byte đơn lẻ rất tốt.

• Đoạn giới thiệu GIF (1 byte)

  Một byte đơn có giá trị hex 3B( ;trong ASCII) cho biết phần cuối của GIF.

Dựa trên các cấu trúc cần thiết cho một ảnh GIF trong suốt, hóa ra 43 byte là khá gần với mức bạn có thể nhận được.

Nhưng, tôi đã tìm ra một mẹo để làm cho nó nhỏ hơn một chút. Nó được đề cập trong tiêu chuẩn rằng nó là tùy chọn để có một bảng màu toàn cầu. Tất nhiên, vẫn chưa xác định được điều gì sẽ xảy ra khi bạn tạo ảnh GIF mà không có bảng màu.

Tuy nhiên, khi bạn có chỉ mục bảng màu được xác định là trong suốt, bộ giải mã GIF dường như không quan tâm đến việc thực sự không có bảng màu.

Vì vậy, tôi đã thay đổi bộ mô tả màn hình logic để cho biết không có bảng màu toàn cục và xóa chính bảng đó, tiết kiệm tổng cộng sáu byte, giảm kích thước tệp xuống chỉ còn 37 byte.

Khá thú vị, Wordpress đã cung cấp cho tôi một danh sách các thông báo lỗi đáng yêu của GD phàn nàn rằng đây không phải là tệp GIF hợp lệ, mặc dù thực tế là Firefox và GIMP đều mở và hiển thị (nó có "hiển thị" khi tệp trong suốt không?) bình thường.

Để làm cho nó nhỏ hơn nữa, tôi đã xem xét khối “tùy chọn” lớn nhất còn lại trong hình ảnh, phần mở rộng điều khiển đồ họa. Nếu bạn không cần sự trong suốt, khối này không cần thiết nữa và đó là 8 byte khác mà bạn có thể lấy đi.

Nguồn: Ảnh GIF nhỏ nhất từng có .

Bạn có thể thử dữ liệu SVG sau (60 byte):

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

Tệp svg độc lập sẽ trông giống như (62 byte):

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

Xem thêm:

• Tối ưu hóa SVG trong URI dữ liệu
• Bộ mã hóa url cho SVG ( GitHub ) / SVG CSS URI - Trình thay thế được tối ưu hóa

Đây là nhỏ nhất tôi tìm thấy (26 byte):

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

Tôi đang sử dụng uri dữ liệu sau để nhận được hình ảnh trống: //:0

Đối với hình ảnh trống:

data:null

(nó sẽ dịch sang src=(unknown))