Ho creato un dispositivo di scorrimento immagine (basato sul fantastico bxSlider) che precaricherà le immagini just-in-time prima che esse vengano visualizzate. Funziona abbastanza bene già, ma non penso che la mia soluzione sia HTML valido.Immagine vuota codificata come dati uri

mia tecnica è come segue: I generare il codice cursore sull'immagine prima slitta con essendo inserito come al solito (con <img src="foo.jpg">) e le immagini successive viene fatto riferimento in un attributo di dati come <img data-orig="bar.jpg">. Un Javascript quindi manipola la modifica data-orig -> src quando necessario, attivando il preloading.

In altre parole, sono:

<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>

Per evitare vuoti src="" attributi (che sono harmful to performance in some browsers), ho inserito src="data:" per inserire efficacemente un'immagine vuota come segnaposto.

Il fatto è che non riesco a trovare nulla nel documentation for data-URI dicendo se questo è un URI di dati valido o meno. Fondamentalmente voglio l'URI di dati minimi che si risolve in un'immagine vuota/trasparente, in modo che il browser possa risolvere immediatamente lo src e andare avanti (senza errori o richieste di rete). Forse src="data:image/gif;base64," sarebbe meglio?

fonte

2012-02-03 Jens Roland

Basta usare l'hash vuoto. http://stackoverflow.com/a/28077004/3841049 – iGidas

@ iGidas: cattiva idea, dato che molti browser eseguiranno effettivamente una seconda richiesta alla pagina principale (causando un impatto molto peggiore rispetto all'immagine originale e creando voci confuse nel tuo registri del server), provare a interpretare l'HTML come un'immagine, generare un errore e potenzialmente causare errori reali dell'applicazione (ad esempio nei carrelli degli acquisti/nelle pagine di pagamento in cui l'aggiornamento della pagina provoca l'aggiunta di ulteriori elementi nel carrello o attiva misure di sicurezza) –

Che dire dei dati reali: image/gif; base64, 'usati come' src'? O anche dati più brevi:, 'termina con un coma. Sembra essere un codice HTML valido e funziona in tutti i browser moderni senza errori. Qualche argomentazione contro il suo utilizzo? – bobo

140

Ho esaminato e il smallest possible transparent GIF image, codificato come un dato -uri, era questo:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

che è quello che sto usando ora.

fonte

2012-04-01 18:47:07

Se il tuo elemento 'img' è già nascosto e stai solo cercando di evitare gli errori HTTP 404, consulta http://stackoverflow.com/a/14115340/14731 per i dati più brevi di un'immagine non trasparente. – Gili

se è necessario un pixel dell'immagine 1x1 trasparente sufficiente impostare questo uri dati come attributo src predefinito

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

questo è invece una codifica base64 per un 1x1 bianco

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

altrimenti si potrebbe impostare data:null e salvare ~ 60 byte in più per ogni immagine

fonte

2012-02-03 11:30:51 fcalderan

Puoi fornire un link per verificare che i dati: null è valido come origine dell'immagine? –

dati: null non è valido. – Jack

ha sempre funzionato per me. – fcalderan

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

è più piccolo: D

fonte

2013-11-10 16:05:16 Alex

Vero - quello è adorabile! Ma è una gif conforme allo standard? Potresti approfondire come sei arrivato a questo? –

http://proger.i-forge.net/The_smallest_transparent_pixel/eBQ – Alex

ff 27.0 punto nero –

"gif bianca" di Fabrizio non è in realtà perfettamente bianca: è rgb(254, 255, 255).

Io uso il seguente (che sembra essere più piccolo), trovato su this page.

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

fonte

2014-02-28 15:18:05

Quello va bene se vuoi un pixel bianco, ma cercavo uno più generico trasparente. –

1px per 1px immagine JPEG

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

fonte

2014-04-14 23:07:17

La più piccola che abbia mai visto

dati: image/gif, Base64, R0lGODlhAQABAAAAACw =

fonte

2014-07-03 09:05:34 azerafati

Certo, tranne che è solo Chrome. Aprilo in Firefox e otterrai "L'immagine non può essere visualizzata perché contiene errori". Vedi http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/ [20121112]% 20The% 20mallest% 20transparent% 20pixel.html –

@JensRoland, sì giusto confermo che non funziona su Firefox! anche se quando lo uso più di un anno fa non ricordo alcun problema con FF! strano – azerafati

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

Valido e altamente comprimibile. Essenzialmente gratuito se c'è un altro svg in linea nella pagina.

fonte

2015-07-12 11:12:15 Adria

Mi piace questo. Vedo solo due punti deboli: in primo luogo, SVG non è supportato in IE <9 (di solito non è un problema, ma lo rende non fattibile per alcuni siti); e in secondo luogo, "I dati SVG devono essere uriencoded per funzionare in IE e Firefox" (vedi http://caniuse.com/#search=datauri), quindi in realtà devi usare: 'data: image/svg + xml,% 3Csvg% 20xmlns =% 22http: // www.w3.org/2000/svg% 22 /% 3E' che è ancora 4 byte più corto del mio, ma sembra un po 'disordinato –

Immagine vuota codificata come dati uri

risposta

La più piccola che abbia mai visto

Problemi correlati