All tools › Blocks of markup
Responsive image
An image element with a source for every width and format, and the attribute pair it is usually shipped without.
It runs entirely in this browser tab: nothing you type is uploaded, and the tool makes no network request at all — it does not fetch the address you gave it. Open your browser's network panel and try it.
Settings
- Widths of your own
- Widths to place on the ladder beside the common ones, separated by commas.
- Widths on screen
- How wide the image is drawn, not how wide the file is.
- Formats
- The browser takes the first it can read. Choices: AVIF, WebP, Original.
- Description of the image
- A loaf of sourdough
- Load when needed
- Never on the first image; it is the one being waited for.
How to use it
- Paste your text into the box above, or open a file.
- Adjust the settings beside it until the result is what you wanted.
- Copy the result, or save it as a file. The result updates as you type.
Questions
- Does it fetch the address I give it?
- No, and that is the difference between these tools and most with the same names. Nothing is downloaded, nothing is checked over the network, and no request leaves this page. What is described is the text you handed over. Every tool that could be mistaken for a fetching one says so on its own result.
- Is a length count here a rule?
- No. The widths shown are what each search engine and each social network happens to display, and they are cut by pixels rather than by characters — a line of capitals is cut sooner than a line of lower case. There is no maximum title or description length in any specification, and nothing here pretends otherwise.
- Will this configuration work on my server?
- It is written to the syntax the server you chose reads, and every rule carries a comment saying what it does. Check the whole file before reloading: a rule that needs a module you have not enabled stops the server starting, and the certificate paths in an Nginx block are the usual ones rather than yours.
- Why does a policy tool warn about my own settings?
- Because a rule that blocks the site is worth more than a rule that works. A content security policy that allows inline scripts undoes most of what it is for; a star with credentials is a pair every browser refuses outright; a permanent redirect is remembered by the browser and is hard to take back. Each of those is said where you can still change it.
Other tools for blocks of markup
Web app manifest
The file that makes a page installable, with the two icon sizes it actually needs.
Embed code
A frame with a ratio, a title and only the permissions the embedded page needs.
HTML table
A table from a grid of text, with the header cells marked so a reader can follow them.
HTML form
A form from a list of fields, each with its label, its keyboard and its rules.
Links in a page
Every link in markup or Markdown, with the ones that say "click here" and the ones that go nowhere.
Breakpoint checker
Your breakpoints checked over the whole width range: the widths two rules both cover, the widths none covers, and where real devices land.
All thirty-three tools