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

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

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

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

ОТВЕТЫ

Ответ 1

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

Более короткие (но неустойчивые - 74 байта)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

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

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

    Состоит из байтов "GIF" и номера версии, обычно 89a.

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

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

    • Размер файла 1x1.
    • Существует глобальная таблица цветов.
    • В глобальной таблице цветов есть 2 цвета, второй - цвет фона.

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

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

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

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

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

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

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

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

  • GIF Trailer (1 байт)

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

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

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

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

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

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

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

Источник: Самый маленький GIF Ever.

Ответ 5

Самый маленький PNG - 114 байт:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Ответ 7

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

Ответ 8

Это самое маленькое, что я нашел (26 байт):

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

Ответ 9

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

data:null

(переводится в src=(unknown))