← Synthèse de l'atelier Atelier du 25 juin
Étape 3

Quand vos images ne s'affichent pas

Le piège classique du débutant, et la solution simple montrée pendant l'atelier.

3.1Le symptôme

Vous mettez votre page en ligne, et là, surprise : le logo a disparu, les images sont absentes. Jérôme l'a montré en direct sur la première version de la page de Guillaume.

3.2Pourquoi ça arrive

C'est logique une fois qu'on l'a compris : vos images sont stockées sur votre ordinateur, pas en ligne. Quand la page est sur internet, elle cherche les images... et ne les trouve pas, car elles sont restées chez vous.

Jérôme : « Les images, elles sont stockées dans mon ordinateur, elles ne sont pas stockées en ligne. Donc si je veux qu'elles s'affichent, il faut que je les stocke quelque part où la page peut y accéder. »

Il y a donc deux solutions.

3.3L'astuce base64, en pratique

Pas besoin de comprendre la technique. « base64 » veut juste dire : l'image est encodée et rangée à l'intérieur du code de la page. Du coup, elle voyage avec la page, et s'affiche partout, sans hébergement.

Jérôme : « N'essayez pas de comprendre. base64, ça veut dire qu'il va mettre l'image dans le code, pour que vous n'ayez pas besoin de l'héberger quelque part. »
La demande à Claude
Est-ce que tu peux stocker les images directement dans le code, en base64 ?

3.4Remplacer une image précise

Pour changer une image existante, Jérôme procède simplement : il fait une capture d'écran de l'endroit concerné, il glisse la nouvelle image dans Claude, et il explique.

Exemple de demande
Voici une capture d'écran de ma page, et voici l'image que je veux que tu remplaces à cet endroit précis. Intègre-la en base64.
Pour récupérer les images d'une maquette : si vos visuels viennent d'un autre outil, demandez-lui de vous donner chaque image individuellement pour pouvoir les télécharger, puis donnez-les une par une à Claude.
À garder en tête : le base64 est parfait pour démarrer vite et gratuitement. Pour un site avec beaucoup d'images lourdes, l'hébergement classique reste préférable (page plus légère). On voit ça à l'étape suivante.