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

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

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

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

9 102
css css-sprites

9 ответов:

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

короче (но нестабильно - 74 байта)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

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

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

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

135

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

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

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

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

конечная длина зависит от того, что он gzipped С.

15

этот парень разбивает проблему с помощью спецификации 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-encoded блок данных изображения. Для представления одного пикселя изображения требуется 5 байт. Алгоритм сжатия не был разработан, чтобы сжать один байт очень хорошо.

  • гиф трейлер (1 байт)

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

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

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

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

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

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

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

источник: самый маленький GIF когда-либо.

9

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
9

вы можете попробовать следующие данные 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"/>
5

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

3

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

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

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

data:null

(это будет переводить в src=(unknown))

0