Assumptions
- Only <img> tags are produced. Text, tables and video in the original are not carried over; only the image part is rebuilt.
- Styles are written on the image itself. Where an editor strips the style attribute as well, this approach will not survive either.
- Building from files reads only the file names and dimensions. The images must already be hosted somewhere.
- The maximum width is a choice, not a recommendation. Follow the guidance of the platform you publish to.
- The preview loads images from the addresses you entered. Nothing else about your input is transmitted.
How it is calculated
- display:block — removes both the left-hugging and the whitespace gap that come from being an inline element, and is what makes auto margins work.
- width:100% with max-width — shrinks to fit a narrow screen, never grows past the width you set.
- height:auto — the height follows the width, so nothing is squashed.
- margin-left / margin-right: auto — splits the leftover space evenly, which is what centres it.
- No wrapper div. Each image holds its own alignment, so it survives an editor that deletes surrounding tags.
Common mistakes
- Check the preview before pasting. The phone width is the one that catches most problems.
- Some editors strip style attributes too. Save and view the real published page once to confirm.
- Do not set a width larger than the original. The image is stretched and looks soft. The file mode warns you when this would happen.
- Many images make a heavy page. Keep lazy loading on and compress before uploading.
FAQ
Why do my images sit against the left edge?
Because <img> is an inline element, so it is laid out like a word in a sentence. Unless something around it centres the text, it hugs the left. This tool puts display:block and auto left and right margins on the image itself. Wrapping everything in a div with text-align:center also works, but many editors strip wrapper tags and style blocks, so putting the rule on the image is more likely to survive.
The images overflow the screen on a phone
Without a width they render at their natural pixel size, so an 860px image runs off a 375px screen. Combining width:100% with max-width makes the image shrink on narrow screens while never growing past its intended size on wide ones. height:auto is what keeps the proportions.
The gaps between images are uneven
The line breaks and spaces between your <img> tags are treated as whitespace between words, which leaves a small gap under each image. Adding <br> stacks another line break on top of that. Switching the images to display:block removes the gap entirely, and if you do want spacing you can set it in pixels and get exactly that.
Can I turn local files straight into HTML?
Not into self-contained HTML, no. Embedding image data directly in the file with a data: address is possible, but many content editors reject it and the file size becomes unmanageable. So this tool covers the last step instead: upload the images to your host, paste the folder address, and it joins that with each file name. From the files themselves it reads only the name and dimensions, and nothing is uploaded.
The order of my images is wrong
Sorting file names as plain text puts 10 before 2. This tool compares the numeric parts as numbers, so 001, 002 … 010, 011 come out in the order you expect. If you want to control the order yourself, use the paste mode: it keeps whatever order you give it.
What maximum width should I use?
It depends entirely on where the page will be published, so it is offered as a choice rather than a recommendation. Check the guidance for your platform. If you are unsure, match the natural width of your images: setting a width larger than the original only stretches them and makes them look soft.
Is my HTML sent anywhere?
No. Rebuilding the tags happens entirely in your browser. The preview does fetch the images from wherever you have hosted them, because that is what previewing them means, but nothing else leaves the page.