How to Handle Markdown Images Without Tedious Formatting

How to Handle Markdown Images Without Tedious Formatting - Photo by Jonas Schöne on Unsplash

Alright, so today I want to show you a tiny but super handy trick with AI—specifically, how I use Copilot to make my life easier when working with Markdown files. This isn’t some grand, world-changing feature, but it’s one of those little things that saves you time and just makes you feel a bit lazier (in a good way).

Let’s say you’re putting together a README or some documentation. You already know the Markdown syntax, right? But you want to spice things up a bit—maybe make your intro more engaging, maybe even a little clickbaity. And of course, you want a nice image or screenshot to go along with it.

Here’s what I do.

The Screenshot Workflow

First, I take a screenshot of my application. In this case, it’s my video editing app with auto video effects. I drop that screenshot into my assets/media folder. Simple enough.

Now, in my Markdown file, I want to reference that image. So I add something like:

1![demo video editing app](assets/media/demo-video-editing-app.png)

But here’s the thing: sometimes the file name isn’t ideal. Maybe it’s just a jumble of letters or whatever the default screenshot name is. This is where AI comes in.

Letting Copilot Do the Boring Stuff

How to Handle Markdown Images Without Tedious Formatting - Photo by Enis Yavuz on Unsplash

Instead of sitting there thinking up the perfect file name, I just ask Copilot (or whatever AI you’re using) to suggest a better one. Something descriptive, something that actually makes sense. You can literally prompt it: “Rename this file to something more meaningful.”

Same goes for the alt text and the title attribute for the image. I just tell Copilot, “Give me a good alt text for this image,” or “What should the title attribute be?” And it spits out something like:

1![Demo video editing app](assets/media/demo-video-editing-app.png "Video editing application interface auto effect tools")

That’s it. I don’t have to overthink it. The AI does the heavy lifting, and I just review the suggestions.

Centering Images in Markdown (Or Not)

Now, if you want to center the image, you might think, “Can I just ask Copilot to do that?” Well, in Markdown, you can’t really center images with pure syntax—there’s no style attribute. If you need it centered, you’ll have to use HTML inside your Markdown:

1<p align="center">
2  <img src="assets/media/demo-video-editing-app.png" alt="Demo video editing app" title="Video editing application interface auto effect tools">
3</p>

But honestly, I’m fine with the default. If you want it centered, just ask Copilot to give you the HTML version. Easy.

Commit and Done

Once I’m happy with how everything looks, I check the README preview to make sure the image path works. If it does, I just commit the change. In Visual Studio Code, I stage the README, generate a commit message (again, Copilot can help here), and commit. That’s it.

How to Handle Markdown Images Without Tedious Formatting - Photo by Arnaud Padallé on Unsplash

Why Bother?

You might be thinking, “Isn’t this just basic stuff?” Sure, but the point is to let AI handle the repetitive, boring parts so you can focus on the interesting stuff. It’s about being efficient, not lazy. Or maybe a little bit of both.

“The best programmers aren’t the ones who know the most, but the ones who know how to automate the boring stuff.”
— Me, probably

Key Takeaways

• Use AI like Copilot to automate file naming, alt text, and title attributes for images in Markdown.
• Don’t waste time on repetitive tasks—let the AI handle it and just review the output.
• Markdown can’t center images natively, but you can use HTML if you need to.
• Commit your changes once you’re happy, and move on to more interesting problems.