5545 sujets

Sémantique web et HTML

Incorporation base64

Pour certaines raison, je veux incorporer des images en base64 dans le html. Et mon problème est le suivant.

<img src=""data:image/png;base64,iVBORAA ... / ... AACYII="">

Ca va une fois, mais si plus loin j'ai de nouveau <img src="..base64..."> avec la même image, ça m'ennuie franchement de la coller une seconde fois !

Est-ce que vous voyez une solution pour incorporer l'image une seul fois dans la page et l'utiliser à plusieurs endroits ?

J'aimerais une solution en html pure.

Vous avez une idée ? Parce que j'aimerais éviter cette grosse astuce en javascript.


<script type="text/javascript">
	function preloader() {
		document.img01.src = document.img00.src
		document.img02.src = document.img00.src
	}
</script>
</head>

<body onload="javascript:preloader()">

<img name="img00" style="display:none" src="data:image/png;base64,iVBORAA ... / ... AACYII=">

<img name="img01"/>
<img name="img02"/>


En fait ce que je recherche pourrait plutôt ressemble à ceci :


<link id="imglnk00" type="image/png" href="data:image/png;base64,base64,iVBORAA ... / ... AACYII="/>

</head>

<body>

<img name="imglnk00"/>
<img name="imglnk00"/>

Modifié par FredOoo123 (19 May 2012 - 14:41)
Je précise un peu la question avec un exemple fonctionnel.


<!DOCTYPE HTML>
<html>
<head>
<title>twice</title>
<meta http-equiv="Content-Type" content="test/html; charset=utf8">
<!-- STYLE -------------------------------------------->
<style>
	img { width: 20px; height: 20px; }
</style>
<!-- SCRIPT ------------------------------------------->
<script type="text/javascript" src="/libs/jquery/jquery-1.7.2.js"></script>

<!-- DATA --------------------------------------------->
<link id="dotred"   href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEE0AABBNAWeMAeAAAAAQSURBVBhXY3growJEDBAKACQeBLVrBNr6AAAAAElFTkSuQmCC">
<link id="dotblue"  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEE0AABBNAWeMAeAAAAAUSURBVBhXY2RY9OI/AxAwgQgQAAAl4AKNm2sY5wAAAABJRU5ErkJggg==">

<link name="dotgreen" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEE0AABBNAWeMAeAAAAAUSURBVBhXY1Ta6POfAQiYQAQIAAAf7gIirThUywAAAABJRU5ErkJggg==">

</head>
<!-- BODY --------------------------------------------->
<body>

<img link="dotred"/> <img link="dotblue"/><br/>
<img link="dotblue"/> <img link="dotred"/><br/>

<img name="dotgreen"/> <!-- mais je voudrais ça, sans javascript -->

</body>

<!-- SCRIPT DOM OK ------------------------------------>
<script type="text/javascript">
	namedImages = $("img*link*"); <!-- ici les * sont des crochets -->
	namedImages.each(function() {
		$(this).attr('src',   $( 'link#'+$(this).attr('link') ).attr('href')   ); 
	});
</script>

</html>


En fait, il me semblait que le tag <link> permettait d'attacher une ressource pour l'utiliser ensuite dans la page.
Si c'est bien le cas, autant se passer du javascript qui par ailleurs a déjà beaucoup de boulot.
Merci
Bonjour,

le problème est qu'en html pur, l'attribut src="..." est requis pour chaque balise <img/>, et ce même dans le tout-nouveau-tout-beau-hyper-permissif-HTML5 .

Dans un futur lointain, css permettra de rappeler un élément d'une page via la propriété element(); . Cela produira une image de l'élément en question, ce qui correspondrait parfaitement à ta question.

Pour en revenir à ta question, en html pur si tu dois afficher deux fois la même image ( ce qui semble avoir un intérêt limité, dans le flux du document ) tu dois indiquer deux fois la source.

