[{"data":1,"prerenderedAt":1334},["ShallowReactive",2],{"blog-post:en:\u002Fen\u002Fblog\u002Fhow-to-add-images-in-markdown":3},{"id":4,"title":5,"author":6,"body":7,"category":1308,"date":1309,"description":1310,"extension":1311,"image":1312,"imageAlt":5,"meta":1313,"navigation":1314,"path":1315,"seo":1316,"stem":1317,"tags":1318,"translationKey":1319,"__hash__":1320,"html":1321,"bodyMarkdown":1322,"translations":1323,"previous":1330,"next":1318},"blog\u002Fen\u002Fblog\u002F6.how-to-add-images-in-markdown.md","How to Add Images in Markdown","Antoine Frankart",{"type":8,"value":9,"toc":1284},"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,801,805,808,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,1270,1273,1280],[11,12,13],"p",{},"Images in Markdown look almost like links, with one extra character at the beginning. That tiny exclamation mark is easy to miss, but it changes everything: instead of creating a clickable link, Markdown embeds the image directly in the document.",[11,15,16],{},"The basic syntax takes five seconds. The details take longer: local paths, alt text, image size, captions, GitHub behavior, Obsidian embeds, and what happens when the file moves.",[11,18,19],{},"This guide covers the practical version, from the syntax you need every day to the edge cases that usually send people to Stack Overflow.",[21,22,24],"h2",{"id":23},"the-basic-syntax","The basic syntax",[11,26,27],{},"The standard Markdown image syntax is:",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-markdown shiki shiki-themes github-light github-dark","![Alt text](.\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],{},"It has three parts:",[49,50,51,58,64],"ul",{},[52,53,54,57],"li",{},[36,55,56],{},"!"," tells Markdown this is an image, not a link.",[52,59,60,63],{},[36,61,62],{},"[Alt text]"," describes the image.",[52,65,66,69],{},[36,67,68],{},"(.\u002Fimage.png)"," points to the image file.",[11,71,72],{},"For example:",[29,74,76],{"className":31,"code":75,"language":33,"meta":34,"style":34},"![Fude Markdown reader interface](.\u002Fimages\u002Ffude-reader.png)\n",[36,77,78],{"__ignoreMap":34},[39,79,80],{"class":41,"line":42},[39,81,75],{},[11,83,84],{},"If the image loads correctly, the reader displays the image. If it does not load, most renderers show the alt text instead.",[11,86,87],{},"The most common mistake is forgetting the exclamation mark:",[29,89,91],{"className":31,"code":90,"language":33,"meta":34,"style":34},"[Logo](.\u002Flogo.png)   ← link to the image file\n![Logo](.\u002Flogo.png)  ← display the image\n",[36,92,93,98],{"__ignoreMap":34},[39,94,95],{"class":41,"line":42},[39,96,97],{},"[Logo](.\u002Flogo.png)   ← link to the image file\n",[39,99,101],{"class":41,"line":100},2,[39,102,103],{},"![Logo](.\u002Flogo.png)  ← display the image\n",[11,105,106],{},"The first line creates a link. The second line embeds the image.",[21,108,110],{"id":109},"local-images","Local images",[11,112,113],{},"Most Markdown images use a relative path. The path is resolved from the location of the Markdown file.",[29,115,117],{"className":31,"code":116,"language":33,"meta":34,"style":34},"![Architecture diagram](.\u002Fassets\u002Farchitecture.png)\n",[36,118,119],{"__ignoreMap":34},[39,120,121],{"class":41,"line":42},[39,122,116],{},[11,124,125],{},"If your document is here:",[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],{},"And your image is here:",[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],{},"Then ",[36,147,148],{},".\u002Fassets\u002Farchitecture.png"," is correct.",[11,151,152],{},"If the image is one directory up:",[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],{},"The rules are the same as for relative links:",[49,166,167,173,179],{},[52,168,169,172],{},[36,170,171],{},".\u002F"," means \"same directory.\"",[52,174,175,178],{},[36,176,177],{},"..\u002F"," means \"parent directory.\"",[52,180,181,184,185,188],{},[36,182,183],{},"folder\u002Fimage.png"," works too, but ",[36,186,187],{},".\u002Ffolder\u002Fimage.png"," makes the intent clearer.",[11,190,191],{},"I recommend keeping images close to the Markdown files that use them. A simple structure works well:",[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],{},"Then reference them like this:",[29,202,204],{"className":31,"code":203,"language":33,"meta":34,"style":34},"![System diagram](.\u002Fimages\u002Fdiagram.png)\n![App screenshot](.\u002Fimages\u002Fscreenshot.png)\n",[36,205,206,211],{"__ignoreMap":34},[39,207,208],{"class":41,"line":42},[39,209,210],{},"![System diagram](.\u002Fimages\u002Fdiagram.png)\n",[39,212,213],{"class":41,"line":100},[39,214,215],{},"![App screenshot](.\u002Fimages\u002Fscreenshot.png)\n",[11,217,218,219,222],{},"This keeps the document portable. If you move the whole ",[36,220,221],{},"docs"," folder, the image paths still work.",[21,224,226],{"id":225},"web-images","Web images",[11,228,229],{},"You can also use a full URL:",[29,231,233],{"className":31,"code":232,"language":33,"meta":34,"style":34},"![Fude logo](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],{},"This is useful for remote assets, CDN-hosted images, badges, and documentation that must render without local files.",[11,243,244],{},"The tradeoff: the image depends on the remote URL. If the server goes down, the image disappears. If the owner replaces the image, your document changes without you touching it.",[11,246,247],{},"For long-lived documentation, I prefer local images. For badges and dynamic assets, remote images are fine.",[21,249,251],{"id":250},"alt-text","Alt text",[11,253,254],{},"Alt text is not decoration. It describes the image for readers who cannot see it, and it gives useful fallback text when the image cannot load.",[11,256,257],{},"Good alt text explains the content or purpose of the image:",[29,259,261],{"className":31,"code":260,"language":33,"meta":34,"style":34},"![Screenshot of Fude showing a Markdown document with a table](.\u002Ffude-table.png)\n",[36,262,263],{"__ignoreMap":34},[39,264,265],{"class":41,"line":42},[39,266,260],{},[11,268,269],{},"Weak alt text only repeats that an image exists:",[29,271,273],{"className":31,"code":272,"language":33,"meta":34,"style":34},"![Image](.\u002Ffude-table.png)\n![Screenshot](.\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],{},"![Screenshot](.\u002Ffude-table.png)\n",[11,286,287],{},"If the image is decorative and adds no information, you can leave the alt text empty:",[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],{},"But do this intentionally. Most images in documentation are not decorative. Diagrams, screenshots, charts, and UI captures usually need meaningful alt text.",[21,301,303],{"id":302},"image-titles","Image titles",[11,305,306],{},"Like links, images can have an optional title:",[29,308,310],{"className":31,"code":309,"language":33,"meta":34,"style":34},"![Fude reader](.\u002Ffude-reader.png \"Fude displaying a local Markdown file\")\n",[36,311,312],{"__ignoreMap":34},[39,313,314],{"class":41,"line":42},[39,315,309],{},[11,317,318],{},"The title appears as a tooltip in some renderers. Support is inconsistent, especially on touch devices, so don't put essential information there.",[11,320,321],{},"Use alt text for meaning. Use the title only for a small extra note.",[21,323,325],{"id":324},"image-formats","Image formats",[11,327,328],{},"Markdown itself does not care whether the image is PNG, JPG, SVG, WebP, AVIF, or GIF. The renderer does.",[11,330,331],{},"Common choices:",[333,334,335,351],"table",{},[336,337,338],"thead",{},[339,340,341,345,348],"tr",{},[342,343,344],"th",{},"Format",[342,346,347],{},"Best for",[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],{},"Screenshots, UI, diagrams",[357,364,365],{},"Sharp, reliable, often larger",[339,367,368,371,374],{},[357,369,370],{},"JPG",[357,372,373],{},"Photos",[357,375,376],{},"Small, but lossy",[339,378,379,382,385],{},[357,380,381],{},"SVG",[357,383,384],{},"Logos, vector diagrams",[357,386,387],{},"Great when the renderer allows it",[339,389,390,393,395],{},[357,391,392],{},"WebP",[357,394,226],{},[357,396,397],{},"Small, widely supported",[339,399,400,403,406],{},[357,401,402],{},"AVIF",[357,404,405],{},"Highly compressed web images",[357,407,408],{},"Excellent compression, not universal everywhere",[339,410,411,414,417],{},[357,412,413],{},"GIF",[357,415,416],{},"Simple animations",[357,418,419],{},"Heavy; use sparingly",[11,421,422],{},"For Markdown files you read locally or store in a repository, PNG is usually the safest default for screenshots and diagrams.",[21,424,426],{"id":425},"resizing-images","Resizing images",[11,428,429],{},"Standard Markdown has no syntax for image width or height.",[11,431,432],{},"This does not work in standard Markdown:",[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],{},"Some tools support custom extensions like that, but they are not portable.",[11,446,447],{},"The most common portable workaround is 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],{},"This works in many Markdown renderers, including GitHub, but not all of them. Some apps disable raw HTML for security or consistency.",[11,499,500],{},"If you need your document to work everywhere, resize the image file itself before referencing it:",[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],{},"That is boring, but reliable.",[21,514,516],{"id":515},"captions","Captions",[11,518,519],{},"Standard Markdown has no native caption syntax for images.",[11,521,522],{},"The simplest workaround is an italic paragraph right below the image:",[29,524,526],{"className":31,"code":525,"language":33,"meta":34,"style":34},"![Fude reading view](.\u002Ffude-reading-view.png)\n\n*Fude rendering a local Markdown document.*\n",[36,527,528,533,539],{"__ignoreMap":34},[39,529,530],{"class":41,"line":42},[39,531,532],{},"![Fude reading view](.\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 rendering a local Markdown document.*\n",[11,546,547],{},"This is readable in the raw Markdown file and works almost everywhere.",[11,549,550,551,554,555,558],{},"If your renderer supports HTML, you can use ",[36,552,553],{},"\u003Cfigure>"," and ",[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=\"Fude reading view\" \u002F>\n  \u003Cfigcaption>Fude rendering a local Markdown document.\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},"\"Fude reading view\"",[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 rendering a local Markdown document.\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],{},"This is semantically better in HTML, but less portable in Markdown tools that strip raw HTML. For notes and README files, I usually choose the italic paragraph.",[21,625,627],{"id":626},"clickable-images","Clickable images",[11,629,630],{},"An image is not clickable by default. To make it clickable, wrap the image syntax inside a link:",[29,632,634],{"className":31,"code":633,"language":33,"meta":34,"style":34},"[![Fude logo](.\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],{},"Breaking it down:",[49,644,645,651],{},[52,646,647,650],{},[36,648,649],{},"![Fude logo](.\u002Ffude-logo.png)"," displays the image.",[52,652,653,656],{},[36,654,655],{},"[...](https:\u002F\u002Ffude.md)"," makes that image link to the URL.",[11,658,659],{},"This pattern is common for 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],{},"If you already read the guide on ",[673,674,676],"a",{"href":675},"\u002Fen\u002Fblog\u002Fhow-to-create-links-in-markdown","Markdown links",", this is the same syntax with an image inside the link text.",[21,679,681],{"id":680},"images-inside-tables","Images inside tables",[11,683,684],{},"Images can appear inside Markdown tables because they are inline content:",[29,686,688],{"className":31,"code":687,"language":33,"meta":34,"style":34},"| Product | Preview |\n| --- | --- |\n| Fude | ![Fude icon](.\u002Ffude-icon.png) |\n",[36,689,690,695,700],{"__ignoreMap":34},[39,691,692],{"class":41,"line":42},[39,693,694],{},"| Product | Preview |\n",[39,696,697],{"class":41,"line":100},[39,698,699],{},"| --- | --- |\n",[39,701,702],{"class":41,"line":541},[39,703,704],{},"| Fude | ![Fude icon](.\u002Ffude-icon.png) |\n",[11,706,707],{},"This works in many renderers, including GitHub.",[11,709,710],{},"But use it carefully. Large images inside tables make the table hard to scan, especially on small screens. If the image needs real space, put it outside the table and link to it from the table instead.",[21,712,714],{"id":713},"base64-images","Base64 images",[11,716,717],{},"You can technically embed an image directly in Markdown using a data URL:",[29,719,721],{"className":31,"code":720,"language":33,"meta":34,"style":34},"![Tiny icon](data:image\u002Fpng;base64,iVBORw0KGgo...)\n",[36,722,723],{"__ignoreMap":34},[39,724,725],{"class":41,"line":42},[39,726,720],{},[11,728,729],{},"This makes the Markdown file self-contained, but it also makes it ugly, huge, and hard to edit.",[11,731,732],{},"I avoid base64 images except for tiny generated assets or test fixtures. For normal writing, keep the image as a separate file.",[21,734,736],{"id":735},"images-in-github","Images in GitHub",[11,738,739,740,743],{},"GitHub supports standard Markdown image syntax in README files, issues, pull requests, wikis, and rendered ",[36,741,742],{},".md"," files.",[11,745,746],{},"What works well:",[49,748,749,756,762,765,771],{},[52,750,751,752,755],{},"Relative image paths such as ",[36,753,754],{},"![Diagram](.\u002Fdocs\u002Fdiagram.png)",".",[52,757,758,759,755],{},"Remote image URLs such as ",[36,760,761],{},"![Badge](https:\u002F\u002Fimg.shields.io\u002F...)",[52,763,764],{},"SVG images, when they are served safely.",[52,766,767,768,755],{},"Clickable images with ",[36,769,770],{},"[![alt](image)](url)",[52,772,773,774,777,778,755],{},"HTML ",[36,775,776],{},"\u003Cimg>"," tags for resizing, such as ",[36,779,780],{},"\u003Cimg src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">",[11,782,783],{},"A few GitHub-specific notes:",[49,785,786,789,792,798],{},[52,787,788],{},"Paths are resolved relative to the Markdown file, not the repository root.",[52,790,791],{},"Dragging an image into a GitHub issue uploads it and inserts a generated URL.",[52,793,794,797],{},[36,795,796],{},"file:\u002F\u002F"," images do not work. GitHub cannot read files from your computer.",[52,799,800],{},"If an image works locally but not on GitHub, check capitalization. macOS is often case-insensitive; GitHub is case-sensitive.",[21,802,804],{"id":803},"images-in-fude","Images in Fude",[11,806,807],{},"In Fude, standard Markdown images are designed to render cleanly:",[49,809,810,813,820,823,826],{},[52,811,812],{},"Local relative images work from the Markdown file location.",[52,814,815,816,819],{},"Root-local images such as ",[36,817,818],{},"\u002Fimages\u002Flogo.png"," are resolved through Fude's safe asset path.",[52,821,822],{},"Remote web images render as normal images.",[52,824,825],{},"Data URL images render when they use a safe image type.",[52,827,828,829,831,832,835,836,839],{},"Unsupported sources such as ",[36,830,796],{},", ",[36,833,834],{},"blob:",", and ",[36,837,838],{},"javascript:"," are not rendered as live images.",[11,841,842],{},"Fude also treats image display as a reading preference. You can hide images, show standard Markdown images, or opt into the sanitized HTML image mode when you need raw HTML image tags.",[11,844,845],{},"The important part: Fude does not leak arbitrary local paths into the renderer. Local images are loaded through a controlled asset channel, which keeps the reading experience useful without turning Markdown into unrestricted filesystem access.",[21,847,849],{"id":848},"images-in-obsidian","Images in Obsidian",[11,851,852],{},"Obsidian supports standard Markdown images:",[29,854,856],{"className":31,"code":855,"language":33,"meta":34,"style":34},"![Screenshot](.\u002Fscreenshot.png)\n",[36,857,858],{"__ignoreMap":34},[39,859,860],{"class":41,"line":42},[39,861,855],{},[11,863,864],{},"It also supports wiki-style embeds:",[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],{},"The wiki syntax is shorter and works well inside an Obsidian vault, but it is not standard Markdown. If you plan to read the same file in GitHub, Fude, VS Code, or a static site generator, use the standard syntax.",[11,878,879],{},"Obsidian also supports its own image sizing syntax:",[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],{},"Useful inside Obsidian, not portable outside it.",[21,893,895],{"id":894},"debugging-common-problems","Debugging common problems",[897,898,900],"h3",{"id":899},"my-image-shows-as-a-link","\"My image shows as a link\"",[11,902,903],{},"You probably forgot the exclamation mark:",[29,905,907],{"className":31,"code":906,"language":33,"meta":34,"style":34},"[Alt](.\u002Fimage.png)   ← link\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)   ← link\n",[39,915,916],{"class":41,"line":100},[39,917,918],{},"![Alt](.\u002Fimage.png)  ← image\n",[897,920,922],{"id":921},"my-local-image-doesnt-load","\"My local image doesn't load\"",[11,924,925],{},"Check the path from the Markdown file, not from the project root.",[11,927,928,929,932,933,936],{},"If your file is ",[36,930,931],{},"docs\u002Fguide.md"," and your image is ",[36,934,935],{},"docs\u002Fimages\u002Fchart.png",", use:",[29,938,940],{"className":31,"code":939,"language":33,"meta":34,"style":34},"![Chart](.\u002Fimages\u002Fchart.png)\n",[36,941,942],{"__ignoreMap":34},[39,943,944],{"class":41,"line":42},[39,945,939],{},[11,947,948],{},"Not:",[29,950,952],{"className":31,"code":951,"language":33,"meta":34,"style":34},"![Chart](.\u002Fdocs\u002Fimages\u002Fchart.png)\n",[36,953,954],{"__ignoreMap":34},[39,955,956],{"class":41,"line":42},[39,957,951],{},[11,959,960],{},"That second path only works if the Markdown file is at the project root.",[897,962,964],{"id":963},"it-works-on-my-mac-but-not-on-github","\"It works on my Mac but not on GitHub\"",[11,966,967],{},"Check capitalization:",[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],{},"will not find:",[29,981,984],{"className":982,"code":983,"language":131,"meta":34},[129],"images\u002FLogo.png\n",[36,985,983],{"__ignoreMap":34},[11,987,988],{},"on a case-sensitive system.",[11,990,991],{},"Also check spaces. Either encode them:",[29,993,995],{"className":31,"code":994,"language":33,"meta":34,"style":34},"![Diagram](.\u002Fimages\u002Fuser%20flow.png)\n",[36,996,997],{"__ignoreMap":34},[39,998,999],{"class":41,"line":42},[39,1000,994],{},[11,1002,1003],{},"Or wrap the path in angle brackets:",[29,1005,1007],{"className":31,"code":1006,"language":33,"meta":34,"style":34},"![Diagram](\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},"i-cant-resize-the-image","\"I can't resize the image\"",[11,1018,1019],{},"Pure Markdown cannot resize images. Use one of these options:",[29,1021,1023],{"className":450,"code":1022,"language":452,"meta":34,"style":34},"\u003Cimg src=\".\u002Fimage.png\" alt=\"Alt text\" 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},"\"Alt text\"",[39,1046,486],{"class":467},[39,1048,471],{"class":459},[39,1050,1051],{"class":474},"\"400\"",[39,1053,494],{"class":459},[11,1055,1056],{},"or resize the actual file:",[29,1058,1060],{"className":31,"code":1059,"language":33,"meta":34,"style":34},"![Alt text](.\u002Fimage-400px.png)\n",[36,1061,1062],{"__ignoreMap":34},[39,1063,1064],{"class":41,"line":42},[39,1065,1059],{},[11,1067,1068],{},"The second option is more portable.",[897,1070,1072],{"id":1071},"my-image-path-contains-parentheses","\"My image path contains parentheses\"",[11,1074,1075,1076,1079],{},"Parentheses can confuse the parser because ",[36,1077,1078],{},")"," closes the image destination.",[11,1081,1082],{},"Use percent encoding:",[29,1084,1086],{"className":31,"code":1085,"language":33,"meta":34,"style":34},"![Chart](.\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],{},"Or use angle brackets:",[29,1096,1098],{"className":31,"code":1097,"language":33,"meta":34,"style":34},"![Chart](\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},"quick-reference","Quick reference",[29,1109,1111],{"className":31,"code":1110,"language":33,"meta":34,"style":34},"# Basic image\n![Alt text](.\u002Fimage.png)\n\n# Image with title\n![Alt text](.\u002Fimage.png \"Optional title\")\n\n# Remote image\n![Alt text](https:\u002F\u002Fexample.com\u002Fimage.png)\n\n# Empty alt text for decorative image\n![](.\u002Fdivider.png)\n\n# Clickable image\n[![Alt text](.\u002Fimage.png)](https:\u002F\u002Fexample.com)\n\n# Caption workaround\n![Alt text](.\u002Fimage.png)\n\n*Caption text.*\n\n# Resize with HTML\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Alt text\" width=\"400\" \u002F>\n\n# Path with spaces\n![Alt text](\u003C.\u002Fimages\u002Fmy 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],{},"# Basic image\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 with title\n",[39,1132,1134],{"class":41,"line":1133},5,[39,1135,1136],{},"![Alt text](.\u002Fimage.png \"Optional title\")\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],{},"# Remote image\n",[39,1149,1151],{"class":41,"line":1150},8,[39,1152,1153],{},"![Alt text](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],{},"# Empty alt text for decorative image\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],{},"# Clickable image\n",[39,1182,1184],{"class":41,"line":1183},14,[39,1185,1186],{},"[![Alt text](.\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],{},"# Caption workaround\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],{},"*Caption text.*\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],{},"# Resize with 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],{},"# Path with spaces\n",[39,1242,1244],{"class":41,"line":1243},25,[39,1245,1246],{},"![Alt text](\u003C.\u002Fimages\u002Fmy image.png>)\n",[1248,1249],"hr",{},[11,1251,1252],{},"Markdown image syntax is simple, but images expose everything that makes Markdown practical: paths, portability, accessibility, and renderer differences.",[11,1254,1255],{},"If you remember one rule, make it this: keep images near the Markdown files that use them, and write alt text as if the image might fail to load.",[11,1257,1258,1259,831,1262,835,1266,755],{},"For more Markdown guides, see the articles on ",[673,1260,1261],{"href":675},"links",[673,1263,1265],{"href":1264},"\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples","tables",[673,1267,1269],{"href":1268},"\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown","horizontal lines",[11,1271,1272],{},"If you want a Markdown reader that handles local images cleanly, try Fude.",[11,1274,1275,1276],{},"📌 ",[673,1277,1279],{"href":1278},"\u002Fen#download","Download Fude",[1281,1282,1283],"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":1285},[1286,1287,1288,1289,1290,1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1307],{"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":803,"depth":100,"text":804},{"id":848,"depth":100,"text":849},{"id":894,"depth":100,"text":895,"children":1301},[1302,1303,1304,1305,1306],{"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","Learn how to add images in Markdown, write useful alt text, use relative paths, resize images, add captions, and handle GitHub, Obsidian, and Fude-specific behavior.","md","\u002Fimages\u002Fblog\u002Fblog6",{},false,"\u002Fen\u002Fblog\u002Fhow-to-add-images-in-markdown",{"title":5,"description":1310},"en\u002Fblog\u002F6.how-to-add-images-in-markdown",null,"markdown-images-guide","6yonJXfQU9lFtkgy9ySfDhl0o3_hz4lzKltuSRJXQmE","\u003Cp>\u003Cspan data-fude-source-start=\"1\" data-fude-source-end=\"247\">Images in Markdown look almost like links, with one extra character at the beginning. That tiny exclamation mark is easy to miss, but it changes everything: instead of creating a clickable link, Markdown embeds the image directly in the document.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"249\" data-fude-source-end=\"427\">The basic syntax takes five seconds. The details take longer: local paths, alt text, image size, captions, GitHub behavior, Obsidian embeds, and what happens when the file moves.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"429\" data-fude-source-end=\"566\">This guide covers the practical version, from the syntax you need every day to the edge cases that usually send people to Stack Overflow.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"571\" data-fude-source-end=\"587\">The basic syntax\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"589\" data-fude-source-end=\"627\">The standard Markdown image syntax is:\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=\"641\" data-fude-code-block-end=\"665\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"641\" data-fude-code-block-end=\"665\">\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 text\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=\"671\" data-fude-source-end=\"690\">It has three parts:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"694\" data-fude-source-end=\"697\">!\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"697\" data-fude-source-end=\"742\"> tells Markdown this is an image, not a link.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"745\" data-fude-source-end=\"757\">[Alt text]\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"757\" data-fude-source-end=\"778\"> describes the image.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"781\" data-fude-source-end=\"796\">(.\u002Fimage.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"796\" data-fude-source-end=\"822\"> points to the image file.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"824\" data-fude-source-end=\"836\">For example:\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=\"850\" data-fude-code-block-end=\"909\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"850\" data-fude-code-block-end=\"909\">\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%))\">Fude Markdown reader interface\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=\"915\" data-fude-source-end=\"1038\">If the image loads correctly, the reader displays the image. If it does not load, most renderers show the alt text instead.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1040\" data-fude-source-end=\"1099\">The most common mistake is forgetting the exclamation mark:\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=\"1113\" data-fude-code-block-end=\"1199\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1113\" data-fude-code-block-end=\"1199\">\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))\">   ← link to the image file\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))\">  ← display the image\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1205\" data-fude-source-end=\"1269\">The first line creates a link. The second line embeds the image.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"1274\" data-fude-source-end=\"1286\">Local images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"1288\" data-fude-source-end=\"1390\">Most Markdown images use a relative path. The path is resolved from the location of the Markdown file.\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=\"1404\" data-fude-code-block-end=\"1454\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1404\" data-fude-code-block-end=\"1454\">\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%))\">Architecture diagram\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=\"1460\" data-fude-source-end=\"1485\">If your document is here:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"1495\" data-fude-code-block-end=\"1508\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"1495\" data-fude-code-block-end=\"1508\">docs\u002Fguide.md\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1514\" data-fude-source-end=\"1537\">And your image is here:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"1547\" data-fude-code-block-end=\"1575\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"1547\" data-fude-code-block-end=\"1575\">docs\u002Fassets\u002Farchitecture.png\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1581\" data-fude-source-end=\"1586\">Then \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1586\" data-fude-source-end=\"1613\">.\u002Fassets\u002Farchitecture.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1613\" data-fude-source-end=\"1625\"> is correct.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1627\" data-fude-source-end=\"1660\">If the image is one directory up:\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=\"1674\" data-fude-code-block-end=\"1694\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1674\" data-fude-code-block-end=\"1694\">\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=\"1700\" data-fude-source-end=\"1745\">The rules are the same as for relative links:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1749\" data-fude-source-end=\"1753\">.\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1753\" data-fude-source-end=\"1777\"> means \"same directory.\"\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1780\" data-fude-source-end=\"1785\">..\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1785\" data-fude-source-end=\"1811\"> means \"parent directory.\"\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1814\" data-fude-source-end=\"1832\">folder\u002Fimage.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1832\" data-fude-source-end=\"1848\"> works too, but \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1848\" data-fude-source-end=\"1868\">.\u002Ffolder\u002Fimage.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1868\" data-fude-source-end=\"1894\"> makes the intent clearer.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"1896\" data-fude-source-end=\"1996\">I recommend keeping images close to the Markdown files that use them. A simple structure works well:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"2006\" data-fude-code-block-end=\"2067\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"2006\" data-fude-code-block-end=\"2067\">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=\"2073\" data-fude-source-end=\"2103\">Then reference them like this:\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=\"2117\" data-fude-code-block-end=\"2199\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2117\" data-fude-code-block-end=\"2199\">\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%))\">System diagram\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%))\">App screenshot\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=\"2205\" data-fude-source-end=\"2261\">This keeps the document portable. If you move the whole \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2261\" data-fude-source-end=\"2267\">docs\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2267\" data-fude-source-end=\"2303\"> folder, the image paths still work.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"2308\" data-fude-source-end=\"2318\">Web images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"2320\" data-fude-source-end=\"2348\">You can also use a full 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=\"2362\" data-fude-code-block-end=\"2412\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2362\" data-fude-code-block-end=\"2412\">\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%))\">Fude logo\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=\"2418\" data-fude-source-end=\"2534\">This is useful for remote assets, CDN-hosted images, badges, and documentation that must render without local files.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2536\" data-fude-source-end=\"2713\">The tradeoff: the image depends on the remote URL. If the server goes down, the image disappears. If the owner replaces the image, your document changes without you touching it.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2715\" data-fude-source-end=\"2822\">For long-lived documentation, I prefer local images. For badges and dynamic assets, remote images are fine.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"2827\" data-fude-source-end=\"2835\">Alt text\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"2837\" data-fude-source-end=\"2980\">Alt text is not decoration. It describes the image for readers who cannot see it, and it gives useful fallback text when the image cannot load.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2982\" data-fude-source-end=\"3041\">Good alt text explains the content or purpose of the 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=\"3055\" data-fude-code-block-end=\"3135\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3055\" data-fude-code-block-end=\"3135\">\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 of Fude showing a Markdown document with a table\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=\"3141\" data-fude-source-end=\"3189\">Weak alt text only repeats that an image exists:\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=\"3203\" data-fude-code-block-end=\"3261\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3203\" data-fude-code-block-end=\"3261\">\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%))\">Screenshot\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=\"3267\" data-fude-source-end=\"3352\">If the image is decorative and adds no information, you can leave the alt text empty:\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=\"3366\" data-fude-code-block-end=\"3384\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3366\" data-fude-code-block-end=\"3384\">\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=\"3390\" data-fude-source-end=\"3546\">But do this intentionally. Most images in documentation are not decorative. Diagrams, screenshots, charts, and UI captures usually need meaningful alt text.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3551\" data-fude-source-end=\"3563\">Image titles\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3565\" data-fude-source-end=\"3611\">Like links, images can have an optional title:\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=\"3625\" data-fude-code-block-end=\"3698\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3625\" data-fude-code-block-end=\"3698\">\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%))\">Fude reader\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 displaying a local Markdown file\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=\"3704\" data-fude-source-end=\"3849\">The title appears as a tooltip in some renderers. Support is inconsistent, especially on touch devices, so don't put essential information there.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3851\" data-fude-source-end=\"3919\">Use alt text for meaning. Use the title only for a small extra note.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3924\" data-fude-source-end=\"3937\">Image formats\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3939\" data-fude-source-end=\"4043\">Markdown itself does not care whether the image is PNG, JPG, SVG, WebP, AVIF, or GIF. The renderer does.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4045\" data-fude-source-end=\"4060\">Common choices:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003Cspan data-fude-source-start=\"4064\" data-fude-source-end=\"4070\">Format\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"4073\" data-fude-source-end=\"4081\">Best for\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"4084\" data-fude-source-end=\"4089\">Notes\u003C\u002Fspan>\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4114\" data-fude-source-end=\"4117\">PNG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4120\" data-fude-source-end=\"4145\">Screenshots, UI, diagrams\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4148\" data-fude-source-end=\"4177\">Sharp, reliable, often larger\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4182\" data-fude-source-end=\"4185\">JPG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4188\" data-fude-source-end=\"4194\">Photos\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4197\" data-fude-source-end=\"4213\">Small, but lossy\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4218\" data-fude-source-end=\"4221\">SVG\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4224\" data-fude-source-end=\"4246\">Logos, vector diagrams\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4249\" data-fude-source-end=\"4282\">Great when the renderer allows it\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4287\" data-fude-source-end=\"4291\">WebP\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4294\" data-fude-source-end=\"4304\">Web images\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4307\" data-fude-source-end=\"4330\">Small, widely supported\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4335\" data-fude-source-end=\"4339\">AVIF\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4342\" data-fude-source-end=\"4370\">Highly compressed web images\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4373\" data-fude-source-end=\"4420\">Excellent compression, not universal everywhere\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4425\" data-fude-source-end=\"4428\">GIF\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4431\" data-fude-source-end=\"4448\">Simple animations\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"4451\" data-fude-source-end=\"4471\">Heavy; use sparingly\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cspan data-fude-source-start=\"4475\" data-fude-source-end=\"4600\">For Markdown files you read locally or store in a repository, PNG is usually the safest default for screenshots and diagrams.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"4605\" data-fude-source-end=\"4620\">Resizing images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"4622\" data-fude-source-end=\"4680\">Standard Markdown has no syntax for image width or height.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4682\" data-fude-source-end=\"4722\">This does not work in standard 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=\"4736\" data-fude-code-block-end=\"4764\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"4736\" data-fude-code-block-end=\"4764\">\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=\"4770\" data-fude-source-end=\"4844\">Some tools support custom extensions like that, but they are not portable.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4846\" data-fude-source-end=\"4890\">The most common portable workaround is 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=\"4900\" data-fude-code-block-end=\"4947\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"4900\" data-fude-code-block-end=\"4947\">\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=\"4953\" data-fude-source-end=\"5086\">This works in many Markdown renderers, including GitHub, but not all of them. Some apps disable raw HTML for security or consistency.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5088\" data-fude-source-end=\"5185\">If you need your document to work everywhere, resize the image file itself before referencing it:\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=\"5199\" data-fude-code-block-end=\"5224\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5199\" data-fude-code-block-end=\"5224\">\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=\"5230\" data-fude-source-end=\"5259\">That is boring, but reliable.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5264\" data-fude-source-end=\"5272\">Captions\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"5274\" data-fude-source-end=\"5332\">Standard Markdown has no native caption syntax for images.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5334\" data-fude-source-end=\"5403\">The simplest workaround is an italic paragraph right below the 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=\"5417\" data-fude-code-block-end=\"5507\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5417\" data-fude-code-block-end=\"5507\">\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%))\">Fude reading view\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 rendering a local Markdown document.*\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5513\" data-fude-source-end=\"5583\">This is readable in the raw Markdown file and works almost everywhere.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5585\" data-fude-source-end=\"5629\">If your renderer supports HTML, you can use \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5629\" data-fude-source-end=\"5639\"><figure>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5639\" data-fude-source-end=\"5644\"> and \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5644\" data-fude-source-end=\"5658\"><figcaption>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5658\" data-fude-source-end=\"5659\">:\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=\"5669\" data-fude-code-block-end=\"5820\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"5669\" data-fude-code-block-end=\"5820\">\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)\">\"Fude reading view\"\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 rendering a local Markdown document.<\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=\"5826\" data-fude-source-end=\"5986\">This is semantically better in HTML, but less portable in Markdown tools that strip raw HTML. For notes and README files, I usually choose the italic paragraph.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5991\" data-fude-source-end=\"6007\">Clickable images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"6009\" data-fude-source-end=\"6105\">An image is not clickable by default. To make it clickable, wrap the image syntax inside a link:\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=\"6119\" data-fude-code-block-end=\"6167\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6119\" data-fude-code-block-end=\"6167\">\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%))\">![Fude logo]\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=\"6173\" data-fude-source-end=\"6190\">Breaking it down:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"6194\" data-fude-source-end=\"6225\">![Fude logo](.\u002Ffude-logo.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6225\" data-fude-source-end=\"6245\"> displays the image.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"6248\" data-fude-source-end=\"6272\">[...](https:\u002F\u002Ffude.md)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6272\" data-fude-source-end=\"6306\"> makes that image link to the URL.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"6308\" data-fude-source-end=\"6342\">This pattern is common for 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=\"6356\" data-fude-code-block-end=\"6461\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6356\" data-fude-code-block-end=\"6461\">\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=\"6467\" data-fude-source-end=\"6500\">If you already read the guide on \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fhow-to-create-links-in-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"6501\" data-fude-source-end=\"6515\">Markdown links\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"6558\" data-fude-source-end=\"6619\">, this is the same syntax with an image inside the link text.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"6624\" data-fude-source-end=\"6644\">Images inside tables\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"6646\" data-fude-source-end=\"6719\">Images can appear inside Markdown tables because they are inline content:\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=\"6733\" data-fude-code-block-end=\"6809\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6733\" data-fude-code-block-end=\"6809\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Product | Preview |\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%))\">Fude icon\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=\"6815\" data-fude-source-end=\"6862\">This works in many renderers, including GitHub.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6864\" data-fude-source-end=\"7065\">But use it carefully. Large images inside tables make the table hard to scan, especially on small screens. If the image needs real space, put it outside the table and link to it from the table instead.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"7070\" data-fude-source-end=\"7083\">Base64 images\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"7085\" data-fude-source-end=\"7158\">You can technically embed an image directly in Markdown using a data 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=\"7172\" data-fude-code-block-end=\"7222\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"7172\" data-fude-code-block-end=\"7222\">\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%))\">Tiny icon\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=\"7228\" data-fude-source-end=\"7323\">This makes the Markdown file self-contained, but it also makes it ugly, huge, and hard to edit.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"7325\" data-fude-source-end=\"7452\">I avoid base64 images except for tiny generated assets or test fixtures. For normal writing, keep the image as a separate file.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"7457\" data-fude-source-end=\"7473\">Images in GitHub\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"7475\" data-fude-source-end=\"7582\">GitHub supports standard Markdown image syntax in README files, issues, pull requests, wikis, and rendered \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7582\" data-fude-source-end=\"7587\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7587\" data-fude-source-end=\"7594\"> files.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"7596\" data-fude-source-end=\"7612\">What works well:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"7616\" data-fude-source-end=\"7645\">Relative image paths such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7645\" data-fude-source-end=\"7677\">![Diagram](.\u002Fdocs\u002Fdiagram.png)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7677\" data-fude-source-end=\"7678\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7681\" data-fude-source-end=\"7707\">Remote image URLs such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7707\" data-fude-source-end=\"7745\">![Badge](https:\u002F\u002Fimg.shields.io\u002F...)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7745\" data-fude-source-end=\"7746\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7749\" data-fude-source-end=\"7789\">SVG images, when they are served safely.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7792\" data-fude-source-end=\"7814\">Clickable images with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7814\" data-fude-source-end=\"7836\">[![alt](image)](url)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7836\" data-fude-source-end=\"7837\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7840\" data-fude-source-end=\"7845\">HTML \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7845\" data-fude-source-end=\"7852\"><img>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7852\" data-fude-source-end=\"7880\"> tags for resizing, such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7880\" data-fude-source-end=\"7927\"><img src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7927\" data-fude-source-end=\"7928\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"7930\" data-fude-source-end=\"7958\">A few GitHub-specific notes:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"7962\" data-fude-source-end=\"8036\">Paths are resolved relative to the Markdown file, not the repository root.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8039\" data-fude-source-end=\"8116\">Dragging an image into a GitHub issue uploads it and inserts a generated URL.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"8119\" data-fude-source-end=\"8128\">file:\u002F\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8128\" data-fude-source-end=\"8193\"> images do not work. GitHub cannot read files from your computer.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8196\" data-fude-source-end=\"8321\">If an image works locally but not on GitHub, check capitalization. macOS is often case-insensitive; GitHub is case-sensitive.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\u003Cspan data-fude-source-start=\"8326\" data-fude-source-end=\"8340\">Images in Fude\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"8342\" data-fude-source-end=\"8407\">In Fude, standard Markdown images are designed to render cleanly:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"8411\" data-fude-source-end=\"8470\">Local relative images work from the Markdown file location.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8473\" data-fude-source-end=\"8499\">Root-local images such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8499\" data-fude-source-end=\"8517\">\u002Fimages\u002Flogo.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8517\" data-fude-source-end=\"8562\"> are resolved through Fude's safe asset path.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8565\" data-fude-source-end=\"8607\">Remote web images render as normal images.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8610\" data-fude-source-end=\"8665\">Data URL images render when they use a safe image type.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8668\" data-fude-source-end=\"8696\">Unsupported sources such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8696\" data-fude-source-end=\"8705\">file:\u002F\u002F\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8705\" data-fude-source-end=\"8707\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8707\" data-fude-source-end=\"8714\">blob:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8714\" data-fude-source-end=\"8720\">, and \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8720\" data-fude-source-end=\"8733\">javascript:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8733\" data-fude-source-end=\"8766\"> are not rendered as live images.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"8768\" data-fude-source-end=\"8952\">Fude also treats image display as a reading preference. You can hide images, show standard Markdown images, or opt into the sanitized HTML image mode when you need raw HTML image tags.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"8954\" data-fude-source-end=\"9197\">The important part: Fude does not leak arbitrary local paths into the renderer. Local images are loaded through a controlled asset channel, which keeps the reading experience useful without turning Markdown into unrestricted filesystem access.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"9202\" data-fude-source-end=\"9220\">Images in Obsidian\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"9222\" data-fude-source-end=\"9265\">Obsidian supports standard Markdown images:\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=\"9279\" data-fude-code-block-end=\"9310\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9279\" data-fude-code-block-end=\"9310\">\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\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=\"9316\" data-fude-source-end=\"9351\">It also supports wiki-style embeds:\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=\"9365\" data-fude-code-block-end=\"9384\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9365\" data-fude-code-block-end=\"9384\">\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=\"9390\" data-fude-source-end=\"9603\">The wiki syntax is shorter and works well inside an Obsidian vault, but it is not standard Markdown. If you plan to read the same file in GitHub, Fude, VS Code, or a static site generator, use the standard syntax.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"9605\" data-fude-source-end=\"9656\">Obsidian also supports its own image sizing syntax:\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=\"9670\" data-fude-code-block-end=\"9693\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9670\" data-fude-code-block-end=\"9693\">\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=\"9699\" data-fude-source-end=\"9747\">Useful inside Obsidian, not portable outside it.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"9752\" data-fude-source-end=\"9777\">Debugging common problems\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Ch3>\u003Cspan data-fude-source-start=\"9783\" data-fude-source-end=\"9809\">\"My image shows as a link\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"9811\" data-fude-source-end=\"9852\">You probably forgot the exclamation mark:\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=\"9866\" data-fude-code-block-end=\"9922\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9866\" data-fude-code-block-end=\"9922\">\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))\">   ← link\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=\"9932\" data-fude-source-end=\"9961\">\"My local image doesn't load\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"9963\" data-fude-source-end=\"10028\">Check the path from the Markdown file, not from the project root.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"10030\" data-fude-source-end=\"10046\">If your file is \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10046\" data-fude-source-end=\"10061\">docs\u002Fguide.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10061\" data-fude-source-end=\"10080\"> and your image is \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10080\" data-fude-source-end=\"10103\">docs\u002Fimages\u002Fchart.png\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10103\" data-fude-source-end=\"10109\">, use:\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=\"10123\" data-fude-code-block-end=\"10151\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10123\" data-fude-code-block-end=\"10151\">\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%))\">Chart\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=\"10157\" data-fude-source-end=\"10161\">Not:\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=\"10175\" data-fude-code-block-end=\"10208\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10175\" data-fude-code-block-end=\"10208\">\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%))\">Chart\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=\"10214\" data-fude-source-end=\"10286\">That second path only works if the Markdown file is at the project root.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"10292\" data-fude-source-end=\"10330\">\"It works on my Mac but not on GitHub\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10332\" data-fude-source-end=\"10353\">Check capitalization:\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=\"10367\" data-fude-code-block-end=\"10393\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10367\" data-fude-code-block-end=\"10393\">\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=\"10399\" data-fude-source-end=\"10413\">will not find:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-fude-code-block-start=\"10423\" data-fude-code-block-end=\"10438\">\u003Ccode class=\"language-text\" data-fude-code-block-start=\"10423\" data-fude-code-block-end=\"10438\">images\u002FLogo.png\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"10444\" data-fude-source-end=\"10471\">on a case-sensitive system.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"10473\" data-fude-source-end=\"10511\">Also check spaces. Either encode them:\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=\"10525\" data-fude-code-block-end=\"10561\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10525\" data-fude-code-block-end=\"10561\">\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%))\">Diagram\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=\"10567\" data-fude-source-end=\"10602\">Or wrap the path in angle brackets:\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=\"10616\" data-fude-code-block-end=\"10652\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10616\" data-fude-code-block-end=\"10652\">\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%))\">Diagram\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=\"10662\" data-fude-source-end=\"10688\">\"I can't resize the image\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10690\" data-fude-source-end=\"10751\">Pure Markdown cannot resize images. Use one of these 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=\"10761\" data-fude-code-block-end=\"10813\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"10761\" data-fude-code-block-end=\"10813\">\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)\">\"Alt text\"\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=\"10819\" data-fude-source-end=\"10845\">or resize the actual file:\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=\"10859\" data-fude-code-block-end=\"10889\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10859\" data-fude-code-block-end=\"10889\">\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 text\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=\"10895\" data-fude-source-end=\"10930\">The second option is more portable.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"10936\" data-fude-source-end=\"10972\">\"My image path contains parentheses\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10974\" data-fude-source-end=\"11017\">Parentheses can confuse the parser because \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11017\" data-fude-source-end=\"11020\">)\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11020\" data-fude-source-end=\"11050\"> closes the image destination.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11052\" data-fude-source-end=\"11073\">Use percent encoding:\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=\"11087\" data-fude-code-block-end=\"11130\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11087\" data-fude-code-block-end=\"11130\">\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%))\">Chart\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=\"11136\" data-fude-source-end=\"11158\">Or use angle brackets:\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=\"11172\" data-fude-code-block-end=\"11211\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11172\" data-fude-code-block-end=\"11211\">\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%))\">Chart\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=\"11220\" data-fude-source-end=\"11235\">Quick reference\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=\"11249\" data-fude-code-block-end=\"11727\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"11249\" data-fude-code-block-end=\"11727\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Basic 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%))\">Alt text\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 with title\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 text\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%))\">Optional title\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))\"># Remote 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%))\">Alt text\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))\"># Empty alt text for decorative 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-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))\"># Clickable image\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%))\">![Alt text]\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))\"># Caption workaround\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 text\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))\">*Caption text.*\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))\"># Resize with 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)\">\"Alt text\"\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))\"># Path with spaces\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">![Alt text](<.\u002Fimages\u002Fmy image.png>)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Cp>\u003Cspan data-fude-source-start=\"11738\" data-fude-source-end=\"11891\">Markdown image syntax is simple, but images expose everything that makes Markdown practical: paths, portability, accessibility, and renderer differences.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11893\" data-fude-source-end=\"12038\">If you remember one rule, make it this: keep images near the Markdown files that use them, and write alt text as if the image might fail to load.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"12040\" data-fude-source-end=\"12086\">For more Markdown guides, see the articles on \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fhow-to-create-links-in-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"12087\" data-fude-source-end=\"12092\">links\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12135\" data-fude-source-end=\"12137\">, \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"12138\" data-fude-source-end=\"12144\">tables\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12199\" data-fude-source-end=\"12205\">, and \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"12206\" data-fude-source-end=\"12222\">horizontal lines\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12269\" data-fude-source-end=\"12270\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"12272\" data-fude-source-end=\"12346\">If you want a Markdown reader that handles local images cleanly, try Fude.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"12348\" data-fude-source-end=\"12350\">📌 \u003C\u002Fspan>\u003Ca href=\"\u002Fen#download\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"12351\" data-fude-source-end=\"12364\">Download Fude\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>","\nImages in Markdown look almost like links, with one extra character at the beginning. That tiny exclamation mark is easy to miss, but it changes everything: instead of creating a clickable link, Markdown embeds the image directly in the document.\n\nThe basic syntax takes five seconds. The details take longer: local paths, alt text, image size, captions, GitHub behavior, Obsidian embeds, and what happens when the file moves.\n\nThis guide covers the practical version, from the syntax you need every day to the edge cases that usually send people to Stack Overflow.\n\n## The basic syntax\n\nThe standard Markdown image syntax is:\n\n```markdown\n![Alt text](.\u002Fimage.png)\n```\n\nIt has three parts:\n\n- `!` tells Markdown this is an image, not a link.\n- `[Alt text]` describes the image.\n- `(.\u002Fimage.png)` points to the image file.\n\nFor example:\n\n```markdown\n![Fude Markdown reader interface](.\u002Fimages\u002Ffude-reader.png)\n```\n\nIf the image loads correctly, the reader displays the image. If it does not load, most renderers show the alt text instead.\n\nThe most common mistake is forgetting the exclamation mark:\n\n```markdown\n[Logo](.\u002Flogo.png)   ← link to the image file\n![Logo](.\u002Flogo.png)  ← display the image\n```\n\nThe first line creates a link. The second line embeds the image.\n\n## Local images\n\nMost Markdown images use a relative path. The path is resolved from the location of the Markdown file.\n\n```markdown\n![Architecture diagram](.\u002Fassets\u002Farchitecture.png)\n```\n\nIf your document is here:\n\n```text\ndocs\u002Fguide.md\n```\n\nAnd your image is here:\n\n```text\ndocs\u002Fassets\u002Farchitecture.png\n```\n\nThen `.\u002Fassets\u002Farchitecture.png` is correct.\n\nIf the image is one directory up:\n\n```markdown\n![Logo](..\u002Flogo.png)\n```\n\nThe rules are the same as for relative links:\n\n- `.\u002F` means \"same directory.\"\n- `..\u002F` means \"parent directory.\"\n- `folder\u002Fimage.png` works too, but `.\u002Ffolder\u002Fimage.png` makes the intent clearer.\n\nI recommend keeping images close to the Markdown files that use them. A simple structure works well:\n\n```text\ndocs\u002F\n  guide.md\n  images\u002F\n    diagram.png\n    screenshot.png\n```\n\nThen reference them like this:\n\n```markdown\n![System diagram](.\u002Fimages\u002Fdiagram.png)\n![App screenshot](.\u002Fimages\u002Fscreenshot.png)\n```\n\nThis keeps the document portable. If you move the whole `docs` folder, the image paths still work.\n\n## Web images\n\nYou can also use a full URL:\n\n```markdown\n![Fude logo](https:\u002F\u002Ffude.md\u002Fimages\u002Ffude-logo.png)\n```\n\nThis is useful for remote assets, CDN-hosted images, badges, and documentation that must render without local files.\n\nThe tradeoff: the image depends on the remote URL. If the server goes down, the image disappears. If the owner replaces the image, your document changes without you touching it.\n\nFor long-lived documentation, I prefer local images. For badges and dynamic assets, remote images are fine.\n\n## Alt text\n\nAlt text is not decoration. It describes the image for readers who cannot see it, and it gives useful fallback text when the image cannot load.\n\nGood alt text explains the content or purpose of the image:\n\n```markdown\n![Screenshot of Fude showing a Markdown document with a table](.\u002Ffude-table.png)\n```\n\nWeak alt text only repeats that an image exists:\n\n```markdown\n![Image](.\u002Ffude-table.png)\n![Screenshot](.\u002Ffude-table.png)\n```\n\nIf the image is decorative and adds no information, you can leave the alt text empty:\n\n```markdown\n![](.\u002Fdivider.png)\n```\n\nBut do this intentionally. Most images in documentation are not decorative. Diagrams, screenshots, charts, and UI captures usually need meaningful alt text.\n\n## Image titles\n\nLike links, images can have an optional title:\n\n```markdown\n![Fude reader](.\u002Ffude-reader.png \"Fude displaying a local Markdown file\")\n```\n\nThe title appears as a tooltip in some renderers. Support is inconsistent, especially on touch devices, so don't put essential information there.\n\nUse alt text for meaning. Use the title only for a small extra note.\n\n## Image formats\n\nMarkdown itself does not care whether the image is PNG, JPG, SVG, WebP, AVIF, or GIF. The renderer does.\n\nCommon choices:\n\n| Format | Best for | Notes |\n| --- | --- | --- |\n| PNG | Screenshots, UI, diagrams | Sharp, reliable, often larger |\n| JPG | Photos | Small, but lossy |\n| SVG | Logos, vector diagrams | Great when the renderer allows it |\n| WebP | Web images | Small, widely supported |\n| AVIF | Highly compressed web images | Excellent compression, not universal everywhere |\n| GIF | Simple animations | Heavy; use sparingly |\n\nFor Markdown files you read locally or store in a repository, PNG is usually the safest default for screenshots and diagrams.\n\n## Resizing images\n\nStandard Markdown has no syntax for image width or height.\n\nThis does not work in standard Markdown:\n\n```markdown\n![Logo](.\u002Flogo.png =200x100)\n```\n\nSome tools support custom extensions like that, but they are not portable.\n\nThe most common portable workaround is HTML:\n\n```html\n\u003Cimg src=\".\u002Flogo.png\" alt=\"Logo\" width=\"200\" \u002F>\n```\n\nThis works in many Markdown renderers, including GitHub, but not all of them. Some apps disable raw HTML for security or consistency.\n\nIf you need your document to work everywhere, resize the image file itself before referencing it:\n\n```markdown\n![Logo](.\u002Flogo-small.png)\n```\n\nThat is boring, but reliable.\n\n## Captions\n\nStandard Markdown has no native caption syntax for images.\n\nThe simplest workaround is an italic paragraph right below the image:\n\n```markdown\n![Fude reading view](.\u002Ffude-reading-view.png)\n\n*Fude rendering a local Markdown document.*\n```\n\nThis is readable in the raw Markdown file and works almost everywhere.\n\nIf your renderer supports HTML, you can use `\u003Cfigure>` and `\u003Cfigcaption>`:\n\n```html\n\u003Cfigure>\n  \u003Cimg src=\".\u002Ffude-reading-view.png\" alt=\"Fude reading view\" \u002F>\n  \u003Cfigcaption>Fude rendering a local Markdown document.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\nThis is semantically better in HTML, but less portable in Markdown tools that strip raw HTML. For notes and README files, I usually choose the italic paragraph.\n\n## Clickable images\n\nAn image is not clickable by default. To make it clickable, wrap the image syntax inside a link:\n\n```markdown\n[![Fude logo](.\u002Ffude-logo.png)](https:\u002F\u002Ffude.md)\n```\n\nBreaking it down:\n\n- `![Fude logo](.\u002Ffude-logo.png)` displays the image.\n- `[...](https:\u002F\u002Ffude.md)` makes that image link to the URL.\n\nThis pattern is common for 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\nIf you already read the guide on [Markdown links](\u002Fen\u002Fblog\u002Fhow-to-create-links-in-markdown), this is the same syntax with an image inside the link text.\n\n## Images inside tables\n\nImages can appear inside Markdown tables because they are inline content:\n\n```markdown\n| Product | Preview |\n| --- | --- |\n| Fude | ![Fude icon](.\u002Ffude-icon.png) |\n```\n\nThis works in many renderers, including GitHub.\n\nBut use it carefully. Large images inside tables make the table hard to scan, especially on small screens. If the image needs real space, put it outside the table and link to it from the table instead.\n\n## Base64 images\n\nYou can technically embed an image directly in Markdown using a data URL:\n\n```markdown\n![Tiny icon](data:image\u002Fpng;base64,iVBORw0KGgo...)\n```\n\nThis makes the Markdown file self-contained, but it also makes it ugly, huge, and hard to edit.\n\nI avoid base64 images except for tiny generated assets or test fixtures. For normal writing, keep the image as a separate file.\n\n## Images in GitHub\n\nGitHub supports standard Markdown image syntax in README files, issues, pull requests, wikis, and rendered `.md` files.\n\nWhat works well:\n\n- Relative image paths such as `![Diagram](.\u002Fdocs\u002Fdiagram.png)`.\n- Remote image URLs such as `![Badge](https:\u002F\u002Fimg.shields.io\u002F...)`.\n- SVG images, when they are served safely.\n- Clickable images with `[![alt](image)](url)`.\n- HTML `\u003Cimg>` tags for resizing, such as `\u003Cimg src=\".\u002Flogo.png\" width=\"200\" alt=\"Logo\">`.\n\nA few GitHub-specific notes:\n\n- Paths are resolved relative to the Markdown file, not the repository root.\n- Dragging an image into a GitHub issue uploads it and inserts a generated URL.\n- `file:\u002F\u002F` images do not work. GitHub cannot read files from your computer.\n- If an image works locally but not on GitHub, check capitalization. macOS is often case-insensitive; GitHub is case-sensitive.\n\n## Images in Fude\n\nIn Fude, standard Markdown images are designed to render cleanly:\n\n- Local relative images work from the Markdown file location.\n- Root-local images such as `\u002Fimages\u002Flogo.png` are resolved through Fude's safe asset path.\n- Remote web images render as normal images.\n- Data URL images render when they use a safe image type.\n- Unsupported sources such as `file:\u002F\u002F`, `blob:`, and `javascript:` are not rendered as live images.\n\nFude also treats image display as a reading preference. You can hide images, show standard Markdown images, or opt into the sanitized HTML image mode when you need raw HTML image tags.\n\nThe important part: Fude does not leak arbitrary local paths into the renderer. Local images are loaded through a controlled asset channel, which keeps the reading experience useful without turning Markdown into unrestricted filesystem access.\n\n## Images in Obsidian\n\nObsidian supports standard Markdown images:\n\n```markdown\n![Screenshot](.\u002Fscreenshot.png)\n```\n\nIt also supports wiki-style embeds:\n\n```markdown\n![[screenshot.png]]\n```\n\nThe wiki syntax is shorter and works well inside an Obsidian vault, but it is not standard Markdown. If you plan to read the same file in GitHub, Fude, VS Code, or a static site generator, use the standard syntax.\n\nObsidian also supports its own image sizing syntax:\n\n```markdown\n![[screenshot.png|400]]\n```\n\nUseful inside Obsidian, not portable outside it.\n\n## Debugging common problems\n\n### \"My image shows as a link\"\n\nYou probably forgot the exclamation mark:\n\n```markdown\n[Alt](.\u002Fimage.png)   ← link\n![Alt](.\u002Fimage.png)  ← image\n```\n\n### \"My local image doesn't load\"\n\nCheck the path from the Markdown file, not from the project root.\n\nIf your file is `docs\u002Fguide.md` and your image is `docs\u002Fimages\u002Fchart.png`, use:\n\n```markdown\n![Chart](.\u002Fimages\u002Fchart.png)\n```\n\nNot:\n\n```markdown\n![Chart](.\u002Fdocs\u002Fimages\u002Fchart.png)\n```\n\nThat second path only works if the Markdown file is at the project root.\n\n### \"It works on my Mac but not on GitHub\"\n\nCheck capitalization:\n\n```markdown\n![Logo](.\u002Fimages\u002Flogo.png)\n```\n\nwill not find:\n\n```text\nimages\u002FLogo.png\n```\n\non a case-sensitive system.\n\nAlso check spaces. Either encode them:\n\n```markdown\n![Diagram](.\u002Fimages\u002Fuser%20flow.png)\n```\n\nOr wrap the path in angle brackets:\n\n```markdown\n![Diagram](\u003C.\u002Fimages\u002Fuser flow.png>)\n```\n\n### \"I can't resize the image\"\n\nPure Markdown cannot resize images. Use one of these options:\n\n```html\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Alt text\" width=\"400\" \u002F>\n```\n\nor resize the actual file:\n\n```markdown\n![Alt text](.\u002Fimage-400px.png)\n```\n\nThe second option is more portable.\n\n### \"My image path contains parentheses\"\n\nParentheses can confuse the parser because `)` closes the image destination.\n\nUse percent encoding:\n\n```markdown\n![Chart](.\u002Fimages\u002Freport%20%28final%29.png)\n```\n\nOr use angle brackets:\n\n```markdown\n![Chart](\u003C.\u002Fimages\u002Freport (final).png>)\n```\n\n## Quick reference\n\n```markdown\n# Basic image\n![Alt text](.\u002Fimage.png)\n\n# Image with title\n![Alt text](.\u002Fimage.png \"Optional title\")\n\n# Remote image\n![Alt text](https:\u002F\u002Fexample.com\u002Fimage.png)\n\n# Empty alt text for decorative image\n![](.\u002Fdivider.png)\n\n# Clickable image\n[![Alt text](.\u002Fimage.png)](https:\u002F\u002Fexample.com)\n\n# Caption workaround\n![Alt text](.\u002Fimage.png)\n\n*Caption text.*\n\n# Resize with HTML\n\u003Cimg src=\".\u002Fimage.png\" alt=\"Alt text\" width=\"400\" \u002F>\n\n# Path with spaces\n![Alt text](\u003C.\u002Fimages\u002Fmy image.png>)\n```\n\n---\n\nMarkdown image syntax is simple, but images expose everything that makes Markdown practical: paths, portability, accessibility, and renderer differences.\n\nIf you remember one rule, make it this: keep images near the Markdown files that use them, and write alt text as if the image might fail to load.\n\nFor more Markdown guides, see the articles on [links](\u002Fen\u002Fblog\u002Fhow-to-create-links-in-markdown), [tables](\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples), and [horizontal lines](\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown).\n\nIf you want a Markdown reader that handles local images cleanly, try Fude.\n\n📌 [Download Fude](\u002Fen#download)\n",[1324,1327],{"locale":1325,"slug":1326},"en","how-to-add-images-in-markdown",{"locale":1328,"slug":1329},"fr","comment-ajouter-images-markdown",{"title":1331,"path":675,"stem":1332,"description":1333,"children":-1},"How to Create Links in Markdown","en\u002Fblog\u002F5.how-to-create-links-in-markdown","Learn every type of Markdown link: inline, reference, anchor, relative, email, and image links. Covers GitHub, Obsidian, and common pitfalls with examples.",1779087581092]