Retour au blog
Cas d'usageGuides

Notes de groupe : image cassée ? Dépanner les images sur 3 plateformes (2026)

Publié le15 min read
Partager

Première semaine de rentrée, ma page de notes est devenue un mur d'images cassées

D'abord une petite honte perso.

En septembre dernier, première semaine de cours, j'ouvre un HackMD avec trois camarades tout juste rencontrés pour des notes de groupe : points clés du cours, photos du tableau. Tout excité, je colle mes captures de téléphone une par une, chez moi l'écran est nickel, j'étais même plutôt fier. Le soir, un camarade m'écrit : « eh, ton passage là, c'est que des petites icônes cassées ? »

Je suis resté bloqué. Chez moi c'est parfait pourtant !

Après, j'ai ouvert une fenêtre de navigation privée avec un autre compte, et j'ai vu que le camarade disait vrai — toute une rangée d'images transformée en cette fameuse icône « échec de chargement » toute craquelée. Sincèrement, c'était un peu la déprime. Première collab avec des gens pas encore familiers et je me plante comme ça, à vouloir rentrer sous terre.

Pas de panique, si ça vous arrive aussi, ce guide est écrit pour vous. Ce n'est pas compliqué, c'est juste que personne ne vous a prévenu qu'il existe « deux façons de mettre une image dans des notes partagées ».

Comprenez d'abord une chose : une image, c'est « upload » ou « lien externe »

C'est la racine de tous les problèmes d'images cassées, à maîtriser en premier.

En clair, pour mettre une image dans des notes partagées, il n'y a que deux voies.

La première s'appelle l'upload. Le fichier image est dupliqué et stocké sur le serveur de la plateforme de notes elle-même. Imaginez que vous développez la photo et la collez dans un cahier physique — la photo est fixée dans le cahier ; à qui que vous passiez le cahier, l'image y est.

La seconde s'appelle le lien externe (certains disent « lien intégré »). Ce que contiennent les notes n'est pas l'image elle-même, mais une « adresse » pointant vers un emplacement ailleurs. Imaginez qu'au lieu de la photo, votre cahier ne contient qu'une ligne : « la photo est dans le troisième tiroir à la maison ». Vous, vous rentrez chez vous et ouvrez le tiroir ; les autres restent bloqués à la porte.

Vous voyez ? Mes images cassées, c'était le deuxième cas. La source de mes captures était un endroit auquel moi seul avais accès, et le navigateur de mes camarades ne pouvait tout simplement pas atteindre ce « tiroir ».

Au premier regard, les deux paraissent identiques : l'image apparaît dans les deux cas. La différence n'émerge qu'au moment où « on change de personne, d'ordinateur, de compte » — et l'essence même des notes partagées, c'est que plein de gens les regardent ensemble. D'où le piège que presque tout le monde se prend.

HackMD : ![](url) est pratique, mais avec deux pièges cachés

HackMD est le premier choix de beaucoup de groupes en info et sciences, parce que sa synchro en temps réel est ultra rapide : les camarades voient vos mots avant même que vous ayez appuyé sur Entrée. Il utilise la syntaxe Markdown.

La façon la plus carrée de mettre une image, c'est l'upload intégré de HackMD. Trois manipulations :

  1. Glisser-déposer le fichier image directement dans la zone d'édition
  2. Cliquer sur la petite icône image de la barre d'outils et choisir le fichier
  3. Copier l'image puis Ctrl+V / Cmd+V pour la coller

