A utility to generate optimal image sizes for the CSS sizes attribute. This tool helps you create responsive images by determining the appropriate image sizes for different viewport widths.
You can use this tool directly with npx:
# Always use the latest version
npx @royalfig/size-writer@latest
# Or force npx to download the latest version
npx --no-install @royalfig/size-writerOr install it globally:
npm install -g @royalfig/size-writerOr install it as a project dependency:
npm install --save-dev @royalfig/size-writerRun the tool with:
npx @royalfig/size-writerThe tool will prompt you for:
- The URL of the webpage containing the image
- The CSS selector for the image
- The available image sizes (comma-separated)
After providing this information, the tool will:
- Visit the webpage
- Measure the image size at different viewport widths
- Generate the optimal
sizesattribute for your image - Automatically copy the result to your clipboard
Enter the URL of the webpage: https://example.com
Enter the CSS selector of the image: .hero-image
Enter available image sizes: 300, 400, 500, 600, 700, 800, 900, 1000
Output:
sizes="(max-width: 600px) 500px, (max-width: 900px) 700px, (max-width: 1200px) 900px, 1000px"
✅ Copied to clipboard! You can now paste it into your img tag's sizes property.
Size Writer uses Puppeteer to:
- Load the webpage at different viewport widths
- Measure the actual rendered size of the image
- Find the closest available image size for each viewport width
- Generate a
sizesattribute that optimizes image loading
git clone https://github.com/royalfig/size-writer.git
cd size-writer
npm installRun the tests with:
npm testOr run tests in watch mode:
npm run test:watch- Node.js 14 or higher
- A modern web browser (automatically installed with Puppeteer)
MIT
Contributions are welcome! Please feel free to submit a Pull Request.