Responsive Image Breakpoint Generator Specification

Overview

A high-performance, single-file browser utility that helps developers calculate optimal image widths for the HTML srcset attribute. This tool minimizes manual calculations and helps developers create responsive image strategies for better web performance.

Core Features

• Breakpoint Calculation Engine: Input the max width of your original image, and the tool instantly generates a list of recommended breakpoints based on industry standard steps (e.g., 320px, 480px, 800px, 1200px, 1920px).
• Srcset Snippet Generator: Automatically outputs the full HTML srcset and sizes attributes for copy-pasting.
• Customizable Step Strategy: Allow users to define their own step sizes or number of breakpoints.
• Preview Mode: Visualize how the different image sizes cover common device screen widths (mobile, tablet, desktop).
• One-Click Copy: Integrate a clean 'Copy to Clipboard' function for the generated code snippet.

UI Layout

• Header: Simple, descriptive title with a clear, concise tagline.
• Main Tool Area: A two-column layout (on desktop) or stacked layout (on mobile).
  • Left Column: Control panel with inputs for Max Image Width, Breakpoint Step, and Add Custom Breakpoint.
  • Right Column: Live output container showing the generated code snippets in a pre-formatted, styled code block.
• Visual Feedback: Real-time updates as the user changes inputs (no submit button needed).

Color Palette

• Background: #FFFFFF (Pure White)
• Primary Action (Buttons): #2563EB (Vibrant Blue)
• Surface/Card: #F9FAFB (Off-white/Light Gray)
• Borders/Dividers: #E5E7EB (Light Gray)
• Text: #1F2937 (Dark Charcoal)
• Accent/Highlights: #10B981 (Success Green for copy actions)

Technical Directives

• Frameworks: Vanilla JavaScript, HTML5, CSS3 only. No build steps.
• State Management: Use plain JavaScript objects to store current settings. No localStorage or sessionStorage permitted.
• Responsive Design: Mobile-first approach. Ensure inputs are touch-friendly (min-height 44px).
• Aesthetics: High-quality UI. Use subtle box-shadows (box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)) for cards to create depth. Use system-ui fonts for a clean, fast-loading aesthetic.
• Animations: Subtle fade-in transitions when results update. Use transition: all 0.2s ease-in-out for interactive elements.
• Sandbox Compatibility: The app must function perfectly in a null-origin iframe. Avoid all external API calls or cookie-dependent libraries.