Я использую прозрачное изображение 1x1 с фоновым изображением, чтобы иметь возможность использовать спрайты и при этом предоставлять альтернативный текст для некоторых значков.
Я хочу использовать URI данных для изображения, чтобы уменьшить количество HTTP-запросов, но какая строка будет наименьшей возможной для создания прозрачного изображения ?
Я понимаю, что мог бы использовать URI данных для реальных изображений вместо спрайтов, но его легче поддерживать, когда все хранится в CSS, а не разбросано по всему.
css
css-sprites
Джейкоб Раск
источник
источник
Ответы:
После экспериментов с различными прозрачными GIF-изображениями некоторые из них работают нестабильно и вызывают сбои CSS. Например, если у вас есть
<img>
и вы используете крошечный прозрачный GIF-файл, он работает нормально, однако, если вы хотите, чтобы ваш прозрачный GIF-файл имелbackground-image
, то это невозможно. По какой-то причине некоторые GIF-файлы, например следующие, не позволяют использовать фон CSS (в некоторых браузерах).Короче (но нестабильно - 74 байта)
Я бы посоветовал использовать более длинную и стабильную версию:
⇊ Стабильный ⇊ (но чуть длиннее - 78 байт)
В качестве еще одного совета не пропускайте,
image/gif
как предполагает один комментарий. Это нарушит работу нескольких браузеров.источник
Окончательная длина зависит от того, с чем он сжат.
источник
width: auto;
SVG он принимает ширину своего родителя. Статическое изображение, такое как GIF или PNG, при задании фиксированной высоты и ширины автоматически сохранит свое соотношение сторон.Думаю, это должен быть сжатый прозрачный GIF-файл размером 1x1 (82 байта):
Создано с использованием данных dopiaza.org: генератор URI .
источник
Наименьший PNG - 114 байт:
источник
Этот парень разбирает проблему с помощью спецификации GIF. Его решение для
transparent.gif
37 байтов:Он пошел еще меньше, убрав сначала прозрачность, потом таблицу цветов ...
GIF89a спецификация
Заголовок (6 байт)
Логический дескриптор экрана (7 байт)
Глобальная таблица цветов (6 байтов)
Расширение графического управления (8 байт)
Дескриптор изображения (10 байт)
Данные изображения (5 байтов)
GIF-трейлер (1 байт)
Источник: Самый крошечный GIF на свете .
источник
Вы можете попробовать следующие данные SVG (60 байт):
Автономный файл svg будет выглядеть (62 байта):
Смотрите также:
источник
content
свойства.Это самый маленький из найденных мною (26 байт):
источник
Я использую следующие данные uri, чтобы получить пустое изображение:
//:0
источник
Для пустого изображения:
(это переведет на
src=(unknown)
)источник