phnjcmlwdd pgjvzhk pgh0bww pc9odg1spg pc9ib2r5pjwvahrtbd4 img data html5 web-standards data-uri

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=



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.