Пустое изображение, закодированное как data-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:" для эффективной вставки пустого изображения в качестве заполнителя.

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

63
data-uri html5 web-standards

7 ответов

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

148

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

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

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

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

1 пиксель на 1 пиксель изображения JPEG

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