Ces trois méthodes génèrent automatiquement une syntaxe ![](adresse de l'image), et l'image est uploadée sur HackMD. Ainsi, les camarades la voient en général.

Premier piège ici : la version gratuite limite chaque image à 1 Mo. Aujourd'hui une capture de téléphone fait facilement 2 ou 3 Mo, donc certaines passent, d'autres non, et celle qui dépasse échoue en silence. La version payante Prime monte à 20 Mo. Avant des notes de rentrée, prenez donc l'habitude de « compresser d'abord, coller ensuite ».

J'ai compté moi-même : une capture plein écran d'iPhone fait environ 2,4 Mo, une capture de jeu ou de page web longue grimpe au-delà de 4 Mo. Collées telles quelles dans la version gratuite de HackMD, sur dix images trois ou quatre échouent en silence — et le pire, c'est que ça n'affiche aucune erreur sur le moment. L'écran perd juste quelques images en silence, et vous risquez de rendre les notes complètes avant de vous en apercevoir. « Compresser avant de coller » n'est pas une lubie, ça peut vous sauver. Un outil gratuit comme Squoosh (squoosh.app) fait l'affaire : compressez sous 1 Mo avant de coller, sinon HackMD ne digère pas.

Le deuxième piège est plus sournois, et beaucoup ignorent la règle : les droits d'une image sur HackMD suivent les droits de « la note d'origine » où elle a été postée. Autrement dit, si vous collez une image dans la « note A », puis copiez l'adresse de cette image vers une « note B » partagée, le jour où vous supprimez la « note A » ou passez sa lecture en privé, l'image de la « note B » meurt avec, cassée. Sur HackMD, le plus sûr reste donc d'uploader l'image directement dans ces notes partagées-ci, sans copier de lien depuis une autre note privée. Retenez ça, et vous divisez par deux le risque d'image cassée.

Notion : un même « coller » peut être un upload ou un lien externe

Notion n'a pas de syntaxe à apprendre, l'interface est jolie, beaucoup s'en servent pour la page de synthèse d'un exposé. Mais sa logique d'image embrouille encore plus les débutants.

Pour mettre une image dans Notion, deux options :

  • Upload : choisir un fichier depuis l'ordinateur, ou glisser l'image dans la page. Cette image vit dans le cloud de Notion, c'est le plus stable.
  • Embed link (lien intégré) : coller une adresse d'image.

Le point crucial : Embed link est par nature un lien externe. Notion va simplement « chercher l'image en temps réel à cette adresse pour l'afficher ». Dès que la source supprime l'image ou coupe les droits, votre page Notion affiche un froid Failed to Load.

Au début, je ne comprenais pas non plus pourquoi parfois ça tenait, parfois ça sautait quelques jours plus tard. J'ai fini par piger : la différence, c'était juste si j'avais appuyé sur Upload ou sur Embed.

Une idée reçue à casser au passage : la version gratuite de Notion n'impose plus de limite de taille par fichier uploadé (il y avait 5 Mo à une époque, supprimé depuis). Donc sur Notion, quand vous pouvez Upload, faites Upload, n'allez pas coller par flemme un lien externe à la provenance douteuse.

Petit détail que les débutants zappent : après avoir collé une image via Embed, pour vérifier si elle tient, le plus rapide est de partager la page en lien public, puis de l'ouvrir sur téléphone dans un navigateur non connecté. Dès qu'une image devient Failed to Load, c'est un lien externe qui cassera le jour où la source tombe. Une minute de test vaut mieux que de virer au vert devant toute la classe le jour de l'exposé, non ?

Google Docs : insérer une image, ok ; le lien Drive, c'est la mine

Le gros du volume des exposés reste Google Docs, parce que la barrière d'entrée est la plus basse : toute la classe sait s'en servir.

Bonne nouvelle : « Insertion → Image → Importer depuis l'ordinateur » est sûr. L'image est stockée dans le document, visible pour tous les partagés, quasi jamais cassée. Rien à craindre de ce côté.

La vraie mine, c'est l'autre entrée : « Insertion → Image → par URL ». Ici, Google impose une règle explicite : l'URL collée ne peut pas être un lien drive.google.com. Impossible donc de prendre le lien de partage d'une image de votre propre Drive comme source ; le système la refuse tout net.

Pire, le lien externe vers une image Drive s'est encore dégradé globalement. D'après les nombreux signalements début 2024, Google a, à cause d'ajustements sur la politique des cookies tiers, fait tomber en masse pages et documents qui « affichaient une image via un lien Drive ». Vous la voyez sur votre compte, un autre dans un autre contexte voit du vide. Ce n'est pas une erreur de config, c'est Google qui a rétréci cette voie.

En une phrase : le lien de partage d'un cloud personnel (Google Drive, Dropbox, iCloud) n'est par nature pas fait pour du « lien direct d'image » ; collé dans des notes partagées, il casse presque à coup sûr.

Les trois plateformes, un tableau pour tout comprendre

J'ai résumé le tout dans un tableau à balayer d'un coup d'œil avant vos notes :

Plateforme Façon la plus stable Ce qui casse Limite version gratuite
HackMD Upload direct dans ces notes Copier un lien depuis une autre note privée 1 Mo par image
Notion Appuyer sur Upload Coller une URL externe via Embed link plus de limite par fichier
Google Docs Insertion → Importer depuis l'ordi Insertion → par URL avec un lien Drive intégrée, suit le document

Le point commun ? La « solution stable » des trois plateformes tient en une phrase : faites entrer le fichier image lui-même dans les notes, plutôt que d'y jeter une adresse externe.

Pourquoi « un lien de cloud personnel » finit toujours mal

Une couche de plus sur le principe, parce qu'une fois compris vous ne retomberez plus jamais dedans.

Un cloud personnel (Google Drive, iCloud, Dropbox) est conçu pour l'archivage privé + le partage sur autorisation, pas pour du « lien direct d'image » web. Derrière leur lien de partage, il y a en général ces trois barrières :

  1. Contrôle des droits : la personne est-elle autorisée ? Sinon, bloqué.
  2. Vérification de connexion : beaucoup de liens de partage vérifient en douce si vous êtes connecté à votre compte Google / Dropbox.
  3. Anti-hotlink (contrôle du Referer) : le serveur regarde « depuis quel site cette requête d'image part » ; pas de chez lui, refusé.

Quand la plateforme de notes affiche l'image pour vos camarades, elle frappe à ce lien avec l'identité d'un « visiteur inconnu ». N'importe laquelle de ces trois barrières qui bloque, et l'image ne sort pas. Et vous, comme vous êtes déjà connecté et déjà autorisé, vous ne détectez jamais le souci — voilà pourquoi « chez moi c'est parfait pourtant » est devenu la réplique culte.

La plus contre-intuitive est la troisième, l'anti-hotlink ; la première fois je n'y comprenais rien non plus. Imaginez une cantine d'entreprise : le vigile à l'entrée ne reconnaît que le badge maison, et quelqu'un de l'extérieur qui entre avec le même menu se fait refouler pareil. La plateforme, quand elle va chercher l'image pour vos camarades, n'a justement pas ce « badge », donc bloquée dehors. Une fois cette couche comprise, vous saisissez pourquoi le problème d'image cassée surgit toujours du côté des autres, jamais sur votre propre machine.

Franchement, ce n'est pas que la config est bête, c'est l'outil utilisé dans le mauvais contexte. Pour qu'une image soit vue de façon stable par n'importe qui sur n'importe quel appareil, il vous faut un service dédié à « fournir du lien direct public » : un hébergeur d'images.

Pas à pas : le SOP pour que les images de vos notes ne cassent jamais

Une procédure à suivre les yeux fermés, à lire absolument si vous débutez :

  1. Réfléchissez avant d'ouvrir les notes : ces notes seront-elles vues par d'autres ? Si oui, pas de lien de cloud personnel pour coller les images.
  2. Uploadez dès que possible : glisser-déposer sur HackMD / Upload sur Notion / Importer depuis l'ordi sur Google Docs, priorité à cette voie.
  3. Image trop lourde, compressez d'abord : les captures font souvent 2-3 Mo, passez-les sous 1 Mo avec Squoosh (squoosh.app) ou TinyPNG, sinon HackMD ne digère pas.
  4. Une même image à plusieurs endroits ? Passez à l'hébergeur : si la même image va dans les notes, sur Discord et dans les slides d'exposé, posez-la sur un hébergeur à lien stable, copiez cette adresse partout, réglé d'un coup.
  5. Autotest en navigation privée avant la mise en ligne : ouvrez un onglet privé non connecté, ouvrez les notes, regardez si toutes les images apparaissent. Cette étape prend 30 secondes et sauve la face de tout le groupe.

Le point 5 est le plus important. Rien que cette étape, et vous ne recevrez plus jamais le message « ta page là, c'est que des images cassées ». Pas de panique, à l'époque c'est aussi comme ça que je m'en suis sorti — vous voyez, pas si dur en fait.

Un mot sur le RGPD quand vos camarades apparaissent sur les photos

Détail que l'on oublie souvent en groupe : dès que vos notes contiennent des photos où l'on reconnaît des camarades (photos de TP, tableau avec un visage en arrière-plan), vous manipulez des données personnelles au sens du RGPD. Pour une page partagée en public, privilégiez un hébergeur qui propose un lien protégé par mot de passe ou éphémère, plutôt qu'un lien direct grand ouvert que n'importe qui pourrait aspirer. Ça évite qu'une photo interne au groupe finisse indexée quelque part.

Quand il faut un lien direct stable, l'hébergeur est la solution la plus simple

Si votre image doit être réutilisée sur plusieurs plateformes (notes + groupe de discussion + slides), plutôt que de l'uploader séparément partout, uploadez une fois, récupérez un lien direct stable, collez-le partout. C'est tout le sens d'un hébergeur.

Prenez lpic.cc : upload gratuit sans inscription, il vous donne un lien direct à coller dans un ![](url) HackMD, un Embed Notion, ou n'importe quel Markdown, distribué via CDN, ouverture stable pour n'importe qui sur n'importe quel appareil. Quelques fonctions bien utiles pour les notes : protection par mot de passe (une photo de tableau sensible qu'on ne veut pas voir traîner), lien éphémère (expiration auto après lecture), et il prend aussi la vidéo, pas seulement l'image.

