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

Question

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

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

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

Answer 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, как предполагает один комментарий.Это сломается в нескольких браузерах.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Answer 5

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

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

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

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

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

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

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

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

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

Источник: Самый крошечный ГИФ когда-либо .

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

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

data:null

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