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

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

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

Я понимаю, что я мог использовать URI данных: для реальных изображений вместо спрайтов, но их легче поддерживать, когда все хранится в CSS вместо разброса.

    После игры с различными прозрачными GIF-файлами некоторые из них нестабильны и вызывают сбои CSS. Например, если у вас есть и вы используете самый малый прозрачный GIF, он работает отлично, однако, если вы хотите, чтобы ваш прозрачный GIF имел background-image , тогда это невозможно. По некоторым причинам некоторые GIF-файлы, такие как следующие, предотвращают использование фонов CSS (в некоторых браузерах).

    Более короткий (но нестабильный – 74 байта)

     data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 

    Я бы посоветовал использовать более длинную и более стабильную версию следующим образом:

    ⇊ Стабильный ⇊ (но немного длиннее – 78 байт)

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

    В качестве другого совета не опускайте image/gif как предлагает один комментарий. Это приведет к разрыву в нескольких браузерах.

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

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

    Сгенерировано с данными dopiaza.org: генератор URI .

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

    Конечная длина зависит от того, с чем она связана.

    Этот парень разрушает проблему через спецификацию 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 Tiniest GIF Ever .

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

     data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII= 

    Вы можете попробовать следующие данные SVG (60 байт):

     data:image/svg+xml, 

    Автономный файл svg будет выглядеть (62 байта):

      

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

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

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

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

     data:null 

    (он будет переведен в src=(unknown) )

    Давайте будем гением компьютера.