How do I generate multiple image breakpoints from one source file?

You can generate multiple image breakpoints from one source file by creating several resized versions of the same image, then serving the best one based on screen size/device density.

Common ways to do it

1. Use image processing tools

Use tools like:

• Sharp (Node.js)
• ImageMagick
• Squoosh CLI
• Cloudinary / Imgix / other image CDNs

Example with Sharp:

const sharp = require('sharp');

const sizes = [320, 640, 960, 1280];

sizes.forEach(async (width) => {
  await sharp('source.jpg')
    .resize(width)
    .toFile(`output-${width}.jpg`);
});

This creates multiple files:

• output-320.jpg
• output-640.jpg
• output-960.jpg
• output-1280.jpg

---

2. Use responsive HTML with srcset

Once you’ve generated the images, use srcset so the browser picks the best one:

<img
  src="output-640.jpg"
  srcset="
    output-320.jpg 320w,
    output-640.jpg 640w,
    output-960.jpg 960w,
    output-1280.jpg 1280w
  "
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Example"
/>

This tells the browser:

• which image widths exist
• how wide the image will be on the page

---

3. Use a build pipeline

If you’re using a framework or static site generator, image breakpoints are often created during the build step.

Examples:

• Next.js image optimization
• Astro image integration
• Eleventy plugins
• Gatsby image pipeline

---

Best practice

Generate breakpoints based on your layout, not arbitrary sizes. For example, if an image is shown at:

• 100% width on mobile
• 600px wide on desktop

then breakpoints around:

• 320
• 640
• 960
• 1280

are usually enough.

Also consider

• Use modern formats like AVIF or WebP
• Preserve aspect ratio
• Compress images appropriately
• Don’t generate too many unnecessary sizes

If you want, I can show you:

1. a Node.js script to auto-generate breakpoints,
2. a Python script, or
3. how to do it in HTML/CSS with srcset and sizes.