Responsive image markup builder
Generate picture and srcset markup from an image naming pattern.
Bookmark this page
Keep this page handy for next time.
- On a computer
- Press Ctrl + D, or Command + D on a Mac.
- On a phone or tablet
- Open your browser's menu or Share menu and look for Add Bookmark, Bookmark or Add to favourites.
A bookmark saves the page link. Save any tool results separately.
Processed on your device
How to use this tool
- Generate picture and srcset markup from an image naming pattern.
- Adjust the labelled settings, then run the tool. Copy the result or download it as a file.
Things to know
- Processing is local. Supplied code and network requests are never executed. Input and text settings are limited to 5 MiB combined; text settings alone are limited to 1 MiB.
- This produces markup. Use the image resizer to create the actual files.
- Image pattern: 8 KiB; alternative text: 16 KiB; sizes/width settings: 4 KiB each. At most 100 distinct widths from 1 to 16,384 pixels. This emits markup without loading images.
You might also need
More in web developmentContent Security Policy builder
Build a policy from explicit directives and check common unsafe settings.
Cron builder and explainer
Preview the next occurrences of a five-field cron expression.
Gitignore builder
Combine locally bundled ignore rules for a project.
Meta-tag builder and preview
Generate escaped page and social metadata from your title and description.
Robots.txt builder and tester
Test whether a supplied robots.txt permits a crawler to visit a URL.
Sitemap builder and validator
Create a sitemap from URL lines or inspect a pasted XML sitemap.
URL parser and builder
Inspect a URL and edit its path, query parameters or fragment.
HTML formatter
Format HTML source while preserving whitespace-sensitive content.
HTML link extractor
Extract links and their labels from pasted HTML.