Skip to main content

Carica immagine

Trascina un'immagine qui

Markdown

![immagine](URL_IMMAGINE)

HTML <img>

<img src="URL_IMMAGINE" alt="immagine">

Base64 Inline Markdown

Carica un'immagine per generare il tag base64 inline.

Come utilizzare Image to Markdown

Upload or drag an image

Use the drag-and-drop area to upload a PNG, JPG, WebP or GIF file. You can also click "Select File" to choose an image from your file system. The file is fully processed in the browser without sending it to external servers.

Configure alt text, URL and display options

Insert alternative text (crucial for accessibility and SEO), public image URL, and optionally width, height, and alignment. Alt text is auto-filled with the file name to speed up work.

Copy Markdown, HTML or Base64

The tool generates three real-time outputs: standard Markdown syntax with alt text and HTML image tags with complete attributes and inline base64 Markdown (useful for self-contained files without external dependencies). Click the "Copy" button next to the desired format.

Suggerimenti

  • For public images on GitHub, use the "raw" link of the file (raw.githubusercontent.com/...) instead of the repository page link: only the raw link can be directly incorporated into Markdown without redirects. For images in README, a relative path to the repository (e.g. ./assets/screenshot.png) is often the best choice.
  • When importing images into tools like Notion or Confluence, prefer using the HTML tag with explicit width (e.g. width="800") to avoid large images occupying all available space. Many platforms ignore the CSS attribute but respect width/height HTML.
  • For technical documentation with frequent images, consider organizing files in a /assets or /images folder within the repository and using relative paths instead of absolute URLs: Markdown will still work even if the repository is forked or moved.

Domande frequenti

When to use inline base64 encoding instead of a URL?

Base64 inline embeds the image directly into Markdown text, eliminating external URL dependency. It's useful for standalone README files on GitHub (where the image may not be accessible), HTML emails and exported Markdown documents as PDFs. The disadvantage is that base64 strings are very long and can increase file size: use it only for small images (icons, logos) or when portability and criticality matter.

How to write good alt text for images?

Alt text should describe the content and purpose of the image, not its aesthetic appearance. For a graph: "Bar chart: Q1 vs Q2 2024 sales comparison" instead of "graph image". For a logo: "Company X Logo". For decorative images without informative content, use alt=""; (empty). Good alt text improves accessibility (screen reader), SEO, and visual fallback when the image fails to load.

Is the HTML generated and different from that of Markdown?

Si&apos;. La sintassi Markdown ![alt](url) e&apos; supportata da GitHub, GitLab, Obsidian, Notion e la maggior parte dei processori Markdown, ma non consente di specificare dimensioni o allineamento. Il tag HTML &lt;img src=&quot;...&quot; alt=&quot;...&quot; width=&quot;...&quot; style=&quot;...&quot;&gt; offre controllo completo e funziona sia in Markdown (la maggior parte dei renderer accetta HTML inline) che in siti web. Usa Markdown per semplicita&apos;, HTML quando hai bisogno di dimensioni precise o allineamento.

Are files uploaded sent to some servers?

No. The processing occurs entirely in the browser using JavaScript's FileReader API. No images are sent to any server. Even base64 encoding is done locally. You can verify this by disabling network connection: the tool works equally in offline mode.

Why doesn't setting width and height prevent image preview from resizing?

Preview always shows the uploaded file at its original dimensions to display the real image. Width and height values are applied only to the HTML tag's width/height attributes, effective when that tag is used elsewhere (site, README, document).