Markdown Image Extractor

An inventory of every image in your Markdown

Images in Markdown are easy to add and easy to lose track of. Over time a documentation site or blog collects screenshots hosted in three different places, diagrams with empty alt text, and links to files that were renamed long ago. The Markdown Image Extractor gives you an inventory. Paste a document, press Extract, and every inline image comes back with its URL, its alt text and its optional title, shown in a table with small thumbnails and available as JSON.

Image syntax it understands

The extractor reads standard inline Markdown images:

• ![Dashboard overview](https://example.com/img/dashboard.png)
• ![Logo](/assets/logo.svg "Company logo"), where the text in double quotes is the title

Each image becomes an object with three keys:

{"alt": "Logo", "url": "/assets/logo.svg", "title": "Company logo"}

When there is no title, title is null. An image with empty brackets, ![](photo.jpg), is still extracted, with alt set to an empty string. That makes missing alt text easy to spot. Angle brackets around a URL, as in ![x](<pic.png>), are stripped from the result.

Images inside fenced code blocks are skipped, so Markdown examples in a tutorial do not end up in your inventory.

A sample run

Imagine a release note with three images: a hero screenshot hosted on your CDN with descriptive alt text, a diagram stored next to the file as ./diagram.png with empty brackets, and a chart embedded from a third-party service with a quoted title. The extractor returns three rows in that order. The first shows a thumbnail and its alt text. The second shows an empty Alt cell, which flags it for an accessibility fix, and a blank thumbnail because the relative path cannot be resolved here. The third shows the chart's title in the Title column and its external domain in the URL, a reminder that this image depends on someone else's server. Three rows, three different follow-up actions, all visible in one table.

Reading the results table

The Extracted Images table has four columns:

Thumbnails are loaded straight from the image's own host by your browser. A relative path such as ./img/chart.png is resolved against this website rather than your site, so its thumbnail usually stays blank. That is expected and does not mean the path is wrong in your project. For safety, a URL that is not a web address, an image data URI or a relative path gets no thumbnail, and only web addresses and relative paths are opened by the link in the URL column.

How to use the image extractor

1. Paste your Markdown into Input Markdown, or press Paste in the header.
2. Glance at the "possible images" count in the footer for a quick estimate.
3. Press Extract. The button switches to "Working" until the results return.
4. Scan the table. Rows with an empty Alt column are images that need descriptions.
5. Use the copy icon to copy the JSON array or the download icon to save markdown-images.json.
6. Use the trash icon to clear everything and start again.

Where extraction happens

When you press Extract, the Markdown is sent to this site's server, where a pattern match collects the images, and the list is returned to your browser. Each request accepts up to 200,000 characters. The thumbnails are a separate step: your browser requests each image directly from wherever it is hosted.

Practical audits you can run

Alt text check for accessibility

Screen-reader users rely on alt text, and search engines use it to understand images. Download the JSON, filter for empty alt values, and you have a to-do list. While you are at it, look for alt text that just repeats the file name or says "image".

Media migration

Moving a blog to a new host or CDN means moving its images. The URL list tells you exactly which files to copy and which links to rewrite afterwards. Sort it to see how many images live on each domain.

Finding hotlinked images

Images loaded from other people's servers can disappear without notice. Scan the URL column for domains you do not control and download those images to your own storage.

Cleaning up unused assets

Extract images from every page, combine the lists, and compare them with the files in your assets folder. Anything in the folder but not in the list is a candidate for deletion.

Checking a single long article

Before publishing a tutorial with dozens of screenshots, a quick pass with thumbnails confirms every image is the right one and in the right order.

Tips for reliable extraction

• Avoid spaces in image paths. A URL containing a space, even inside angle brackets, is not matched. Rename the file or encode the space as %20.
• Write titles in double quotes. Single-quoted or parenthesised titles are not recognised.
• Keep each image on one line. The pattern does not span line breaks.
• Remember that the extractor does not check whether an image URL works. A missing thumbnail for an absolute web address is a hint, not proof, so open the link to confirm.

What is not picked up

• Reference-style images such as ![chart][fig1] with the URL defined elsewhere.
• HTML images written as <img src="...">.
• Images inside fenced code blocks, which are skipped on purpose.
• Background images or images loaded by scripts or shortcodes that a site generator expands later.

Note that inline code is not skipped. If a sentence shows `![x](y.png)` as an example inside single backticks, that example is extracted as an image.

Limitations

• Inline image syntax only; reference-style and HTML images are ignored.
• URLs containing spaces are not matched.
• No broken-image checking, file size or dimension information.
• Input is limited to 200,000 characters per request and requires a connection to the server.
• Results are exported as JSON only.

Related tools

To keep only the alt text and drop the image markup from a document, use Markdown Remove Images Keep Alt. To audit regular links in the same file, run the Markdown Link Extractor.

Frequently Asked Questions