Для прозорого зображення можливе найменше зображення URI даних

Я використовую прозоре 1х1 зображення з фоновим зображенням, щоб мати можливість використовувати спрайти та надавати альтернативний текст для деяких значків.

Я хочу використовувати URI даних для зображення, щоб зменшити кількість запитів HTTP, але яка б була найменша можлива рядок для створення прозорого зображення ?

Я усвідомлюю, що міг би використовувати 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

Кінцева довжина залежить від того, з чим це gzipped.

Я думаю, що це повинен бути стислий прозорий файл GIF 1х1 (82 байти):

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

Створено за допомогою даних dopiaza.org: генератор URI .

Найменший PNG - 114 байт:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Цей хлопець вирішує проблему через специфікацію GIF. Його рішення для рівня transparent.gifбуде 37 байт:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Він стає ще меншим, спочатку знімаючи прозорість, потім таблицю кольорів ...

Специфікація GIF89a

• Заголовок (6 байт)

  Складається з байтів "GIF" та номера версії, яка зазвичай є 89a.

• Логічний дескриптор екрана (7 байт)

  Не надто детально розглядаючи цей розділ файлу, вказується на наступне:

  • Файл розміром 1х1 пікселів.
  • Існує глобальна таблиця кольорів.
  • У глобальній таблиці кольорів є 2 кольори, другий слід використовувати як колір фону.

• Глобальна кольорова таблиця (6 байт)

  Складається з 3 байтів на колір, байт для червоного, зеленого та синього відповідно. У нашому файлі перший колір - білий, другий - чорний.

• Розширення для графічного управління (8 байт)

  Використовується для вказівки на те, що другий колір у таблиці кольорів повинен розглядатися як прозорий (може також використовуватися для параметрів анімації, але це не у цьому файлі).

• Дескриптор зображень (10 байт)

  Файл GIF насправді може містити декілька «зображень» всередині нього, що не дозволяє вказувати дані зображення для частин зображення, які мають той же колір, що і колір тла. Кожен блок зображень має положення та розмір у межах загального розміру зображення. У наведеному вище файлі позиція дорівнює 0,0, а розмір - 1х1.

• Дані зображення (5 байт)

  Один блок зображень, кодований LZW . Потрібно 5 байт, щоб представити один піксель, який має зображення в ньому. Алгоритм стиснення не був розроблений для того, щоб дуже добре стискати один байт.

• GIF-трейлер (1 байт)

  Один байт зі шістнадцятковим значенням 3B( ;в ASCII) вказує на кінець GIF.

Виходячи з необхідних структур для прозорого GIF, виявляється, що 43 байти досить близькі до мінімальних розмірів.

Але, мені вдалося розібратися з однією хитрістю, щоб зробити її трохи меншою. У стандарті зазначається, що необов'язково мати глобальну таблицю кольорів. Звичайно, не визначено, що відбувається, коли ви взагалі створюєте GIF без таблиці кольорів.

Однак, якщо індекс таблиці кольорів визначений як прозорий, декодери GIF, схоже, не хвилюються, що насправді немає таблиці кольорів.

Тож я змінив логічний дескриптор екрану, щоб вказати, що немає глобальної таблиці кольорів, і видалив саму таблицю, заощадивши загалом шість байтів, зменшивши розмір файлу до всього 37 байт.

Цікаво, що Wordpress подав мені прекрасний список повідомлень про помилки GD, поскаржившись, що це не дійсний файл GIF, незважаючи на те, що Firefox та GIMP відкриваються та відображаються (чи "відображається", коли він прозорий?) Файл просто добре.

Щоб зробити його ще меншим, я подивився на найбільший “необов’язковий” блок на зображенні, розширення графічного керування. Якщо вам не потрібна прозорість, цей блок більше не потрібен, і це ще 8 байт, які ви можете забрати.

Джерело: The Tinyest 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"/>

Дивитися також:

• Оптимізація SVG в URI даних
• Urc-кодер для SVG ( GitHub ) / SVG CSS URI - оптимізований замінник

Це найменший я знайшов (26 байт):

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

Я використовую такі дані uri, щоб отримати порожнє зображення: //:0

Для порожнього зображення:

data:null

(це переведеться на src=(unknown))