html5 - pgjvzhk - Imagen en blanco codificada como data-uri
image url to base64 (7)
El más pequeño que he visto
datos: image / gif; base64, R0lGODlhAQABAAAAACw =
Esta pregunta ya tiene una respuesta aquí:
bxSlider un deslizador de imagen (basado en el fabuloso bxSlider ) que precargará las imágenes justo a tiempo antes de que se bxSlider . Ya está funcionando bastante bien, pero no creo que mi solución sea HTML válido.
Mi técnica es la siguiente: genero el marcado deslizante con la primera imagen de diapositivas insertada como de costumbre (con un <img src="foo.jpg"> ) y las imágenes subsiguientes a las que se hace referencia en un atributo de datos como <img data-orig="bar.jpg"> . A continuación, Javascript hace malabares con el cambio de origen de data-orig -> src cuando es necesario, lo que activa la precarga.
En otras palabras, tengo:
<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>
Para evitar los atributos src="" vacíos (que son perjudiciales para el rendimiento en algunos navegadores ), he insertado src="data:" para insertar efectivamente una imagen en blanco como marcador de posición.
La cuestión es que parece que no encuentro nada en la documentación del URI de datos que indique si este es un URI de datos válido o no. Básicamente, quiero que el URI de datos mínimo que se resuelve en una imagen en blanco / transparente, para que el navegador pueda resolver el src inmediatamente y seguir adelante (sin error ni solicitud de red). Tal vez src="data:image/gif;base64," sería mejor?
1px por 1px imagen JPEG
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
El "gif blanco" de Fabrizio no es realmente blanco: es rgb(254, 255, 255) .
Utilizo el siguiente (que es más pequeño), que se encuentra en proger.i-forge.net/The_smallest_transparent_pixel/eBQ .
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
Lo investigué y la imagen GIF transparente más pequeña posible , codificada como un uri de datos, era esta:
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
que es lo que estoy usando ahora.
si necesita una imagen transparente de 1x1 píxeles, simplemente configure esta uri de datos como atributo predeterminado de src
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
esto es en cambio una codificación base64 para una imagen 1x1 blanco
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
de lo contrario, podría establecer data:null y guardar ~ 60 bytes adicionales para cada imagen
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
es más pequeño: D
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
Válido y altamente compresible. Esencialmente gratis si hay otra svg en línea en la página.