Наименьшее возможное изображение URI данных для прозрачного изображения

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

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

Я понимаю, что мог бы использовать 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

Окончательная длина зависит от того, с чем он сжат.

Думаю, это должен быть сжатый прозрачный GIF-файл размером 1x1 (82 байта):

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

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

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Этот парень разбирает проблему с помощью спецификации GIF. Его решение для transparent.gif37 байтов:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Он пошел еще меньше, убрав сначала прозрачность, потом таблицу цветов ...

GIF89a спецификация

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

  Состоит из байтов «GIF» и номера версии, как правило 89a.

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

  Не вдаваясь в подробности, в этом разделе файла указано следующее:

  • Размер файла - 1x1 пиксель.
  • Есть глобальная таблица цветов.
  • В глобальной таблице цветов 2 цвета, второй должен использоваться как цвет фона.

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

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

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

  Используется для обозначения того, что второй цвет в таблице цветов должен рассматриваться как прозрачный (также может использоваться для параметров анимации, но отсутствует в этом файле).

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

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

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

  Один LZW-кодированный блок данных изображения. Для представления одного пикселя изображения в нем требуется 5 байтов. Алгоритм сжатия не был разработан для очень хорошего сжатия одного байта.

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

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

Исходя из требуемых структур для прозрачного GIF, оказывается, что 43 байта - это почти то же самое, что вы можете получить.

Но мне удалось придумать один трюк, чтобы сделать его немного меньше. В стандарте упоминается, что иметь глобальную таблицу цветов необязательно. Конечно, не определено, что происходит, когда вы создаете GIF без таблицы цветов.

Однако, когда у вас есть индекс таблицы цветов, определенный как прозрачный, декодеры GIF, похоже, не заботятся о том, что на самом деле таблицы цветов нет.

Поэтому я изменил логический дескриптор экрана, чтобы указать, что глобальной таблицы цветов нет, и удалил саму таблицу, сохранив в общей сложности шесть байтов, уменьшив размер файла до 37 байтов.

Достаточно интересно, что Wordpress дал мне прекрасный список сообщений об ошибках, в которых GD жалуется, что это недопустимый файл GIF, несмотря на то, что Firefox и GIMP открывают и отображают («отображается» ли он, когда он прозрачен?) Файл просто хорошо.

Чтобы сделать его еще меньше, я обратил внимание на самый большой оставшийся «необязательный» блок изображения - расширение графического элемента управления. Если вам не нужна прозрачность, этот блок больше не нужен, и вы можете убрать еще 8 байтов.

Источник: Самый крошечный GIF на свете .

Вы можете попробовать следующие данные 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 данных
• Кодировщик URL для SVG ( GitHub ) / SVG CSS URI - Оптимизированный заменитель

Это самый маленький из найденных мною (26 байт):

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

Я использую следующие данные uri, чтобы получить пустое изображение: //:0

Для пустого изображения:

data:null

(это переведет на src=(unknown))