Soyons honnêtes sur les limites : les fichiers gratuits de lpic.cc ont une durée de conservation plafonnée (actuellement 30 jours), une taille maximale par fichier, et c'est un service gratuit financé par la publicité. Il convient donc au scénario « notes d'un semestre, partage ponctuel » ; pour de l'archivage permanent, des données à retrouver dans dix ans, faites une sauvegarde long terme à part, ne mettez pas l'unique exemplaire ici.

FAQ

Q1 : pourquoi je vois l'image alors que mes camarades voient une image cassée ?

Neuf fois sur dix parce que vous avez utilisé un « lien externe » et non un « upload », et que cette source (souvent votre cloud personnel ou une note privée) n'est accessible qu'à vous. Le navigateur des camarades va chercher l'image en visiteur inconnu, bloqué par les droits, image cassée. Solution : l'« upload » intégré de la plateforme, ou un hébergeur à lien direct public.

Q2 : HackMD me dit sans arrêt que l'upload a échoué, je fais quoi ?

Vérifiez d'abord la taille. La version gratuite plafonne à 1 Mo par image, une capture dépasse facilement. Compressez avec Squoosh ou TinyPNG avant de coller. Confirmez aussi que vous « uploadez » dans ces notes, pas que vous copiez un lien depuis une autre note privée.

