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

126

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

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

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

Джейкоб Раск
источник
1
Не лучше ли было бы использовать реальное изображение 1x1 с настройкой кеширования? У вас мало HTTP-запросов, и в общем объеме накладных расходов URL-адрес изображения может быть меньше 78 байтов URI данных.
Redzarf
1
@Redzarf: вообще-то нет, наверное, лучше не было бы. небольшие, редко меняющиеся ресурсы влияют на время загрузки страницы не из-за размера файла, а из-за обработки HTTP-запроса туда и обратно. Еще одна тонкость заключается в том, что большинство браузеров гораздо более агрессивны в отношении кеширования CSS, чем другие ресурсы, поэтому браузер с меньшей вероятностью будет экспериментировать с обновлением CSS (и таким образом встроенным контентом), что позволяет сэкономить больше HTTP-циклов.
SingleNegationElimination

Ответы:

167

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

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

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

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

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

Layke
источник
1
+1 спасибо! Я заметил, что это пригодится. Я использовал ваши данные для создания этого плагина, поэтому я могу использовать изображения адаптивного типа изначально с фоновой обложкой или содержать-> github.com/sebringj/jquery-transparent-gif/blob/master/…
Джейсон Себринг
1
Почему более короткий «нестабильный»? Я вижу, что это иногда вызывает черное изображение, мне просто любопытно, знает ли кто, почему.
jvenema
После долгих мучений я обнаружил, что «более короткая» версия на самом деле приводила к сбою браузера на некоторых (не на всех) страницах моего сайта в старых браузерах Android (HTC One S, OS 4.1).
WebSeed 01
Отличный ответ, но пока не самый маленький .
Джош Хабдас
22
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

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

Adria
источник
3
Есть ли аргументы против использования SVG? Есть случаи, когда это не очень хорошая идея?
tremby
SVG подходит для многих случаев, но в сочетании с width: auto;SVG он принимает ширину своего родителя. Статическое изображение, такое как GIF или PNG, при задании фиксированной высоты и ширины автоматически сохранит свое соотношение сторон.
snazzybouche
14

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
joshcarr
источник
Стоит отметить, что это легко сгенерировать с помощью GIMP. Результирующий файл будет иметь размер 68 байт (пока что минимально возможный).
Исмаэль Мигель
@AminahNuraini, это PNG.
joshcarr 01
2
@AminahNuraini: Что в этом ответе говорит вам "SVG"?
Гонки за легкостью на орбите
10

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

mckamey
источник
1
Согласно этой статье 37-байтовый вариант основан на неопределенном поведении, и на самом деле автор упоминает, что парсер изображений wordpress не может с этим справиться. Хотя это, вероятно, будет работать в большинстве браузеров, я считаю это рискованным выбором. Я бы остановился на 43-байтовой вариации из той же статьи. Вариант этого уже опубликован выше . См. Также обсуждение в комментариях к верхнему ответу
Брайан
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"/>

Смотрите также:

kenorb
источник
2
Может также быть закодированы и используются в Favicon или CSS contentсвойства.
Джош Хабдас
6

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

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
KarasQ
источник
В IE11 он отображается черным.
tomasz86 05
4

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

Юргис
источник
Firefox 44 и Internet Explorer 11 показывают тег img alt. Вы должны либо использовать один из вышеперечисленных, либо удалить тег alt
PersyJack
Это более эффективно, чем запрос / ответ для изображения?
nu everest
Однако не будет подтверждать
Люсьен Давидеску
0

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

data:null

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

T.Todua
источник
1
Мне это в принципе нравится, но валидатор w3c на практике не одобряет: Ошибка: данные неверного значения: null для атрибута src в элементе img: преждевременное завершение URI.
brennanyoung