Image vierge codée en data-uri

Question

J'ai construit un slider d'images (basé sur le formidable système de gestion de l'image). bxSlider ) qui préchargera les images juste à temps avant qu'elles ne s'affichent. Cela fonctionne déjà assez bien, mais je ne pense pas que ma solution soit du HTML valide.

Ma technique est la suivante : Je génère le balisage du curseur avec la première image de la diapositive qui est insérée comme d'habitude (avec une balise <img src="foo.jpg"> ) et les images suivantes étant référencées dans un attribut de données tel que <img data-orig="bar.jpg"> . Un Javascript jongle ensuite avec les data-orig -> src changer si nécessaire, ce qui déclenche le préchargement.

En d'autres termes, je l'ai fait :

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

Pour éviter les vides src="" (qui sont nuisible à la performance en certains navigateurs ), j'ai inséré src="data:" pour insérer efficacement une image vierge en guise d'emplacement.

Le truc, c'est que je ne trouve rien dans le documentation pour data-URI disant si c'est une URL de données valide ou non. Je veux essentiellement la data-URI minimale qui se résout en une image vide/transparente, de sorte que le navigateur puisse résoudre la src immédiatement et passer à autre chose (sans erreur ni demande de réseau). Peut-être src="data:image/gif;base64," serait mieux ?

Answer 1

Je me suis renseigné et le une image GIF transparente la plus petite possible encodé comme un data-uri, était le suivant :

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

qui est ce que j'utilise maintenant.

Answer 2

Si vous avez besoin d'une image transparente de 1x1 pixel, il suffit de définir cette uri de données comme src attribut par défaut (conservez l'attribut /// il encode l'octet 255, et non un commentaire).

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

Il s'agit plutôt d'un encodage base64 pour une image 1x1 blanche.

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

Sinon, vous pourriez définir data:null et économiser ~60 octets supplémentaires pour chaque image.

Answer 3

Le plus petit que j'ai jamais vu

data:image/gif;base64,R0lGODlhAQABAAAAACw=

mettre à jour : Ceci semble cassé et ne fonctionne plus comme signalé par @bryc, veuillez utiliser les autres réponses.

Answer 4

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

est plus petit :D

Answer 5

Le "gif blanc" de Fabrizio n'est en fait pas parfaitement blanc : il est rgb(254, 255, 255) .

J'utilise celui qui suit (qui se trouve être plus petit), trouvé sur cette page .

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