Q3 : je peux coller directement un lien d'image Google Drive dans les notes ?

Fortement déconseillé. Google Docs refuse déjà les URL d'image drive.google.com ; et sur les autres plateformes, le lien externe vers une image Drive tombe en masse depuis 2024 à cause de la politique des cookies de Google. Le lien de partage d'un cloud personnel n'est pas fait pour du lien direct, ça casse.

Q4 : Upload vs Embed sur Notion, quelle différence au juste ?

Upload stocke le fichier dans le cloud de Notion, le plus stable, la source supprimée ne change rien. Embed va chercher l'image en temps réel à une URL externe ; source supprimée ou droits coupés, ça affiche Failed to Load. Quand vous pouvez Upload, Upload.

Q5 : une image à mettre en même temps dans les notes, sur Discord et dans l'exposé, le plus simple ?

Uploadez sur un hébergeur à lien direct stable (par exemple lpic.cc, sans inscription), prenez une URL, collez-la partout. Vous ne maintenez qu'une seule source, toutes les plateformes voient la même image, sans re-uploader à chaque endroit.

Sources

#notes collaboratives#HackMD#Notion#Google Docs#intégration d'images#image cassée#étudiants
S

Rédigé par

Sandy Lin

Guide débutant

Explique chaque étape du point de vue d'un novice, de la façon la plus simple qui soit.