[{"data":1,"prerenderedAt":1335},["ShallowReactive",2],{"blog-post:fr:\u002Ffr\u002Fblog\u002Fcomment-ajouter-images-markdown":3},{"id":4,"title":5,"author":6,"body":7,"category":1309,"date":1310,"description":1311,"extension":1312,"image":1313,"imageAlt":5,"meta":1314,"navigation":1315,"path":1316,"seo":1317,"stem":1318,"tags":1319,"translationKey":1320,"__hash__":1321,"html":1322,"bodyMarkdown":1323,"translations":1324,"previous":1331,"next":1319},"blog\u002Ffr\u002Fblog\u002F6.comment-ajouter-images-markdown.md","Comment ajouter des images en Markdown","Antoine Frankart",{"type":8,"value":9,"toc":1285},"minimark",[10,14,17,20,25,28,45,48,70,73,82,85,88,104,107,111,114,123,126,134,137,143,150,153,162,165,189,192,198,201,216,223,227,230,239,242,245,248,252,255,258,267,270,285,288,297,300,304,307,316,319,322,326,329,332,420,423,427,430,433,442,445,448,495,498,501,510,513,517,520,523,545,548,559,621,624,628,631,640,643,657,660,669,678,682,685,705,708,711,715,718,727,730,733,737,744,747,781,784,802,806,809,840,843,846,850,853,862,865,874,877,880,889,892,896,901,904,919,923,926,937,946,949,958,961,965,968,977,980,986,989,992,1001,1004,1013,1017,1020,1054,1057,1066,1069,1073,1080,1083,1092,1095,1104,1108,1247,1250,1253,1256,1271,1274,1281],[11,12,13],"p",{},"Les images en Markdown ressemblent presque aux liens, avec un caractère en plus au début. Ce petit point d'exclamation est facile à oublier, mais il change tout : au lieu de créer un lien cliquable, Markdown intègre l'image directement dans le document.",[11,15,16],{},"La syntaxe de base prend cinq secondes à comprendre. Les détails prennent plus de temps : chemins locaux, texte alternatif, taille des images, légendes, comportement sur GitHub, intégrations Obsidian, et ce qui se passe quand le fichier est déplacé.",[11,18,19],{},"Ce guide couvre la version pratique, de la syntaxe dont vous avez besoin tous les jours jusqu'aux cas particuliers qui finissent souvent sur Stack Overflow.",[21,22,24],"h2",{"id":23},"la-syntaxe-de-base","La syntaxe de base",[11,26,27],{},"La syntaxe Markdown standard pour une image est :",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-markdown shiki shiki-themes github-light github-dark","![Texte alternatif](.\u002Fimage.png)\n","markdown","",[36,37,38],"code",{"__ignoreMap":34},[39,40,43],"span",{"class":41,"line":42},"line",1,[39,44,32],{},[11,46,47],{},"Elle contient trois éléments :",[49,50,51,58,64],"ul",{},[52,53,54,57],"li",{},[36,55,56],{},"!"," indique à Markdown qu'il s'agit d'une image, pas d'un lien.",[52,59,60,63],{},[36,61,62],{},"[Texte alternatif]"," décrit l'image.",[52,65,66,69],{},[36,67,68],{},"(.\u002Fimage.png)"," pointe vers le fichier image.",[11,71,72],{},"Par exemple :",[29,74,76],{"className":31,"code":75,"language":33,"meta":34,"style":34},"![Interface du lecteur Markdown Fude](.\u002Fimages\u002Ffude-reader.png)\n",[36,77,78],{"__ignoreMap":34},[39,79,80],{"class":41,"line":42},[39,81,75],{},[11,83,84],{},"Si l'image se charge correctement, le lecteur affiche l'image. Si elle ne se charge pas, la plupart des moteurs de rendu affichent le texte alternatif à la place.",[11,86,87],{},"L'erreur la plus fréquente consiste à oublier le point d'exclamation :",[29,89,91],{"className":31,"code":90,"language":33,"meta":34,"style":34},"[Logo](.\u002Flogo.png)   ← lien vers le fichier image\n![Logo](.\u002Flogo.png)  ← affichage de l'image\n",[36,92,93,98],{"__ignoreMap":34},[39,94,95],{"class":41,"line":42},[39,96,97],{},"[Logo](.\u002Flogo.png)   ← lien vers le fichier image\n",[39,99,101],{"class":41,"line":100},2,[39,102,103],{},"![Logo](.\u002Flogo.png)  ← affichage de l'image\n",[11,105,106],{},"La première ligne crée un lien. La seconde intègre l'image.",[21,108,110],{"id":109},"images-locales","Images locales",[11,112,113],{},"La plupart des images Markdown utilisent un chemin relatif. Le chemin est résolu à partir de l'emplacement du fichier Markdown.",[29,115,117],{"className":31,"code":116,"language":33,"meta":34,"style":34},"![Diagramme d'architecture](.\u002Fassets\u002Farchitecture.png)\n",[36,118,119],{"__ignoreMap":34},[39,120,121],{"class":41,"line":42},[39,122,116],{},[11,124,125],{},"Si votre document est ici :",[29,127,132],{"className":128,"code":130,"language":131,"meta":34},[129],"language-text","docs\u002Fguide.md\n","text",[36,133,130],{"__ignoreMap":34},[11,135,136],{},"Et votre image est ici :",[29,138,141],{"className":139,"code":140,"language":131,"meta":34},[129],"docs\u002Fassets\u002Farchitecture.png\n",[36,142,140],{"__ignoreMap":34},[11,144,145,146,149],{},"Alors ",[36,147,148],{},".\u002Fassets\u002Farchitecture.png"," est correct.",[11,151,152],{},"Si l'image est dans le dossier parent :",[29,154,156],{"className":31,"code":155,"language":33,"meta":34,"style":34},"![Logo](..\u002Flogo.png)\n",[36,157,158],{"__ignoreMap":34},[39,159,160],{"class":41,"line":42},[39,161,155],{},[11,163,164],{},"Les règles sont les mêmes que pour les liens relatifs :",[49,166,167,173,179],{},[52,168,169,172],{},[36,170,171],{},".\u002F"," signifie \"répertoire courant\".",[52,174,175,178],{},[36,176,177],{},"..\u002F"," signifie \"répertoire parent\".",[52,180,181,184,185,188],{},[36,182,183],{},"folder\u002Fimage.png"," fonctionne aussi, mais ",[36,186,187],{},".\u002Ffolder\u002Fimage.png"," rend l'intention plus claire.",[11,190,191],{},"Je recommande de garder les images près des fichiers Markdown qui les utilisent. Une structure simple fonctionne bien :",[29,193,196],{"className":194,"code":195,"language":131,"meta":34},[129],"docs\u002F\n  guide.md\n  images\u002F\n    diagram.png\n    screenshot.png\n",[36,197,195],{"__ignoreMap":34},[11,199,200],{},"Puis référencez-les ainsi :",[29,202,204],{"className":31,"code":203,"language":33,"meta":34,"style":34},"![Diagramme système](.\u002Fimages\u002Fdiagram.png)\n![Capture d'écran de l'app](.\u002Fimages\u002Fscreenshot.png)\n",[36,205,206,211],{"__ignoreMap":34},[39,207,208],{"class":41,"line":42},[39,209,210],{},"![Diagramme système](.\u002Fimages\u002Fdiagram.png)\n",[39,212,213],{"class":41,"line":100},[39,214,215],{},"![Capture d'écran de l'app](.\u002Fimages\u002Fscreenshot.png)\n",[11,217,218,219,222],{},"Cela rend le document portable. Si vous déplacez tout le dossier ",[36,220,221],{},"docs",", les chemins d'images continuent de fonctionner.",[21,224,226],{"id":225},"images-web","Images web",[11,228,229],{},"Vous pouvez également utiliser une URL complète :",[29,231,233],{"className":31,"code":232,"language":33,"meta":34,"style":34},"![Logo Fude](https:\u002F\u002Ffude.md\u002Fimages\u002Ffude-logo.png)\n",[36,234,235],{"__ignoreMap":34},[39,236,237],{"class":41,"line":42},[39,238,232],{},[11,240,241],{},"C'est utile pour les assets distants, les images hébergées sur un CDN, les badges et les documentations qui doivent s'afficher sans fichiers locaux.",[11,243,244],{},"Le compromis : l'image dépend de l'URL distante. Si le serveur tombe, l'image disparaît. Si le propriétaire remplace l'image, votre document change sans que vous l'ayez modifié.",[11,246,247],{},"Pour une documentation durable, je préfère les images locales. Pour les badges et les assets dynamiques, les images distantes conviennent très bien.",[21,249,251],{"id":250},"texte-alternatif","Texte alternatif",[11,253,254],{},"Le texte alternatif n'est pas décoratif. Il décrit l'image pour les personnes qui ne peuvent pas la voir, et il fournit un texte de secours utile lorsque l'image ne se charge pas.",[11,256,257],{},"Un bon texte alternatif explique le contenu ou l'objectif de l'image :",[29,259,261],{"className":31,"code":260,"language":33,"meta":34,"style":34},"![Capture d'écran de Fude affichant un document Markdown avec un tableau](.\u002Ffude-table.png)\n",[36,262,263],{"__ignoreMap":34},[39,264,265],{"class":41,"line":42},[39,266,260],{},[11,268,269],{},"Un texte alternatif faible se contente de répéter qu'une image existe :",[29,271,273],{"className":31,"code":272,"language":33,"meta":34,"style":34},"![Image](.\u002Ffude-table.png)\n![Capture d'écran](.\u002Ffude-table.png)\n",[36,274,275,280],{"__ignoreMap":34},[39,276,277],{"class":41,"line":42},[39,278,279],{},"![Image](.\u002Ffude-table.png)\n",[39,281,282],{"class":41,"line":100},[39,283,284],{},"![Capture d'écran](.\u002Ffude-table.png)\n",[11,286,287],{},"Si l'image est purement décorative et n'ajoute aucune information, vous pouvez laisser le texte alternatif vide :",[29,289,291],{"className":31,"code":290,"language":33,"meta":34,"style":34},"![](.\u002Fdivider.png)\n",[36,292,293],{"__ignoreMap":34},[39,294,295],{"class":41,"line":42},[39,296,290],{},[11,298,299],{},"Mais faites-le volontairement. La plupart des images dans une documentation ne sont pas décoratives. Les diagrammes, captures d'écran, graphiques et interfaces ont généralement besoin d'un texte alternatif utile.",[21,301,303],{"id":302},"titres-dimage","Titres d'image",[11,305,306],{},"Comme les liens, les images peuvent recevoir un titre facultatif :",[29,308,310],{"className":31,"code":309,"language":33,"meta":34,"style":34},"![Lecteur Fude](.\u002Ffude-reader.png \"Fude affichant un fichier Markdown local\")\n",[36,311,312],{"__ignoreMap":34},[39,313,314],{"class":41,"line":42},[39,315,309],{},[11,317,318],{},"Le titre apparaît comme une infobulle dans certains moteurs de rendu. Le support est incohérent, surtout sur les appareils tactiles, donc ne mettez pas d'information essentielle dedans.",[11,320,321],{},"Utilisez le texte alternatif pour le sens. Utilisez le titre seulement pour une petite note supplémentaire.",[21,323,325],{"id":324},"formats-dimage","Formats d'image",[11,327,328],{},"Markdown lui-même ne se soucie pas de savoir si l'image est en PNG, JPG, SVG, WebP, AVIF ou GIF. Le moteur de rendu, lui, s'en soucie.",[11,330,331],{},"Choix courants :",[333,334,335,351],"table",{},[336,337,338],"thead",{},[339,340,341,345,348],"tr",{},[342,343,344],"th",{},"Format",[342,346,347],{},"Idéal pour",[342,349,350],{},"Notes",[352,353,354,366,377,388,398,409],"tbody",{},[339,355,356,360,363],{},[357,358,359],"td",{},"PNG",[357,361,362],{},"Captures d'écran, UI, diagrammes",[357,364,365],{},"Net, fiable, souvent plus lourd",[339,367,368,371,374],{},[357,369,370],{},"JPG",[357,372,373],{},"Photos",[357,375,376],{},"Léger, mais avec perte",[339,378,379,382,385],{},[357,380,381],{},"SVG",[357,383,384],{},"Logos, diagrammes vectoriels",[357,386,387],{},"Excellent quand le rendu l'autorise",[339,389,390,393,395],{},[357,391,392],{},"WebP",[357,394,226],{},[357,396,397],{},"Léger, largement supporté",[339,399,400,403,406],{},[357,401,402],{},"AVIF",[357,404,405],{},"Images web très compressées",[357,407,408],{},"Excellente compression, pas universel partout",[339,410,411,414,417],{},[357,412,413],{},"GIF",[357,415,416],{},"Animations simples",[357,418,419],{},"Lourd ; à utiliser avec parcimonie",[11,421,422],{},"Pour des fichiers Markdown lus localement ou stockés dans un dépôt, PNG reste souvent le choix le plus sûr pour les captures d'écran et les diagrammes.",[21,424,426],{"id":425},"redimensionner-les-images","Redimensionner les images",[11,428,429],{},"Le Markdown standard n'a pas de syntaxe pour définir la largeur ou la hauteur d'une image.",[11,431,432],{},"Ceci ne fonctionne pas en Markdown standard :",[29,434,436],{"className":31,"code":435,"language":33,"meta":34,"style":34},"![Logo](.\u002Flogo.png =200x100)\n",[36,437,438],{"__ignoreMap":34},[39,439,440],{"class":41,"line":42},[39,441,435],{},[11,443,444],{},"Certains outils supportent des extensions personnalisées de ce type, mais elles ne sont pas portables.",[11,446,447],{},"La solution portable la plus courante consiste à utiliser du HTML :",[29,449,453],{"className":450,"code":451,"language":452,"meta":34,"style":34},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\".\u002Flogo.png\" alt=\"Logo\" width=\"200\" \u002F>\n","html",[36,454,455],{"__ignoreMap":34},[39,456,457,461,465,469,472,476,479,481,484,487,489,492],{"class":41,"line":42},[39,458,460],{"class":459},"sVt8B","\u003C",[39,462,464],{"class":463},"s9eBZ","img",[39,466,468],{"class":467},"sScJk"," src",[39,470,471],{"class":459},"=",[39,473,475],{"class":474},"sZZnC","\".\u002Flogo.png\"",[39,477,478],{"class":467}," alt",[39,480,471],{"class":459},[39,482,483],{"class":474},"\"Logo\"",[39,485,486],{"class":467}," width",[39,488,471],{"class":459},[39,490,491],{"class":474},"\"200\"",[39,493,494],{"class":459}," \u002F>\n",[11,496,497],{},"Cela fonctionne dans beaucoup de moteurs de rendu Markdown, y compris GitHub, mais pas dans tous. Certaines applications désactivent le HTML brut pour des raisons de sécurité ou de cohérence.",[11,499,500],{},"Si vous voulez que votre document fonctionne partout, redimensionnez le fichier image lui-même avant de le référencer :",[29,502,504],{"className":31,"code":503,"language":33,"meta":34,"style":34},"![Logo](.\u002Flogo-small.png)\n",[36,505,506],{"__ignoreMap":34},[39,507,508],{"class":41,"line":42},[39,509,503],{},[11,511,512],{},"C'est moins sophistiqué, mais plus fiable.",[21,514,516],{"id":515},"légendes","Légendes",[11,518,519],{},"Le Markdown standard n'a pas de syntaxe native pour les légendes d'image.",[11,521,522],{},"La solution la plus simple consiste à ajouter un paragraphe en italique juste sous l'image :",[29,524,526],{"className":31,"code":525,"language":33,"meta":34,"style":34},"![Vue de lecture Fude](.\u002Ffude-reading-view.png)\n\n*Fude affichant un document Markdown local.*\n",[36,527,528,533,539],{"__ignoreMap":34},[39,529,530],{"class":41,"line":42},[39,531,532],{},"![Vue de lecture Fude](.\u002Ffude-reading-view.png)\n",[39,534,535],{"class":41,"line":100},[39,536,538],{"emptyLinePlaceholder":537},true,"\n",[39,540,542],{"class":41,"line":541},3,[39,543,544],{},"*Fude affichant un document Markdown local.*\n",[11,546,547],{},"C'est lisible dans le fichier Markdown brut et cela fonctionne presque partout.",[11,549,550,551,554,555,558],{},"Si votre moteur de rendu supporte le HTML, vous pouvez utiliser ",[36,552,553],{},"\u003Cfigure>"," et ",[36,556,557],{},"\u003Cfigcaption>"," :",[29,560,562],{"className":450,"code":561,"language":452,"meta":34,"style":34},"\u003Cfigure>\n  \u003Cimg src=\".\u002Ffude-reading-view.png\" alt=\"Vue de lecture Fude\" \u002F>\n  \u003Cfigcaption>Fude affichant un document Markdown local.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n",[36,563,564,574,597,611],{"__ignoreMap":34},[39,565,566,568,571],{"class":41,"line":42},[39,567,460],{"class":459},[39,569,570],{"class":463},"figure",[39,572,573],{"class":459},">\n",[39,575,576,579,581,583,585,588,590,592,595],{"class":41,"line":100},[39,577,578],{"class":459},"  \u003C",[39,580,464],{"class":463},[39,582,468],{"class":467},[39,584,471],{"class":459},[39,586,587],{"class":474},"\".\u002Ffude-reading-view.png\"",[39,589,478],{"class":467},[39,591,471],{"class":459},[39,593,594],{"class":474},"\"Vue de lecture Fude\"",[39,596,494],{"class":459},[39,598,599,601,604,607,609],{"class":41,"line":541},[39,600,578],{"class":459},[39,602,603],{"class":463},"figcaption",[39,605,606],{"class":459},">Fude affichant un document Markdown local.\u003C\u002F",[39,608,603],{"class":463},[39,610,573],{"class":459},[39,612,614,617,619],{"class":41,"line":613},4,[39,615,616],{"class":459},"\u003C\u002F",[39,618,570],{"class":463},[39,620,573],{"class":459},[11,622,623],{},"C'est plus sémantique en HTML, mais moins portable dans les outils Markdown qui suppriment le HTML brut. Pour des notes et des README, je choisis généralement le paragraphe en italique.",[21,625,627],{"id":626},"images-cliquables","Images cliquables",[11,629,630],{},"Une image n'est pas cliquable par défaut. Pour la rendre cliquable, enveloppez la syntaxe d'image dans un lien :",[29,632,634],{"className":31,"code":633,"language":33,"meta":34,"style":34},"[![Logo Fude](.\u002Ffude-logo.png)](https:\u002F\u002Ffude.md)\n",[36,635,636],{"__ignoreMap":34},[39,637,638],{"class":41,"line":42},[39,639,633],{},[11,641,642],{},"Décomposons :",[49,644,645,651],{},[52,646,647,650],{},[36,648,649],{},"![Logo Fude](.\u002Ffude-logo.png)"," affiche l'image.",[52,652,653,656],{},[36,654,655],{},"[...](https:\u002F\u002Ffude.md)"," transforme cette image en lien vers l'URL.",[11,658,659],{},"Ce modèle est fréquent pour les badges :",[29,661,663],{"className":31,"code":662,"language":33,"meta":34,"style":34},"[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuild-passing-green)](https:\u002F\u002Fgithub.com\u002Fuser\u002Frepo\u002Factions)\n",[36,664,665],{"__ignoreMap":34},[39,666,667],{"class":41,"line":42},[39,668,662],{},[11,670,671,672,677],{},"Si vous avez déjà lu le guide sur ",[673,674,676],"a",{"href":675},"\u002Ffr\u002Fblog\u002Fcomment-creer-liens-markdown","les liens Markdown",", c'est la même syntaxe avec une image à l'intérieur du texte du lien.",[21,679,681],{"id":680},"images-dans-les-tableaux","Images dans les tableaux",[11,683,684],{},"Les images peuvent apparaître dans des tableaux Markdown parce qu'elles sont du contenu en ligne :",[29,686,688],{"className":31,"code":687,"language":33,"meta":34,"style":34},"| Produit | Aperçu |\n| --- | --- |\n| Fude | ![Icône Fude](.\u002Ffude-icon.png) |\n",[36,689,690,695,700],{"__ignoreMap":34},[39,691,692],{"class":41,"line":42},[39,693,694],{},"| Produit | Aperçu |\n",[39,696,697],{"class":41,"line":100},[39,698,699],{},"| --- | --- |\n",[39,701,702],{"class":41,"line":541},[39,703,704],{},"| Fude | ![Icône Fude](.\u002Ffude-icon.png) |\n",[11,706,707],{},"Cela fonctionne dans de nombreux moteurs de rendu, y compris GitHub.",[11,709,710],{},"Mais utilisez-le avec prudence. Les grandes images dans les tableaux rendent le tableau difficile à lire, surtout sur petit écran. Si l'image a besoin d'espace, placez-la en dehors du tableau et mettez plutôt un lien vers elle dans le tableau.",[21,712,714],{"id":713},"images-en-base64","Images en base64",[11,716,717],{},"Techniquement, vous pouvez intégrer une image directement dans Markdown avec une URL de données :",[29,719,721],{"className":31,"code":720,"language":33,"meta":34,"style":34},"![Petite icône](data:image\u002Fpng;base64,iVBORw0KGgo...)\n",[36,722,723],{"__ignoreMap":34},[39,724,725],{"class":41,"line":42},[39,726,720],{},[11,728,729],{},"Cela rend le fichier Markdown autonome, mais aussi laid, énorme et difficile à modifier.",[11,731,732],{},"J'évite les images base64 sauf pour de très petits assets générés ou des fixtures de test. Pour une écriture normale, gardez l'image dans un fichier séparé.",[21,734,736],{"id":735},"les-images-sur-github","Les images sur GitHub",[11,738,739,740,743],{},"GitHub supporte la syntaxe Markdown standard pour les images dans les README, issues, pull requests, wikis et fichiers ",[36,741,742],{},".md"," rendus.",[11,745,746],{},"Ce qui fonctionne bien :",[49,748,749,756,762,765,771],{},[52,750,751,752,755],{},"Les chemins relatifs comme ",[36,753,754],{},"![Diagramme](.\u002Fdocs\u002Fdiagram.png)",".",[52,757,758,759,755],{},"Les URL distantes comme ",[36,760,761],{},"![Badge](https:\u002F\u002Fimg.shields.io\u002F...)",[52,763,764],{},"Les images SVG, lorsqu'elles sont servies de manière sûre.",[52,766,767,768,755],{},"Les images cliquables avec ",[36,769,770],{},"[![alt](image)](url)",[52,772,773,774,777,778,755],{},"Les balises HTML ",[36,775,776],{},"\u003Cimg>"," pour redimensionner, comme ",[36,779,780],{},"\u003Cimg src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">",[11,782,783],{},"Quelques spécificités GitHub :",[49,785,786,789,792,799],{},[52,787,788],{},"Les chemins sont résolus par rapport au fichier Markdown, pas par rapport à la racine du dépôt.",[52,790,791],{},"Glisser une image dans une issue GitHub l'upload et insère une URL générée.",[52,793,794,795,798],{},"Les images ",[36,796,797],{},"file:\u002F\u002F"," ne fonctionnent pas. GitHub ne peut pas lire les fichiers de votre ordinateur.",[52,800,801],{},"Si une image fonctionne en local mais pas sur GitHub, vérifiez la casse. macOS est souvent insensible à la casse ; GitHub est sensible à la casse.",[21,803,805],{"id":804},"les-images-dans-fude","Les images dans Fude",[11,807,808],{},"Dans Fude, les images Markdown standard sont conçues pour s'afficher proprement :",[49,810,811,814,821,824,827],{},[52,812,813],{},"Les images locales relatives fonctionnent depuis l'emplacement du fichier Markdown.",[52,815,816,817,820],{},"Les images locales depuis la racine, comme ",[36,818,819],{},"\u002Fimages\u002Flogo.png",", sont résolues via le chemin d'asset sécurisé de Fude.",[52,822,823],{},"Les images web distantes s'affichent comme des images normales.",[52,825,826],{},"Les images en URL de données s'affichent lorsqu'elles utilisent un type d'image sûr.",[52,828,829,830,832,833,554,836,839],{},"Les sources non supportées comme ",[36,831,797],{},", ",[36,834,835],{},"blob:",[36,837,838],{},"javascript:"," ne sont pas rendues comme des images actives.",[11,841,842],{},"Fude traite aussi l'affichage des images comme une préférence de lecture. Vous pouvez masquer les images, afficher les images Markdown standard, ou activer le mode HTML d'image sanitizé quand vous avez besoin de balises d'image en HTML brut.",[11,844,845],{},"Le point important : Fude ne transmet pas de chemins locaux arbitraires au moteur de rendu. Les images locales passent par un canal d'asset contrôlé, ce qui garde l'expérience de lecture utile sans transformer Markdown en accès libre au système de fichiers.",[21,847,849],{"id":848},"les-images-dans-obsidian","Les images dans Obsidian",[11,851,852],{},"Obsidian supporte les images Markdown standard :",[29,854,856],{"className":31,"code":855,"language":33,"meta":34,"style":34},"![Capture d'écran](.\u002Fscreenshot.png)\n",[36,857,858],{"__ignoreMap":34},[39,859,860],{"class":41,"line":42},[39,861,855],{},[11,863,864],{},"Il supporte aussi les intégrations de type wiki :",[29,866,868],{"className":31,"code":867,"language":33,"meta":34,"style":34},"![[screenshot.png]]\n",[36,869,870],{"__ignoreMap":34},[39,871,872],{"class":41,"line":42},[39,873,867],{},[11,875,876],{},"La syntaxe wiki est plus courte et fonctionne très bien dans un vault Obsidian, mais ce n'est pas du Markdown standard. Si vous prévoyez de lire le même fichier dans GitHub, Fude, VS Code ou un générateur de site statique, utilisez la syntaxe standard.",[11,878,879],{},"Obsidian supporte aussi sa propre syntaxe de taille d'image :",[29,881,883],{"className":31,"code":882,"language":33,"meta":34,"style":34},"![[screenshot.png|400]]\n",[36,884,885],{"__ignoreMap":34},[39,886,887],{"class":41,"line":42},[39,888,882],{},[11,890,891],{},"Pratique dans Obsidian, non portable ailleurs.",[21,893,895],{"id":894},"résoudre-les-problèmes-courants","Résoudre les problèmes courants",[897,898,900],"h3",{"id":899},"mon-image-saffiche-comme-un-lien","\"Mon image s'affiche comme un lien\"",[11,902,903],{},"Vous avez probablement oublié le point d'exclamation :",[29,905,907],{"className":31,"code":906,"language":33,"meta":34,"style":34},"[Alt](.\u002Fimage.png)   ← lien\n![Alt](.\u002Fimage.png)  ← image\n",[36,908,909,914],{"__ignoreMap":34},[39,910,911],{"class":41,"line":42},[39,912,913],{},"[Alt](.\u002Fimage.png)   ← lien\n",[39,915,916],{"class":41,"line":100},[39,917,918],{},"![Alt](.\u002Fimage.png)  ← image\n",[897,920,922],{"id":921},"mon-image-locale-ne-se-charge-pas","\"Mon image locale ne se charge pas\"",[11,924,925],{},"Vérifiez le chemin depuis le fichier Markdown, pas depuis la racine du projet.",[11,927,928,929,932,933,936],{},"Si votre fichier est ",[36,930,931],{},"docs\u002Fguide.md"," et votre image est ",[36,934,935],{},"docs\u002Fimages\u002Fchart.png",", utilisez :",[29,938,940],{"className":31,"code":939,"language":33,"meta":34,"style":34},"![Graphique](.\u002Fimages\u002Fchart.png)\n",[36,941,942],{"__ignoreMap":34},[39,943,944],{"class":41,"line":42},[39,945,939],{},[11,947,948],{},"Pas :",[29,950,952],{"className":31,"code":951,"language":33,"meta":34,"style":34},"![Graphique](.\u002Fdocs\u002Fimages\u002Fchart.png)\n",[36,953,954],{"__ignoreMap":34},[39,955,956],{"class":41,"line":42},[39,957,951],{},[11,959,960],{},"Ce second chemin ne fonctionne que si le fichier Markdown se trouve à la racine du projet.",[897,962,964],{"id":963},"ça-marche-sur-mon-mac-mais-pas-sur-github","\"Ça marche sur mon Mac mais pas sur GitHub\"",[11,966,967],{},"Vérifiez la casse :",[29,969,971],{"className":31,"code":970,"language":33,"meta":34,"style":34},"![Logo](.\u002Fimages\u002Flogo.png)\n",[36,972,973],{"__ignoreMap":34},[39,974,975],{"class":41,"line":42},[39,976,970],{},[11,978,979],{},"ne trouvera pas :",[29,981,984],{"className":982,"code":983,"language":131,"meta":34},[129],"images\u002FLogo.png\n",[36,985,983],{"__ignoreMap":34},[11,987,988],{},"sur un système sensible à la casse.",[11,990,991],{},"Vérifiez aussi les espaces. Vous pouvez les encoder :",[29,993,995],{"className":31,"code":994,"language":33,"meta":34,"style":34},"![Diagramme](.\u002Fimages\u002Fuser%20flow.png)\n",[36,996,997],{"__ignoreMap":34},[39,998,999],{"class":41,"line":42},[39,1000,994],{},[11,1002,1003],{},"Ou entourer le chemin de chevrons :",[29,1005,1007],{"className":31,"code":1006,"language":33,"meta":34,"style":34},"![Diagramme](\u003C.\u002Fimages\u002Fuser flow.png>)\n",[36,1008,1009],{"__ignoreMap":34},[39,1010,1011],{"class":41,"line":42},[39,1012,1006],{},[897,1014,1016],{"id":1015},"je-narrive-pas-à-redimensionner-limage","\"Je n'arrive pas à redimensionner l'image\"",[11,1018,1019],{},"Le Markdown pur ne permet pas de redimensionner les images. Utilisez l'une de ces options :",[29,1021,1023],{"className":450,"code":1022,"language":452,"meta":34,"style":34},"\u003Cimg src=\".\u002Fimage.png\" alt=\"Texte alternatif\" width=\"400\" \u002F>\n",[36,1024,1025],{"__ignoreMap":34},[39,1026,1027,1029,1031,1033,1035,1038,1040,1042,1045,1047,1049,1052],{"class":41,"line":42},[39,1028,460],{"class":459},[39,1030,464],{"class":463},[39,1032,468],{"class":467},[39,1034,471],{"class":459},[39,1036,1037],{"class":474},"\".\u002Fimage.png\"",[39,1039,478],{"class":467},[39,1041,471],{"class":459},[39,1043,1044],{"class":474},"\"Texte alternatif\"",[39,1046,486],{"class":467},[39,1048,471],{"class":459},[39,1050,1051],{"class":474},"\"400\"",[39,1053,494],{"class":459},[11,1055,1056],{},"ou redimensionnez le fichier lui-même :",[29,1058,1060],{"className":31,"code":1059,"language":33,"meta":34,"style":34},"![Texte alternatif](.\u002Fimage-400px.png)\n",[36,1061,1062],{"__ignoreMap":34},[39,1063,1064],{"class":41,"line":42},[39,1065,1059],{},[11,1067,1068],{},"La deuxième option est plus portable.",[897,1070,1072],{"id":1071},"le-chemin-de-mon-image-contient-des-parenthèses","\"Le chemin de mon image contient des parenthèses\"",[11,1074,1075,1076,1079],{},"Les parenthèses peuvent perturber le parseur, car ",[36,1077,1078],{},")"," ferme la destination de l'image.",[11,1081,1082],{},"Utilisez l'encodage URL :",[29,1084,1086],{"className":31,"code":1085,"language":33,"meta":34,"style":34},"![Graphique](.\u002Fimages\u002Freport%20%28final%29.png)\n",[36,1087,1088],{"__ignoreMap":34},[39,1089,1090],{"class":41,"line":42},[39,1091,1085],{},[11,1093,1094],{},"Ou utilisez des chevrons :",[29,1096,1098],{"className":31,"code":1097,"language":33,"meta":34,"style":34},"![Graphique](\u003C.\u002Fimages\u002Freport (final).png>)\n",[36,1099,1100],{"__ignoreMap":34},[39,1101,1102],{"class":41,"line":42},[39,1103,1097],{},[21,1105,1107],{"id":1106},"référence-rapide","Référence rapide",[29,1109,1111],{"className":31,"code":1110,"language":33,"meta":34,"style":34},"# Image de base\n![Texte alternatif](.\u002Fimage.png)\n\n# Image avec titre\n![Texte alternatif](.\u002Fimage.png \"Titre facultatif\")\n\n# Image distante\n![Texte alternatif](https:\u002F\u002Fexample.com\u002Fimage.png)\n\n# Texte alternatif vide pour une image décorative\n![](.\u002Fdivider.png)\n\n# Image cliquable\n[![Texte alternatif](.\u002Fimage.png)](https:\u002F\u002Fexample.com)\n\n# Légende simple\n![Texte alternatif](.\u002Fimage.png)\n\n*Texte de légende.*\n\n# Redimensionner avec HTML\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Texte alternatif\" width=\"400\" \u002F>\n\n# Chemin avec espaces\n![Texte alternatif](\u003C.\u002Fimages\u002Fmon image.png>)\n",[36,1112,1113,1118,1122,1126,1131,1137,1142,1148,1154,1159,1165,1170,1175,1181,1187,1192,1198,1203,1208,1214,1219,1225,1230,1235,1241],{"__ignoreMap":34},[39,1114,1115],{"class":41,"line":42},[39,1116,1117],{},"# Image de base\n",[39,1119,1120],{"class":41,"line":100},[39,1121,32],{},[39,1123,1124],{"class":41,"line":541},[39,1125,538],{"emptyLinePlaceholder":537},[39,1127,1128],{"class":41,"line":613},[39,1129,1130],{},"# Image avec titre\n",[39,1132,1134],{"class":41,"line":1133},5,[39,1135,1136],{},"![Texte alternatif](.\u002Fimage.png \"Titre facultatif\")\n",[39,1138,1140],{"class":41,"line":1139},6,[39,1141,538],{"emptyLinePlaceholder":537},[39,1143,1145],{"class":41,"line":1144},7,[39,1146,1147],{},"# Image distante\n",[39,1149,1151],{"class":41,"line":1150},8,[39,1152,1153],{},"![Texte alternatif](https:\u002F\u002Fexample.com\u002Fimage.png)\n",[39,1155,1157],{"class":41,"line":1156},9,[39,1158,538],{"emptyLinePlaceholder":537},[39,1160,1162],{"class":41,"line":1161},10,[39,1163,1164],{},"# Texte alternatif vide pour une image décorative\n",[39,1166,1168],{"class":41,"line":1167},11,[39,1169,290],{},[39,1171,1173],{"class":41,"line":1172},12,[39,1174,538],{"emptyLinePlaceholder":537},[39,1176,1178],{"class":41,"line":1177},13,[39,1179,1180],{},"# Image cliquable\n",[39,1182,1184],{"class":41,"line":1183},14,[39,1185,1186],{},"[![Texte alternatif](.\u002Fimage.png)](https:\u002F\u002Fexample.com)\n",[39,1188,1190],{"class":41,"line":1189},15,[39,1191,538],{"emptyLinePlaceholder":537},[39,1193,1195],{"class":41,"line":1194},16,[39,1196,1197],{},"# Légende simple\n",[39,1199,1201],{"class":41,"line":1200},17,[39,1202,32],{},[39,1204,1206],{"class":41,"line":1205},18,[39,1207,538],{"emptyLinePlaceholder":537},[39,1209,1211],{"class":41,"line":1210},19,[39,1212,1213],{},"*Texte de légende.*\n",[39,1215,1217],{"class":41,"line":1216},20,[39,1218,538],{"emptyLinePlaceholder":537},[39,1220,1222],{"class":41,"line":1221},21,[39,1223,1224],{},"# Redimensionner avec HTML\n",[39,1226,1228],{"class":41,"line":1227},22,[39,1229,1022],{},[39,1231,1233],{"class":41,"line":1232},23,[39,1234,538],{"emptyLinePlaceholder":537},[39,1236,1238],{"class":41,"line":1237},24,[39,1239,1240],{},"# Chemin avec espaces\n",[39,1242,1244],{"class":41,"line":1243},25,[39,1245,1246],{},"![Texte alternatif](\u003C.\u002Fimages\u002Fmon image.png>)\n",[1248,1249],"hr",{},[11,1251,1252],{},"La syntaxe Markdown pour les images est simple, mais les images exposent tout ce qui rend Markdown pratique : chemins, portabilité, accessibilité et différences entre moteurs de rendu.",[11,1254,1255],{},"S'il faut retenir une règle, retenez celle-ci : gardez les images près des fichiers Markdown qui les utilisent, et écrivez le texte alternatif comme si l'image pouvait ne pas se charger.",[11,1257,1258,1259,832,1262,1266,1267,755],{},"Pour d'autres guides Markdown, consultez les articles sur ",[673,1260,1261],{"href":675},"les liens",[673,1263,1265],{"href":1264},"\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet","les tableaux",", et ",[673,1268,1270],{"href":1269},"\u002Ffr\u002Fblog\u002Fcomment-ajouter-une-ligne-horizontale-markdown","les lignes horizontales",[11,1272,1273],{},"Si vous cherchez un lecteur Markdown qui gère proprement les images locales, essayez Fude.",[11,1275,1276,1277],{},"📌 ",[673,1278,1280],{"href":1279},"\u002Ffr#download","Télécharger Fude",[1282,1283,1284],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":34,"searchDepth":100,"depth":100,"links":1286},[1287,1288,1289,1290,1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1301,1308],{"id":23,"depth":100,"text":24},{"id":109,"depth":100,"text":110},{"id":225,"depth":100,"text":226},{"id":250,"depth":100,"text":251},{"id":302,"depth":100,"text":303},{"id":324,"depth":100,"text":325},{"id":425,"depth":100,"text":426},{"id":515,"depth":100,"text":516},{"id":626,"depth":100,"text":627},{"id":680,"depth":100,"text":681},{"id":713,"depth":100,"text":714},{"id":735,"depth":100,"text":736},{"id":804,"depth":100,"text":805},{"id":848,"depth":100,"text":849},{"id":894,"depth":100,"text":895,"children":1302},[1303,1304,1305,1306,1307],{"id":899,"depth":541,"text":900},{"id":921,"depth":541,"text":922},{"id":963,"depth":541,"text":964},{"id":1015,"depth":541,"text":1016},{"id":1071,"depth":541,"text":1072},{"id":1106,"depth":100,"text":1107},"markdown-guides","2026-05-15","Apprenez à ajouter des images en Markdown, écrire un texte alternatif utile, utiliser des chemins relatifs, redimensionner les images, ajouter des légendes, et gérer les comportements de GitHub, Obsidian et Fude.","md","\u002Fimages\u002Fblog\u002Fblog6",{},false,"\u002Ffr\u002Fblog\u002Fcomment-ajouter-images-markdown",{"title":5,"description":1311},"fr\u002Fblog\u002F6.comment-ajouter-images-markdown",null,"markdown-images-guide","T3LDLeU9nTVZTQnh0u3XA__ofYuiLN_J09y_kpKNlIs","\u003Cp>\u003Cspan data-fude-source-start=\"1\" data-fude-source-end=\"254\">Les images en Markdown ressemblent presque aux liens, avec un caractère en plus au début. Ce petit point d'exclamation est facile à oublier, mais il change tout : au lieu de créer un lien cliquable, Markdown intègre l'image directement dans le document.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"256\" data-fude-source-end=\"505\">La syntaxe de base prend cinq secondes à comprendre. Les détails prennent plus de temps : chemins locaux, texte alternatif, taille des images, légendes, comportement sur GitHub, intégrations Obsidian, et ce qui se passe quand le fichier est déplacé.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"507\" data-fude-source-end=\"663\">Ce guide couvre la version pratique, de la syntaxe dont vous avez besoin tous les jours jusqu'aux cas particuliers qui finissent souvent sur Stack Overflow.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"668\" data-fude-source-end=\"686\">La syntaxe de base\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"688\" data-fude-source-end=\"737\">La syntaxe Markdown standard pour une image est :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"751\" data-fude-code-block-end=\"783\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"751\" data-fude-code-block-end=\"783\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"789\" data-fude-source-end=\"819\">Elle contient trois éléments :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"823\" data-fude-source-end=\"826\">!\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"826\" data-fude-source-end=\"886\"> indique à Markdown qu'il s'agit d'une image, pas d'un lien.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"889\" data-fude-source-end=\"909\">[Texte alternatif]\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"909\" data-fude-source-end=\"925\"> décrit l'image.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"928\" data-fude-source-end=\"943\">(.\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"943\" data-fude-source-end=\"973\"> pointe vers le fichier image.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"975\" data-fude-source-end=\"988\">Par exemple :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1002\" data-fude-code-block-end=\"1065\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1002\" data-fude-code-block-end=\"1065\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Interface du lecteur Markdown Fude\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Ffude-reader.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1071\" data-fude-source-end=\"1233\">Si l'image se charge correctement, le lecteur affiche l'image. Si elle ne se charge pas, la plupart des moteurs de rendu affichent le texte alternatif à la place.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1235\" data-fude-source-end=\"1305\">L'erreur la plus fréquente consiste à oublier le point d'exclamation :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1319\" data-fude-code-block-end=\"1412\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1319\" data-fude-code-block-end=\"1412\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](.\u002Flogo.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">   ← lien vers le fichier image\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Flogo.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  ← affichage de l'image\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1418\" data-fude-source-end=\"1477\">La première ligne crée un lien. La seconde intègre l'image.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"1482\" data-fude-source-end=\"1496\">Images locales\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"1498\" data-fude-source-end=\"1625\">La plupart des images Markdown utilisent un chemin relatif. Le chemin est résolu à partir de l'emplacement du fichier Markdown.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1639\" data-fude-code-block-end=\"1693\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1639\" data-fude-code-block-end=\"1693\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Diagramme d'architecture\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fassets\u002Farchitecture.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1699\" data-fude-source-end=\"1726\">Si votre document est ici :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"1736\" data-fude-code-block-end=\"1749\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"1736\" data-fude-code-block-end=\"1749\">docs\u002Fguide.md\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1755\" data-fude-source-end=\"1779\">Et votre image est ici :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"1789\" data-fude-code-block-end=\"1817\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"1789\" data-fude-code-block-end=\"1817\">docs\u002Fassets\u002Farchitecture.png\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1823\" data-fude-source-end=\"1829\">Alors \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1829\" data-fude-source-end=\"1856\">.\u002Fassets\u002Farchitecture.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1856\" data-fude-source-end=\"1869\"> est correct.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1871\" data-fude-source-end=\"1910\">Si l'image est dans le dossier parent :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1924\" data-fude-code-block-end=\"1944\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1924\" data-fude-code-block-end=\"1944\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(..\u002Flogo.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1950\" data-fude-source-end=\"2005\">Les règles sont les mêmes que pour les liens relatifs :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"2009\" data-fude-source-end=\"2013\">.\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2013\" data-fude-source-end=\"2044\"> signifie \"répertoire courant\".\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"2047\" data-fude-source-end=\"2052\">..\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2052\" data-fude-source-end=\"2082\"> signifie \"répertoire parent\".\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"2085\" data-fude-source-end=\"2103\">folder\u002Fimage.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2103\" data-fude-source-end=\"2127\"> fonctionne aussi, mais \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2127\" data-fude-source-end=\"2147\">.\u002Ffolder\u002Fimage.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2147\" data-fude-source-end=\"2177\"> rend l'intention plus claire.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"2179\" data-fude-source-end=\"2298\">Je recommande de garder les images près des fichiers Markdown qui les utilisent. Une structure simple fonctionne bien :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"2308\" data-fude-code-block-end=\"2369\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"2308\" data-fude-code-block-end=\"2369\">docs\u002F\n  guide.md\n  images\u002F\n    diagram.png\n    screenshot.png\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2375\" data-fude-source-end=\"2402\">Puis référencez-les ainsi :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2416\" data-fude-code-block-end=\"2511\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2416\" data-fude-code-block-end=\"2511\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Diagramme système\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Fdiagram.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Capture d'écran de l'app\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Fscreenshot.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2517\" data-fude-source-end=\"2582\">Cela rend le document portable. Si vous déplacez tout le dossier \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2582\" data-fude-source-end=\"2588\">docs\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2588\" data-fude-source-end=\"2637\">, les chemins d'images continuent de fonctionner.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"2642\" data-fude-source-end=\"2652\">Images web\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"2654\" data-fude-source-end=\"2703\">Vous pouvez également utiliser une URL complète :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2717\" data-fude-code-block-end=\"2767\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2717\" data-fude-code-block-end=\"2767\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo Fude\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(https:\u002F\u002Ffude.md\u002Fimages\u002Ffude-logo.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2773\" data-fude-source-end=\"2921\">C'est utile pour les assets distants, les images hébergées sur un CDN, les badges et les documentations qui doivent s'afficher sans fichiers locaux.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2923\" data-fude-source-end=\"3100\">Le compromis : l'image dépend de l'URL distante. Si le serveur tombe, l'image disparaît. Si le propriétaire remplace l'image, votre document change sans que vous l'ayez modifié.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3102\" data-fude-source-end=\"3250\">Pour une documentation durable, je préfère les images locales. Pour les badges et les assets dynamiques, les images distantes conviennent très bien.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3255\" data-fude-source-end=\"3271\">Texte alternatif\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3273\" data-fude-source-end=\"3452\">Le texte alternatif n'est pas décoratif. Il décrit l'image pour les personnes qui ne peuvent pas la voir, et il fournit un texte de secours utile lorsque l'image ne se charge pas.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3454\" data-fude-source-end=\"3524\">Un bon texte alternatif explique le contenu ou l'objectif de l'image :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3538\" data-fude-code-block-end=\"3629\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3538\" data-fude-code-block-end=\"3629\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Capture d'écran de Fude affichant un document Markdown avec un tableau\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-table.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"3635\" data-fude-source-end=\"3706\">Un texte alternatif faible se contente de répéter qu'une image existe :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3720\" data-fude-code-block-end=\"3783\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3720\" data-fude-code-block-end=\"3783\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Image\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-table.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Capture d'écran\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-table.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"3789\" data-fude-source-end=\"3902\">Si l'image est purement décorative et n'ajoute aucune information, vous pouvez laisser le texte alternatif vide :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3916\" data-fude-code-block-end=\"3934\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3916\" data-fude-code-block-end=\"3934\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fdivider.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"3940\" data-fude-source-end=\"4152\">Mais faites-le volontairement. La plupart des images dans une documentation ne sont pas décoratives. Les diagrammes, captures d'écran, graphiques et interfaces ont généralement besoin d'un texte alternatif utile.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"4157\" data-fude-source-end=\"4171\">Titres d'image\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"4173\" data-fude-source-end=\"4239\">Comme les liens, les images peuvent recevoir un titre facultatif :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"4253\" data-fude-code-block-end=\"4330\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"4253\" data-fude-code-block-end=\"4330\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Lecteur Fude\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-reader.png\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\"> \"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">Fude affichant un fichier Markdown local\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"4336\" data-fude-source-end=\"4521\">Le titre apparaît comme une infobulle dans certains moteurs de rendu. Le support est incohérent, surtout sur les appareils tactiles, donc ne mettez pas d'information essentielle dedans.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4523\" data-fude-source-end=\"4630\">Utilisez le texte alternatif pour le sens. Utilisez le titre seulement pour une petite note supplémentaire.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"4635\" data-fude-source-end=\"4650\">Formats d'image\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"4652\" data-fude-source-end=\"4786\">Markdown lui-même ne se soucie pas de savoir si l'image est en PNG, JPG, SVG, WebP, AVIF ou GIF. Le moteur de rendu, lui, s'en soucie.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4788\" data-fude-source-end=\"4804\">Choix courants :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003Cspan data-fude-source-start=\"4808\" data-fude-source-end=\"4814\">Format\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"4817\" data-fude-source-end=\"4827\">Idéal pour\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"4830\" data-fude-source-end=\"4835\">Notes\u003C\u002Fspan>\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4860\" data-fude-source-end=\"4863\">PNG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4866\" data-fude-source-end=\"4898\">Captures d'écran, UI, diagrammes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4901\" data-fude-source-end=\"4932\">Net, fiable, souvent plus lourd\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4937\" data-fude-source-end=\"4940\">JPG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4943\" data-fude-source-end=\"4949\">Photos\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4952\" data-fude-source-end=\"4974\">Léger, mais avec perte\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4979\" data-fude-source-end=\"4982\">SVG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4985\" data-fude-source-end=\"5013\">Logos, diagrammes vectoriels\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5016\" data-fude-source-end=\"5051\">Excellent quand le rendu l'autorise\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5056\" data-fude-source-end=\"5060\">WebP\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5063\" data-fude-source-end=\"5073\">Images web\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5076\" data-fude-source-end=\"5101\">Léger, largement supporté\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5106\" data-fude-source-end=\"5110\">AVIF\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5113\" data-fude-source-end=\"5140\">Images web très compressées\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5143\" data-fude-source-end=\"5188\">Excellente compression, pas universel partout\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5193\" data-fude-source-end=\"5196\">GIF\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5199\" data-fude-source-end=\"5217\">Animations simples\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5220\" data-fude-source-end=\"5254\">Lourd ; à utiliser avec parcimonie\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cspan data-fude-source-start=\"5258\" data-fude-source-end=\"5409\">Pour des fichiers Markdown lus localement ou stockés dans un dépôt, PNG reste souvent le choix le plus sûr pour les captures d'écran et les diagrammes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5414\" data-fude-source-end=\"5439\">Redimensionner les images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"5441\" data-fude-source-end=\"5531\">Le Markdown standard n'a pas de syntaxe pour définir la largeur ou la hauteur d'une image.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5533\" data-fude-source-end=\"5578\">Ceci ne fonctionne pas en Markdown standard :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"5592\" data-fude-code-block-end=\"5620\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5592\" data-fude-code-block-end=\"5620\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">](.\u002Flogo.png =200x100)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5626\" data-fude-source-end=\"5728\">Certains outils supportent des extensions personnalisées de ce type, mais elles ne sont pas portables.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5730\" data-fude-source-end=\"5797\">La solution portable la plus courante consiste à utiliser du HTML :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"5807\" data-fude-code-block-end=\"5854\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"5807\" data-fude-code-block-end=\"5854\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">img\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> src\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\".\u002Flogo.png\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"Logo\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> width\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"200\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5860\" data-fude-source-end=\"6051\">Cela fonctionne dans beaucoup de moteurs de rendu Markdown, y compris GitHub, mais pas dans tous. Certaines applications désactivent le HTML brut pour des raisons de sécurité ou de cohérence.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6053\" data-fude-source-end=\"6172\">Si vous voulez que votre document fonctionne partout, redimensionnez le fichier image lui-même avant de le référencer :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"6186\" data-fude-code-block-end=\"6211\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6186\" data-fude-code-block-end=\"6211\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Flogo-small.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"6217\" data-fude-source-end=\"6259\">C'est moins sophistiqué, mais plus fiable.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"6264\" data-fude-source-end=\"6272\">Légendes\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"6274\" data-fude-source-end=\"6347\">Le Markdown standard n'a pas de syntaxe native pour les légendes d'image.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6349\" data-fude-source-end=\"6441\">La solution la plus simple consiste à ajouter un paragraphe en italique juste sous l'image :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"6455\" data-fude-code-block-end=\"6548\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6455\" data-fude-code-block-end=\"6548\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Vue de lecture Fude\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-reading-view.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">*Fude affichant un document Markdown local.*\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"6554\" data-fude-source-end=\"6633\">C'est lisible dans le fichier Markdown brut et cela fonctionne presque partout.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6635\" data-fude-source-end=\"6699\">Si votre moteur de rendu supporte le HTML, vous pouvez utiliser \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"6699\" data-fude-source-end=\"6709\"><figure>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6709\" data-fude-source-end=\"6713\"> et \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"6713\" data-fude-source-end=\"6727\"><figcaption>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6727\" data-fude-source-end=\"6729\"> :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"6739\" data-fude-code-block-end=\"6893\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"6739\" data-fude-code-block-end=\"6893\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">figure\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">img\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> src\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\".\u002Ffude-reading-view.png\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"Vue de lecture Fude\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">figcaption\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Fude affichant un document Markdown local.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">figcaption\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">figure\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"6899\" data-fude-source-end=\"7084\">C'est plus sémantique en HTML, mais moins portable dans les outils Markdown qui suppriment le HTML brut. Pour des notes et des README, je choisis généralement le paragraphe en italique.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"7089\" data-fude-source-end=\"7106\">Images cliquables\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"7108\" data-fude-source-end=\"7220\">Une image n'est pas cliquable par défaut. Pour la rendre cliquable, enveloppez la syntaxe d'image dans un lien :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"7234\" data-fude-code-block-end=\"7282\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"7234\" data-fude-code-block-end=\"7282\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">![Logo Fude]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-logo.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](https:\u002F\u002Ffude.md)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"7288\" data-fude-source-end=\"7301\">Décomposons :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"7305\" data-fude-source-end=\"7336\">![Logo Fude](.\u002Ffude-logo.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7336\" data-fude-source-end=\"7353\"> affiche l'image.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"7356\" data-fude-source-end=\"7380\">[...](https:\u002F\u002Ffude.md)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7380\" data-fude-source-end=\"7423\"> transforme cette image en lien vers l'URL.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"7425\" data-fude-source-end=\"7465\">Ce modèle est fréquent pour les badges :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"7479\" data-fude-code-block-end=\"7584\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"7479\" data-fude-code-block-end=\"7584\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">![Build Status]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuild-passing-green)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](https:\u002F\u002Fgithub.com\u002Fuser\u002Frepo\u002Factions)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"7590\" data-fude-source-end=\"7624\">Si vous avez déjà lu le guide sur \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Fcomment-creer-liens-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"7625\" data-fude-source-end=\"7643\">les liens Markdown\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"7683\" data-fude-source-end=\"7753\">, c'est la même syntaxe avec une image à l'intérieur du texte du lien.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"7758\" data-fude-source-end=\"7782\">Images dans les tableaux\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"7784\" data-fude-source-end=\"7882\">Les images peuvent apparaître dans des tableaux Markdown parce qu'elles sont du contenu en ligne :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"7896\" data-fude-code-block-end=\"7972\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"7896\" data-fude-code-block-end=\"7972\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Produit | Aperçu |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Fude | ![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Icône Fude\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Ffude-icon.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"7978\" data-fude-source-end=\"8046\">Cela fonctionne dans de nombreux moteurs de rendu, y compris GitHub.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"8048\" data-fude-source-end=\"8291\">Mais utilisez-le avec prudence. Les grandes images dans les tableaux rendent le tableau difficile à lire, surtout sur petit écran. Si l'image a besoin d'espace, placez-la en dehors du tableau et mettez plutôt un lien vers elle dans le tableau.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"8296\" data-fude-source-end=\"8312\">Images en base64\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"8314\" data-fude-source-end=\"8411\">Techniquement, vous pouvez intégrer une image directement dans Markdown avec une URL de données :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"8425\" data-fude-code-block-end=\"8478\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"8425\" data-fude-code-block-end=\"8478\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Petite icône\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(data:image\u002Fpng;base64,iVBORw0KGgo...)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"8484\" data-fude-source-end=\"8572\">Cela rend le fichier Markdown autonome, mais aussi laid, énorme et difficile à modifier.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"8574\" data-fude-source-end=\"8730\">J'évite les images base64 sauf pour de très petits assets générés ou des fixtures de test. Pour une écriture normale, gardez l'image dans un fichier séparé.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"8735\" data-fude-source-end=\"8756\">Les images sur GitHub\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"8758\" data-fude-source-end=\"8877\">GitHub supporte la syntaxe Markdown standard pour les images dans les README, issues, pull requests, wikis et fichiers \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8877\" data-fude-source-end=\"8882\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8882\" data-fude-source-end=\"8890\"> rendus.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"8892\" data-fude-source-end=\"8916\">Ce qui fonctionne bien :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"8920\" data-fude-source-end=\"8947\">Les chemins relatifs comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8947\" data-fude-source-end=\"8981\">![Diagramme](.\u002Fdocs\u002Fdiagram.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8981\" data-fude-source-end=\"8982\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8985\" data-fude-source-end=\"9009\">Les URL distantes comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9009\" data-fude-source-end=\"9047\">![Badge](https:\u002F\u002Fimg.shields.io\u002F...)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9047\" data-fude-source-end=\"9048\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9051\" data-fude-source-end=\"9109\">Les images SVG, lorsqu'elles sont servies de manière sûre.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9112\" data-fude-source-end=\"9139\">Les images cliquables avec \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9139\" data-fude-source-end=\"9161\">[![alt](image)](url)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9161\" data-fude-source-end=\"9162\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9165\" data-fude-source-end=\"9182\">Les balises HTML \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9182\" data-fude-source-end=\"9189\"><img>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9189\" data-fude-source-end=\"9217\"> pour redimensionner, comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9217\" data-fude-source-end=\"9264\"><img src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9264\" data-fude-source-end=\"9265\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"9267\" data-fude-source-end=\"9297\">Quelques spécificités GitHub :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"9301\" data-fude-source-end=\"9396\">Les chemins sont résolus par rapport au fichier Markdown, pas par rapport à la racine du dépôt.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9399\" data-fude-source-end=\"9474\">Glisser une image dans une issue GitHub l'upload et insère une URL générée.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9477\" data-fude-source-end=\"9488\">Les images \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9488\" data-fude-source-end=\"9497\">file:\u002F\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9497\" data-fude-source-end=\"9576\"> ne fonctionnent pas. GitHub ne peut pas lire les fichiers de votre ordinateur.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9579\" data-fude-source-end=\"9725\">Si une image fonctionne en local mais pas sur GitHub, vérifiez la casse. macOS est souvent insensible à la casse ; GitHub est sensible à la casse.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\u003Cspan data-fude-source-start=\"9730\" data-fude-source-end=\"9750\">Les images dans Fude\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"9752\" data-fude-source-end=\"9833\">Dans Fude, les images Markdown standard sont conçues pour s'afficher proprement :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"9837\" data-fude-source-end=\"9920\">Les images locales relatives fonctionnent depuis l'emplacement du fichier Markdown.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9923\" data-fude-source-end=\"9966\">Les images locales depuis la racine, comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9966\" data-fude-source-end=\"9984\">\u002Fimages\u002Flogo.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9984\" data-fude-source-end=\"10039\">, sont résolues via le chemin d'asset sécurisé de Fude.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"10042\" data-fude-source-end=\"10105\">Les images web distantes s'affichent comme des images normales.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"10108\" data-fude-source-end=\"10192\">Les images en URL de données s'affichent lorsqu'elles utilisent un type d'image sûr.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"10195\" data-fude-source-end=\"10228\">Les sources non supportées comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10228\" data-fude-source-end=\"10237\">file:\u002F\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10237\" data-fude-source-end=\"10239\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10239\" data-fude-source-end=\"10246\">blob:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10246\" data-fude-source-end=\"10250\"> et \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10250\" data-fude-source-end=\"10263\">javascript:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10263\" data-fude-source-end=\"10309\"> ne sont pas rendues comme des images actives.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"10311\" data-fude-source-end=\"10552\">Fude traite aussi l'affichage des images comme une préférence de lecture. Vous pouvez masquer les images, afficher les images Markdown standard, ou activer le mode HTML d'image sanitizé quand vous avez besoin de balises d'image en HTML brut.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"10554\" data-fude-source-end=\"10811\">Le point important : Fude ne transmet pas de chemins locaux arbitraires au moteur de rendu. Les images locales passent par un canal d'asset contrôlé, ce qui garde l'expérience de lecture utile sans transformer Markdown en accès libre au système de fichiers.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"10816\" data-fude-source-end=\"10840\">Les images dans Obsidian\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"10842\" data-fude-source-end=\"10890\">Obsidian supporte les images Markdown standard :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"10904\" data-fude-code-block-end=\"10940\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10904\" data-fude-code-block-end=\"10940\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Capture d'écran\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fscreenshot.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"10946\" data-fude-source-end=\"10995\">Il supporte aussi les intégrations de type wiki :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"11009\" data-fude-code-block-end=\"11028\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11009\" data-fude-code-block-end=\"11028\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">screenshot.png\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"11034\" data-fude-source-end=\"11286\">La syntaxe wiki est plus courte et fonctionne très bien dans un vault Obsidian, mais ce n'est pas du Markdown standard. Si vous prévoyez de lire le même fichier dans GitHub, Fude, VS Code ou un générateur de site statique, utilisez la syntaxe standard.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11288\" data-fude-source-end=\"11349\">Obsidian supporte aussi sa propre syntaxe de taille d'image :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"11363\" data-fude-code-block-end=\"11386\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11363\" data-fude-code-block-end=\"11386\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">screenshot.png|400\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"11392\" data-fude-source-end=\"11438\">Pratique dans Obsidian, non portable ailleurs.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"11443\" data-fude-source-end=\"11474\">Résoudre les problèmes courants\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Ch3>\u003Cspan data-fude-source-start=\"11480\" data-fude-source-end=\"11515\">\"Mon image s'affiche comme un lien\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"11517\" data-fude-source-end=\"11571\">Vous avez probablement oublié le point d'exclamation :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"11585\" data-fude-code-block-end=\"11641\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11585\" data-fude-code-block-end=\"11641\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](.\u002Fimage.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">   ← lien\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  ← image\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>\u003Cspan data-fude-source-start=\"11651\" data-fude-source-end=\"11686\">\"Mon image locale ne se charge pas\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"11688\" data-fude-source-end=\"11766\">Vérifiez le chemin depuis le fichier Markdown, pas depuis la racine du projet.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11768\" data-fude-source-end=\"11789\">Si votre fichier est \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11789\" data-fude-source-end=\"11804\">docs\u002Fguide.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11804\" data-fude-source-end=\"11824\"> et votre image est \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11824\" data-fude-source-end=\"11847\">docs\u002Fimages\u002Fchart.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11847\" data-fude-source-end=\"11859\">, utilisez :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"11873\" data-fude-code-block-end=\"11905\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11873\" data-fude-code-block-end=\"11905\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Graphique\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Fchart.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"11911\" data-fude-source-end=\"11916\">Pas :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"11930\" data-fude-code-block-end=\"11967\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11930\" data-fude-code-block-end=\"11967\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Graphique\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fdocs\u002Fimages\u002Fchart.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"11973\" data-fude-source-end=\"12063\">Ce second chemin ne fonctionne que si le fichier Markdown se trouve à la racine du projet.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"12069\" data-fude-source-end=\"12112\">\"Ça marche sur mon Mac mais pas sur GitHub\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"12114\" data-fude-source-end=\"12133\">Vérifiez la casse :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"12147\" data-fude-code-block-end=\"12173\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"12147\" data-fude-code-block-end=\"12173\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Logo\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Flogo.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"12179\" data-fude-source-end=\"12196\">ne trouvera pas :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"12206\" data-fude-code-block-end=\"12221\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"12206\" data-fude-code-block-end=\"12221\">images\u002FLogo.png\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"12227\" data-fude-source-end=\"12262\">sur un système sensible à la casse.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"12264\" data-fude-source-end=\"12317\">Vérifiez aussi les espaces. Vous pouvez les encoder :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"12331\" data-fude-code-block-end=\"12369\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"12331\" data-fude-code-block-end=\"12369\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Diagramme\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Fuser%20flow.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"12375\" data-fude-source-end=\"12410\">Ou entourer le chemin de chevrons :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"12424\" data-fude-code-block-end=\"12462\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"12424\" data-fude-code-block-end=\"12462\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Diagramme\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">.\u002Fimages\u002Fuser flow.png\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>\u003Cspan data-fude-source-start=\"12472\" data-fude-source-end=\"12514\">\"Je n'arrive pas à redimensionner l'image\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"12516\" data-fude-source-end=\"12607\">Le Markdown pur ne permet pas de redimensionner les images. Utilisez l'une de ces options :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"12617\" data-fude-code-block-end=\"12677\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"12617\" data-fude-code-block-end=\"12677\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">img\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> src\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\".\u002Fimage.png\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"Texte alternatif\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> width\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"400\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"12683\" data-fude-source-end=\"12722\">ou redimensionnez le fichier lui-même :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"12736\" data-fude-code-block-end=\"12774\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"12736\" data-fude-code-block-end=\"12774\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage-400px.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"12780\" data-fude-source-end=\"12817\">La deuxième option est plus portable.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"12823\" data-fude-source-end=\"12872\">\"Le chemin de mon image contient des parenthèses\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"12874\" data-fude-source-end=\"12924\">Les parenthèses peuvent perturber le parseur, car \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"12924\" data-fude-source-end=\"12927\">)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"12927\" data-fude-source-end=\"12960\"> ferme la destination de l'image.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"12962\" data-fude-source-end=\"12987\">Utilisez l'encodage URL :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"13001\" data-fude-code-block-end=\"13048\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"13001\" data-fude-code-block-end=\"13048\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Graphique\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimages\u002Freport%20%28final%29.png)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"13054\" data-fude-source-end=\"13080\">Ou utilisez des chevrons :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"13094\" data-fude-code-block-end=\"13137\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"13094\" data-fude-code-block-end=\"13137\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Graphique\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">.\u002Fimages\u002Freport (final).png\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>\u003Cspan data-fude-source-start=\"13146\" data-fude-source-end=\"13162\">Référence rapide\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"13176\" data-fude-code-block-end=\"13740\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"13176\" data-fude-code-block-end=\"13740\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Image de base\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Image avec titre\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\"> \"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">Titre facultatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Image distante\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(https:\u002F\u002Fexample.com\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Texte alternatif vide pour une image décorative\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fdivider.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Image cliquable\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">![Texte alternatif]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](https:\u002F\u002Fexample.com)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Légende simple\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Texte alternatif\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">]\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">(.\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">*Texte de légende.*\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Redimensionner avec HTML\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">img\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> src\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\".\u002Fimage.png\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> alt\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"Texte alternatif\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> width\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"400\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Chemin avec espaces\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![Texte alternatif](<.\u002Fimages\u002Fmon image.png>)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Cp>\u003Cspan data-fude-source-start=\"13751\" data-fude-source-end=\"13935\">La syntaxe Markdown pour les images est simple, mais les images exposent tout ce qui rend Markdown pratique : chemins, portabilité, accessibilité et différences entre moteurs de rendu.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"13937\" data-fude-source-end=\"14123\">S'il faut retenir une règle, retenez celle-ci : gardez les images près des fichiers Markdown qui les utilisent, et écrivez le texte alternatif comme si l'image pouvait ne pas se charger.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"14125\" data-fude-source-end=\"14183\">Pour d'autres guides Markdown, consultez les articles sur \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Fcomment-creer-liens-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"14184\" data-fude-source-end=\"14193\">les liens\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"14233\" data-fude-source-end=\"14235\">, \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"14236\" data-fude-source-end=\"14248\">les tableaux\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"14291\" data-fude-source-end=\"14296\">, et \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Fcomment-ajouter-une-ligne-horizontale-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"14297\" data-fude-source-end=\"14320\">les lignes horizontales\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"14378\" data-fude-source-end=\"14379\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"14381\" data-fude-source-end=\"14471\">Si vous cherchez un lecteur Markdown qui gère proprement les images locales, essayez Fude.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"14473\" data-fude-source-end=\"14475\">📌 \u003C\u002Fspan>\u003Ca href=\"\u002Ffr#download\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"14476\" data-fude-source-end=\"14492\">Télécharger Fude\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>","\nLes images en Markdown ressemblent presque aux liens, avec un caractère en plus au début. Ce petit point d'exclamation est facile à oublier, mais il change tout : au lieu de créer un lien cliquable, Markdown intègre l'image directement dans le document.\n\nLa syntaxe de base prend cinq secondes à comprendre. Les détails prennent plus de temps : chemins locaux, texte alternatif, taille des images, légendes, comportement sur GitHub, intégrations Obsidian, et ce qui se passe quand le fichier est déplacé.\n\nCe guide couvre la version pratique, de la syntaxe dont vous avez besoin tous les jours jusqu'aux cas particuliers qui finissent souvent sur Stack Overflow.\n\n## La syntaxe de base\n\nLa syntaxe Markdown standard pour une image est :\n\n```markdown\n![Texte alternatif](.\u002Fimage.png)\n```\n\nElle contient trois éléments :\n\n- `!` indique à Markdown qu'il s'agit d'une image, pas d'un lien.\n- `[Texte alternatif]` décrit l'image.\n- `(.\u002Fimage.png)` pointe vers le fichier image.\n\nPar exemple :\n\n```markdown\n![Interface du lecteur Markdown Fude](.\u002Fimages\u002Ffude-reader.png)\n```\n\nSi l'image se charge correctement, le lecteur affiche l'image. Si elle ne se charge pas, la plupart des moteurs de rendu affichent le texte alternatif à la place.\n\nL'erreur la plus fréquente consiste à oublier le point d'exclamation :\n\n```markdown\n[Logo](.\u002Flogo.png)   ← lien vers le fichier image\n![Logo](.\u002Flogo.png)  ← affichage de l'image\n```\n\nLa première ligne crée un lien. La seconde intègre l'image.\n\n## Images locales\n\nLa plupart des images Markdown utilisent un chemin relatif. Le chemin est résolu à partir de l'emplacement du fichier Markdown.\n\n```markdown\n![Diagramme d'architecture](.\u002Fassets\u002Farchitecture.png)\n```\n\nSi votre document est ici :\n\n```text\ndocs\u002Fguide.md\n```\n\nEt votre image est ici :\n\n```text\ndocs\u002Fassets\u002Farchitecture.png\n```\n\nAlors `.\u002Fassets\u002Farchitecture.png` est correct.\n\nSi l'image est dans le dossier parent :\n\n```markdown\n![Logo](..\u002Flogo.png)\n```\n\nLes règles sont les mêmes que pour les liens relatifs :\n\n- `.\u002F` signifie \"répertoire courant\".\n- `..\u002F` signifie \"répertoire parent\".\n- `folder\u002Fimage.png` fonctionne aussi, mais `.\u002Ffolder\u002Fimage.png` rend l'intention plus claire.\n\nJe recommande de garder les images près des fichiers Markdown qui les utilisent. Une structure simple fonctionne bien :\n\n```text\ndocs\u002F\n  guide.md\n  images\u002F\n    diagram.png\n    screenshot.png\n```\n\nPuis référencez-les ainsi :\n\n```markdown\n![Diagramme système](.\u002Fimages\u002Fdiagram.png)\n![Capture d'écran de l'app](.\u002Fimages\u002Fscreenshot.png)\n```\n\nCela rend le document portable. Si vous déplacez tout le dossier `docs`, les chemins d'images continuent de fonctionner.\n\n## Images web\n\nVous pouvez également utiliser une URL complète :\n\n```markdown\n![Logo Fude](https:\u002F\u002Ffude.md\u002Fimages\u002Ffude-logo.png)\n```\n\nC'est utile pour les assets distants, les images hébergées sur un CDN, les badges et les documentations qui doivent s'afficher sans fichiers locaux.\n\nLe compromis : l'image dépend de l'URL distante. Si le serveur tombe, l'image disparaît. Si le propriétaire remplace l'image, votre document change sans que vous l'ayez modifié.\n\nPour une documentation durable, je préfère les images locales. Pour les badges et les assets dynamiques, les images distantes conviennent très bien.\n\n## Texte alternatif\n\nLe texte alternatif n'est pas décoratif. Il décrit l'image pour les personnes qui ne peuvent pas la voir, et il fournit un texte de secours utile lorsque l'image ne se charge pas.\n\nUn bon texte alternatif explique le contenu ou l'objectif de l'image :\n\n```markdown\n![Capture d'écran de Fude affichant un document Markdown avec un tableau](.\u002Ffude-table.png)\n```\n\nUn texte alternatif faible se contente de répéter qu'une image existe :\n\n```markdown\n![Image](.\u002Ffude-table.png)\n![Capture d'écran](.\u002Ffude-table.png)\n```\n\nSi l'image est purement décorative et n'ajoute aucune information, vous pouvez laisser le texte alternatif vide :\n\n```markdown\n![](.\u002Fdivider.png)\n```\n\nMais faites-le volontairement. La plupart des images dans une documentation ne sont pas décoratives. Les diagrammes, captures d'écran, graphiques et interfaces ont généralement besoin d'un texte alternatif utile.\n\n## Titres d'image\n\nComme les liens, les images peuvent recevoir un titre facultatif :\n\n```markdown\n![Lecteur Fude](.\u002Ffude-reader.png \"Fude affichant un fichier Markdown local\")\n```\n\nLe titre apparaît comme une infobulle dans certains moteurs de rendu. Le support est incohérent, surtout sur les appareils tactiles, donc ne mettez pas d'information essentielle dedans.\n\nUtilisez le texte alternatif pour le sens. Utilisez le titre seulement pour une petite note supplémentaire.\n\n## Formats d'image\n\nMarkdown lui-même ne se soucie pas de savoir si l'image est en PNG, JPG, SVG, WebP, AVIF ou GIF. Le moteur de rendu, lui, s'en soucie.\n\nChoix courants :\n\n| Format | Idéal pour | Notes |\n| --- | --- | --- |\n| PNG | Captures d'écran, UI, diagrammes | Net, fiable, souvent plus lourd |\n| JPG | Photos | Léger, mais avec perte |\n| SVG | Logos, diagrammes vectoriels | Excellent quand le rendu l'autorise |\n| WebP | Images web | Léger, largement supporté |\n| AVIF | Images web très compressées | Excellente compression, pas universel partout |\n| GIF | Animations simples | Lourd ; à utiliser avec parcimonie |\n\nPour des fichiers Markdown lus localement ou stockés dans un dépôt, PNG reste souvent le choix le plus sûr pour les captures d'écran et les diagrammes.\n\n## Redimensionner les images\n\nLe Markdown standard n'a pas de syntaxe pour définir la largeur ou la hauteur d'une image.\n\nCeci ne fonctionne pas en Markdown standard :\n\n```markdown\n![Logo](.\u002Flogo.png =200x100)\n```\n\nCertains outils supportent des extensions personnalisées de ce type, mais elles ne sont pas portables.\n\nLa solution portable la plus courante consiste à utiliser du HTML :\n\n```html\n\u003Cimg src=\".\u002Flogo.png\" alt=\"Logo\" width=\"200\" \u002F>\n```\n\nCela fonctionne dans beaucoup de moteurs de rendu Markdown, y compris GitHub, mais pas dans tous. Certaines applications désactivent le HTML brut pour des raisons de sécurité ou de cohérence.\n\nSi vous voulez que votre document fonctionne partout, redimensionnez le fichier image lui-même avant de le référencer :\n\n```markdown\n![Logo](.\u002Flogo-small.png)\n```\n\nC'est moins sophistiqué, mais plus fiable.\n\n## Légendes\n\nLe Markdown standard n'a pas de syntaxe native pour les légendes d'image.\n\nLa solution la plus simple consiste à ajouter un paragraphe en italique juste sous l'image :\n\n```markdown\n![Vue de lecture Fude](.\u002Ffude-reading-view.png)\n\n*Fude affichant un document Markdown local.*\n```\n\nC'est lisible dans le fichier Markdown brut et cela fonctionne presque partout.\n\nSi votre moteur de rendu supporte le HTML, vous pouvez utiliser `\u003Cfigure>` et `\u003Cfigcaption>` :\n\n```html\n\u003Cfigure>\n  \u003Cimg src=\".\u002Ffude-reading-view.png\" alt=\"Vue de lecture Fude\" \u002F>\n  \u003Cfigcaption>Fude affichant un document Markdown local.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\nC'est plus sémantique en HTML, mais moins portable dans les outils Markdown qui suppriment le HTML brut. Pour des notes et des README, je choisis généralement le paragraphe en italique.\n\n## Images cliquables\n\nUne image n'est pas cliquable par défaut. Pour la rendre cliquable, enveloppez la syntaxe d'image dans un lien :\n\n```markdown\n[![Logo Fude](.\u002Ffude-logo.png)](https:\u002F\u002Ffude.md)\n```\n\nDécomposons :\n\n- `![Logo Fude](.\u002Ffude-logo.png)` affiche l'image.\n- `[...](https:\u002F\u002Ffude.md)` transforme cette image en lien vers l'URL.\n\nCe modèle est fréquent pour les badges :\n\n```markdown\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuild-passing-green)](https:\u002F\u002Fgithub.com\u002Fuser\u002Frepo\u002Factions)\n```\n\nSi vous avez déjà lu le guide sur [les liens Markdown](\u002Ffr\u002Fblog\u002Fcomment-creer-liens-markdown), c'est la même syntaxe avec une image à l'intérieur du texte du lien.\n\n## Images dans les tableaux\n\nLes images peuvent apparaître dans des tableaux Markdown parce qu'elles sont du contenu en ligne :\n\n```markdown\n| Produit | Aperçu |\n| --- | --- |\n| Fude | ![Icône Fude](.\u002Ffude-icon.png) |\n```\n\nCela fonctionne dans de nombreux moteurs de rendu, y compris GitHub.\n\nMais utilisez-le avec prudence. Les grandes images dans les tableaux rendent le tableau difficile à lire, surtout sur petit écran. Si l'image a besoin d'espace, placez-la en dehors du tableau et mettez plutôt un lien vers elle dans le tableau.\n\n## Images en base64\n\nTechniquement, vous pouvez intégrer une image directement dans Markdown avec une URL de données :\n\n```markdown\n![Petite icône](data:image\u002Fpng;base64,iVBORw0KGgo...)\n```\n\nCela rend le fichier Markdown autonome, mais aussi laid, énorme et difficile à modifier.\n\nJ'évite les images base64 sauf pour de très petits assets générés ou des fixtures de test. Pour une écriture normale, gardez l'image dans un fichier séparé.\n\n## Les images sur GitHub\n\nGitHub supporte la syntaxe Markdown standard pour les images dans les README, issues, pull requests, wikis et fichiers `.md` rendus.\n\nCe qui fonctionne bien :\n\n- Les chemins relatifs comme `![Diagramme](.\u002Fdocs\u002Fdiagram.png)`.\n- Les URL distantes comme `![Badge](https:\u002F\u002Fimg.shields.io\u002F...)`.\n- Les images SVG, lorsqu'elles sont servies de manière sûre.\n- Les images cliquables avec `[![alt](image)](url)`.\n- Les balises HTML `\u003Cimg>` pour redimensionner, comme `\u003Cimg src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">`.\n\nQuelques spécificités GitHub :\n\n- Les chemins sont résolus par rapport au fichier Markdown, pas par rapport à la racine du dépôt.\n- Glisser une image dans une issue GitHub l'upload et insère une URL générée.\n- Les images `file:\u002F\u002F` ne fonctionnent pas. GitHub ne peut pas lire les fichiers de votre ordinateur.\n- Si une image fonctionne en local mais pas sur GitHub, vérifiez la casse. macOS est souvent insensible à la casse ; GitHub est sensible à la casse.\n\n## Les images dans Fude\n\nDans Fude, les images Markdown standard sont conçues pour s'afficher proprement :\n\n- Les images locales relatives fonctionnent depuis l'emplacement du fichier Markdown.\n- Les images locales depuis la racine, comme `\u002Fimages\u002Flogo.png`, sont résolues via le chemin d'asset sécurisé de Fude.\n- Les images web distantes s'affichent comme des images normales.\n- Les images en URL de données s'affichent lorsqu'elles utilisent un type d'image sûr.\n- Les sources non supportées comme `file:\u002F\u002F`, `blob:` et `javascript:` ne sont pas rendues comme des images actives.\n\nFude traite aussi l'affichage des images comme une préférence de lecture. Vous pouvez masquer les images, afficher les images Markdown standard, ou activer le mode HTML d'image sanitizé quand vous avez besoin de balises d'image en HTML brut.\n\nLe point important : Fude ne transmet pas de chemins locaux arbitraires au moteur de rendu. Les images locales passent par un canal d'asset contrôlé, ce qui garde l'expérience de lecture utile sans transformer Markdown en accès libre au système de fichiers.\n\n## Les images dans Obsidian\n\nObsidian supporte les images Markdown standard :\n\n```markdown\n![Capture d'écran](.\u002Fscreenshot.png)\n```\n\nIl supporte aussi les intégrations de type wiki :\n\n```markdown\n![[screenshot.png]]\n```\n\nLa syntaxe wiki est plus courte et fonctionne très bien dans un vault Obsidian, mais ce n'est pas du Markdown standard. Si vous prévoyez de lire le même fichier dans GitHub, Fude, VS Code ou un générateur de site statique, utilisez la syntaxe standard.\n\nObsidian supporte aussi sa propre syntaxe de taille d'image :\n\n```markdown\n![[screenshot.png|400]]\n```\n\nPratique dans Obsidian, non portable ailleurs.\n\n## Résoudre les problèmes courants\n\n### \"Mon image s'affiche comme un lien\"\n\nVous avez probablement oublié le point d'exclamation :\n\n```markdown\n[Alt](.\u002Fimage.png)   ← lien\n![Alt](.\u002Fimage.png)  ← image\n```\n\n### \"Mon image locale ne se charge pas\"\n\nVérifiez le chemin depuis le fichier Markdown, pas depuis la racine du projet.\n\nSi votre fichier est `docs\u002Fguide.md` et votre image est `docs\u002Fimages\u002Fchart.png`, utilisez :\n\n```markdown\n![Graphique](.\u002Fimages\u002Fchart.png)\n```\n\nPas :\n\n```markdown\n![Graphique](.\u002Fdocs\u002Fimages\u002Fchart.png)\n```\n\nCe second chemin ne fonctionne que si le fichier Markdown se trouve à la racine du projet.\n\n### \"Ça marche sur mon Mac mais pas sur GitHub\"\n\nVérifiez la casse :\n\n```markdown\n![Logo](.\u002Fimages\u002Flogo.png)\n```\n\nne trouvera pas :\n\n```text\nimages\u002FLogo.png\n```\n\nsur un système sensible à la casse.\n\nVérifiez aussi les espaces. Vous pouvez les encoder :\n\n```markdown\n![Diagramme](.\u002Fimages\u002Fuser%20flow.png)\n```\n\nOu entourer le chemin de chevrons :\n\n```markdown\n![Diagramme](\u003C.\u002Fimages\u002Fuser flow.png>)\n```\n\n### \"Je n'arrive pas à redimensionner l'image\"\n\nLe Markdown pur ne permet pas de redimensionner les images. Utilisez l'une de ces options :\n\n```html\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Texte alternatif\" width=\"400\" \u002F>\n```\n\nou redimensionnez le fichier lui-même :\n\n```markdown\n![Texte alternatif](.\u002Fimage-400px.png)\n```\n\nLa deuxième option est plus portable.\n\n### \"Le chemin de mon image contient des parenthèses\"\n\nLes parenthèses peuvent perturber le parseur, car `)` ferme la destination de l'image.\n\nUtilisez l'encodage URL :\n\n```markdown\n![Graphique](.\u002Fimages\u002Freport%20%28final%29.png)\n```\n\nOu utilisez des chevrons :\n\n```markdown\n![Graphique](\u003C.\u002Fimages\u002Freport (final).png>)\n```\n\n## Référence rapide\n\n```markdown\n# Image de base\n![Texte alternatif](.\u002Fimage.png)\n\n# Image avec titre\n![Texte alternatif](.\u002Fimage.png \"Titre facultatif\")\n\n# Image distante\n![Texte alternatif](https:\u002F\u002Fexample.com\u002Fimage.png)\n\n# Texte alternatif vide pour une image décorative\n![](.\u002Fdivider.png)\n\n# Image cliquable\n[![Texte alternatif](.\u002Fimage.png)](https:\u002F\u002Fexample.com)\n\n# Légende simple\n![Texte alternatif](.\u002Fimage.png)\n\n*Texte de légende.*\n\n# Redimensionner avec HTML\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Texte alternatif\" width=\"400\" \u002F>\n\n# Chemin avec espaces\n![Texte alternatif](\u003C.\u002Fimages\u002Fmon image.png>)\n```\n\n---\n\nLa syntaxe Markdown pour les images est simple, mais les images exposent tout ce qui rend Markdown pratique : chemins, portabilité, accessibilité et différences entre moteurs de rendu.\n\nS'il faut retenir une règle, retenez celle-ci : gardez les images près des fichiers Markdown qui les utilisent, et écrivez le texte alternatif comme si l'image pouvait ne pas se charger.\n\nPour d'autres guides Markdown, consultez les articles sur [les liens](\u002Ffr\u002Fblog\u002Fcomment-creer-liens-markdown), [les tableaux](\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet), et [les lignes horizontales](\u002Ffr\u002Fblog\u002Fcomment-ajouter-une-ligne-horizontale-markdown).\n\nSi vous cherchez un lecteur Markdown qui gère proprement les images locales, essayez Fude.\n\n📌 [Télécharger Fude](\u002Ffr#download)\n",[1325,1328],{"locale":1326,"slug":1327},"en","how-to-add-images-in-markdown",{"locale":1329,"slug":1330},"fr","comment-ajouter-images-markdown",{"title":1332,"path":675,"stem":1333,"description":1334,"children":-1},"Comment créer des liens en Markdown","fr\u002Fblog\u002F5.comment-creer-liens-markdown","Découvrez tous les types de liens Markdown : en ligne, de référence, ancres, relatifs, e-mail et liens d'images. Couvre GitHub, Obsidian, et les erreurs courantes avec des exemples.",1779087583054]