RunLocalTools

Image → HTML Link Generator — Free Online Tool

Turn any image into ready-to-paste HTML, Markdown, or BBCode — with alt text, responsive srcset, WebP fallback, and optional linking. Runs entirely in your browser, nothing is uploaded.

What it does

Drop in one or more images and get back a ready-to-paste snippet — an HTML <img> tag, a Markdown image link, or BBCode — complete with alt text, dimensions, and (optionally) a clickable link wrapped around the image. Everything runs locally in your browser: images are embedded directly into the code as self-contained data URIs, or referenced by filename if you’re hosting them yourself, but the pixels never leave your device.

How it works

Each image is read directly from your file system and decoded in the browser to find its real width and height, so the tag you get always has accurate dimensions — no more guessing or leaving them off entirely. When responsive images are turned on, the tool resizes a copy of the source image on an in-browser canvas for each breakpoint you specify (480px, 800px, and so on) and builds a proper srcset/sizes pair, so a phone doesn’t download the same file as a 4K monitor. The WebP fallback option does the same resizing pass a second time in WebP format and wraps everything in a <picture> element with the original format as a fallback for older browsers.

Alt text is auto-suggested from the filename (turning product_photo-final.jpg into “Product photo final”) but you can and should rewrite it to actually describe the image — the tool flags missing or filename-only alt text so it’s hard to miss.

How to use it

  1. Drag and drop one or more images onto the tool, or click to choose files.
  2. For each image, edit the alt text, and optionally set a link (either linking to the full image itself, or to a custom URL), a CSS class, or an element ID.
  3. In the sidebar, pick your output format — plain HTML, Markdown, or BBCode — and toggle on responsive srcset, a WebP <picture> fallback, lazy loading, or <figure>/<figcaption> wrapping as needed.
  4. Copy the snippet for a single image, or use “Copy all snippets” to grab every image’s code at once.
  5. If you’re hosting the images yourself rather than embedding them, switch “Image source” to filename mode — the tool will reference sibling filenames like photo-480w.jpg instead of embedding the pixels, so you can upload the resized files it names in the code.

Images you add are remembered in this browser between visits, so you can close the tab and pick back up later — there’s a “Clear saved images” button whenever you want a clean slate.

Frequently asked questions

Does this upload my images anywhere? No. Every image is read, resized, and encoded entirely inside your browser using the Canvas API. Nothing is sent to a server at any point — in embedded (data URI) mode the pixels themselves become part of the code you copy, and in filename mode nothing but the filename ever leaves your device.

What’s the difference between this and a plain base64 image encoder? A base64 image encoder gives you the raw encoded string for one file. This tool builds the complete, ready-to-use tag around that — alt text, dimensions, responsive variants, WebP fallback, linking, and multiple output formats — for a whole batch of images at once.

Why is my HTML file so much bigger than the original image? Base64 encoding inflates file size by roughly a third, and if you also add responsive breakpoints, each size variant is embedded again at its own resolution. For a page with several large photos, filename mode (where you host the actual image files and the HTML just references them) usually makes more sense than fully embedding everything.

Will the responsive srcset ever upscale my image? No. Breakpoints larger than your source image’s actual width are automatically dropped rather than stretching a small image up to look bigger than it is.

Why do Markdown and BBCode ignore some of my settings? Markdown’s ![alt](src) syntax and standard BBCode’s [img] tag have no attribute model at all — there’s no way to express width, height, loading behavior, CSS classes, srcset, or <picture> fallbacks in either format. Alt text and the link-wrapping option are the only settings that carry over.

Can I fix an image’s alt text after I’ve already copied the snippet? Yes — just edit the alt text field and copy the snippet again; nothing is locked in until you copy it out. The tool also flags images with no alt text, or alt text that’s just the filename, so those are easy to spot before you ship the page.

Before you paste it in

If your images came out of a bulk export or a messy folder, running them through a batch renamer first makes the sequential filename mode easier to read, and shrinking oversized photos with the image compressor before embedding keeps a data-URI page from ballooning in size.