web-dev-qa-db-fra.com

Image vide codée en tant que data-uri

J'ai construit un curseur d'image (basé sur le formidable bxSlider ) qui précharge les images juste à temps avant qu'elles ne glissent dans la vue. Cela fonctionne déjà plutôt bien, mais je ne pense pas que ma solution est un code HTML valide.

Ma technique est la suivante: je génère le balisage du curseur avec la première image de la diapositive insérée comme d'habitude (avec un <img src="foo.jpg">) et les images suivantes référencées dans un attribut de données comme <img data-orig="bar.jpg">. Un Javascript jongle alors le data-orig -> src changez si nécessaire en déclenchant le préchargement.

En d'autres termes, j'ai:

<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="" attributs (qui sont nuisibles à la performance dans certains navigateurs ), J'ai inséré src="data:" pour insérer efficacement une image vierge en tant qu’espace réservé.

Le problème est que je n'arrive pas à trouver quoi que ce soit dans la documentation relative à l'URI de données indiquant s'il s'agit d'un identifiant de données valide ou non. Je veux fondamentalement l'URI de données minimal qui résout une image vide/transparente, afin que le navigateur puisse résoudre le problème immédiatement et continuer (sans erreur ni demande réseau). Peut être src="data:image/gif;base64," serait mieux?

html5web-standardsdata-uri
67
Jens Roland

J'ai regardé et la la plus petite image GIF transparente possible , encodée en tant que data-uri, était la suivante:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

c'est ce que j'utilise maintenant.

151
Jens Roland

si vous avez besoin d'une image transparente 1x1 pixel, définissez cette donnée comme uri avec l'attribut src default

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

c'est à la place un encodage base64 pour une image 1x1 blanche

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

sinon vous pouvez définir data:null et économisez environ 60 octets supplémentaires pour chaque image

27
fcalderan

Le plus petit que j'ai jamais vu

données: image/gif; base64, R0lGODlhAQABAAAAACw =

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

Valable et hautement compressible. Essentiellement gratuit s'il y a un autre svg en ligne dans la page.

18
Adria
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

est plus petit: D

10
Alex

Image JPEG 1px par 1px

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

Le "gif blanc" de Fabrizio n'est pas réellement parfaitement blanc: c'est rgb(254, 255, 255).

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

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
4
Maël Nison