Пустое изображение, закодированное как данные-uri [дубликат]

этот вопрос уже есть ответ здесь:

Я построил слайдер изображения (на основе потрясающего bxSlider) который будет предварительно загружать изображения как раз вовремя, прежде чем они скользят в поле зрения. Это уже работает довольно хорошо, но я не думаю, что мое решение является допустимым HTML.

моя техника заключается в следующем: Я создаю разметку слайдера с первым изображением слайда, вставленным как обычно (с <img src="foo.jpg">) и последующие изображения, на которые ссылаются в атрибуте данных, например <img data-orig="bar.jpg">. Затем Javascript жонглирует data-orig -> src измените при необходимости, вызывая предварительную загрузку.

другими словами, у меня есть:

<div class="slider">
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

С src="" атрибуты (такие как вредно для производительность на некоторые браузеры), я вставил src="data:" эффективно вставить пустое изображение в качестве заполнителя.

дело в том, что я ничего не могу найти в документация для data-URI говоря, является ли это допустимым data-URI или нет. Я в основном хочу минимальный URI данных, который разрешает пустое / прозрачное изображение, поэтому браузер может немедленно разрешить src и двигаться дальше (без ошибки или сетевого запроса). Может быть src="data:image/gif;base64," будет лучше?

7 63
html5 web-standards data-uri

7 ответов:

Я посмотрел в него и наименьшее возможное прозрачное изображение GIF, закодированный как data-uri, был такой:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

что я использую сейчас.

148

если вам нужно прозрачное изображение 1x1 пиксель просто установите эти данные uri как src по умолчанию

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

это вместо кодировки base64 для изображения 1x1 белый

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

в противном случае вы можете установить data:null и сохранить ~60 дополнительных байт для каждого изображения

26
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

действительный и сильно сжимаемый. По существу бесплатно, если на странице есть еще один встроенный svg.

16

самый маленький, который я когда-либо видел

данные: изображение / gif; base64, R0lGODlhAQABAAAAACw=

14
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

меньше :D

9

1px на 1px JPEG image

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
6

"белый gif" Фабрицио на самом деле не совсем белый : это rgb(254, 255, 255).

Я использую следующий (который оказывается меньше), найденный на на этой странице.

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
4