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

Ответы

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

меньше: D

Ответ 5

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

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

Ответ 6

1px на 1px изображение в формате JPEG

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

Ответ 7

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

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

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