Breakpoint Generator

Speed up your site. Calculate the mathematically optimal widths for your responsive images to ensure every user downloads the smallest file possible for their screen.

Increases width by this % per step.
Calculated Widths
Suggested srcset attribute
srcset="image-320.jpg 320w, ..."

The Importance of Breakpoints

I genuinely believe that images are the biggest performance killer on the web today. If you serve a 4000px image to a mobile user with a 375px screen, you are wasting their data and slowing down your page load time. Responsive images solve this by letting the browser choose the best size from a list you provide.

The "Step" Strategy: You shouldn't just create a size for every device. Instead, use a percentage step (like 20%). This ensures that the file size increases linearly, providing a consistent experience while keeping your build process efficient.

Performance Tips:

  • Next-Gen Formats: Use WebP or AVIF instead of JPEG/PNG where possible. They provide much better compression at the same quality.
  • Sizes Attribute: Always use the `sizes` attribute alongside `srcset` to tell the browser how much space the image will take up on the page.
  • Lazy Loading: Use `loading="lazy"` for all images below the fold to prioritize the content the user sees first.