Tu peux envisager une solution en css, à savoir placer sur une classe ton image via background-image, et dans ton html indiquer sur les balises images cibles ta classe, une source en spacer.gif ( beurk - mais un truc du genre ) et même indiquer les dimensions et le texte de remplacement de ton image en background. Cela évite au moins d'appeler un script...
Administrateur
Bonjour,

Tout comme Ten, je te confirme que HTML ne permet pas d'indiquer des "variables" (et n'est pas prévu pour).
Pour te faciliter la tâche en production, tu peux éventuellement te tourner vers des solutions telles que LESS ou Sass / Compass.

Bon week-end Smiley cligne
Merci pour ces réponses.

Pour ce qui est des css, je le fais déjà comme je l'ai déjà expliqué dans un précédent post qui a été sauvagement supprimé, parce qu'elle était redondante, par un modérateur alors que je tentais déjà d'aborder cette question.

En fait, je ne cherche pas des variables html. Je vois plutôt cela en terme de ressources au sens ou le navigateur est habitué à demander une ressource et le serveur à la lui donner.

En fait, une ressource, on l'obtient toujours par une adresse, une url.

Barre d'adresse du navigateur ? >>> Je veux voir ça.
<a href=" >>> Je veux aller là, voir ça
<img src=" voici l'adresse du fichier à afficher ici.
etc.

Il faut reconnaître que la possibilité de faire ce qui suit ne va pas de soi.

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...

Là où le navigateur à l'habitude de trouver une adresse où il trouvera la ressource, il est capable de comprendre qu'il l'a directement.
Il attendais une string et il a.. ok, c'est encore une string, mais c'est des données, qu'en plus il va gentiment décoder.


Maintenant, si l'on regarde le format mht, qui est un mélange de paramètres d'email, de html et de ressources (images, etc.). Le navigateur le lit très bien.

Si l'on regarde encore plus en détail on remarque quelque chose comme ceci :


<div id=3D"hLogo">
       <img src=3D"http://toto.org/img/logo.png" />
       <div id...


et un peu plus loin :


------=_NextPart_000_0000_50EF98F8.849EB739
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Location:  http://toto.org/img/logo.png
 

iVBORw0KGgoAAAANSUhEUgAAAkYAAAB0CAYAAABg8P3jAAA22klEQVR42u2d65NcVdXGp8p/wK9+
0Sqr/GDF0iqHqljwBkEoQgJeYphEUAoIMIrciSCQAIFAuAlyEXQEBDRy2YEIAbkpEQSDwUFDdCIo
EUxIuAWQaAAN5Lz57fB0znR6Zk732Xuf0zNrV+3a5+x91rn09HQ//axnrdWTDfVk1q1bt27duvX6...


Ce qu'il faut remarque c'est que la source de l'image, la donnée, n'est reliée que par l'adresse <ima src="http://toto.org/img/logo.png" grâce à Content-Location: http://toto.org/img/logo.png

Donc :
Le navigateur peut le faire.
Quand le fichier n'est plus mht mais html, il ne le fait plus.
On peut peut-être y arriver quand même ?...
Te es sûr que le format mhtml est lu nativement par autre chose qu'IE ? Sous Firefox et Chrome il me semble qu'il faut obligatoirement des extensions pour le lire.
Hum... Après un rapide coups d’œil, je crois que tu as raison jb_gfx.

Si c'est un module qui fait ça, il y a forcement plein de javascript. Alors je me résigne car je ne m'en tire pas si mal avec mes trois lignes.

On ne dira rien à propos des 10 000 lignes de jQuery bien-sûr... de toutes façon je l'utilise déjà pour d'autres raisons.

Merci
Cela dit, sais-tu qu'en intégrant une image en data-uri dans ton contenu HTML, tu empècheras sa mise en cache. Ce faisant, chaque requêtes sera plus lourde en poid, et au final, si tu gagne en temps de chargement sur la première requête*, tu perdras sur toutes les suivantes.


* cela dépendra toutefois de la taille de ton image. Si elle fait plus de 4ko, tu perdras en temps de chargement.
Sujet clos
Aller à