Responsive Image Breakpoints Generator - Online srcset Wizard

A responsive image breakpoints generator helps web developers create the correct srcset and sizes attributes for HTML images. Instead of manually calculating which image widths to serve at different viewport sizes, this tool automates the process — ensuring your images look crisp on all devices while minimizing unnecessary bandwidth usage. It's an essential part of modern responsive web design and Core Web Vitals optimization.

The srcset attribute provides the browser with a list of image candidates at different widths (using the w descriptor) or pixel densities (using the x descriptor). The browser then intelligently selects the most appropriate image based on the user's viewport size, device pixel ratio (DPR), and network conditions. For example: srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w" tells the browser about three available image widths.

The sizes attribute tells the browser how wide the image will be displayed at different viewport breakpoints. This is crucial because the browser needs to know the display size to choose the correct image from srcset. For example, sizes="(min-width: 768px) 50vw, 100vw" means: on viewports 768px and wider, the image displays at 50% of the viewport width; otherwise, it displays at 100% of the viewport width. Without sizes, the browser assumes 100vw.

The w descriptor (width descriptor) specifies the actual pixel width of each image candidate. It works together with the sizes attribute and is the recommended approach for responsive images. Example: srcset="img-400w.jpg 400w".

The x descriptor (density descriptor) specifies the device pixel ratio the image is intended for. Example: srcset="img-1x.jpg 1x, img-2x.jpg 2x". This is simpler but less flexible — it doesn't account for the image's display size relative to the viewport. The w descriptor with sizes is the modern best practice.

Breakpoints should be chosen based on:
• Your layout breakpoints — match the viewport widths where your design changes
• Common device widths — 320px (small phones), 480px (large phones), 768px (tablets), 1024px (small laptops), 1280px (desktops), 1440px (large desktops), 1920px (full HD)
• Your image's maximum width — don't create breakpoints larger than your original image
• Performance budget — each additional breakpoint means another image file to generate and store
Typically, 4-7 breakpoints cover most use cases well. Our tool's presets provide excellent starting points.

Device Pixel Ratio (DPR) is the ratio between physical screen pixels and logical CSS pixels. Most modern phones have DPR of 2x or 3x, meaning a 375px-wide phone screen actually has 750-1125 physical pixels. To serve crisp images on high-DPR screens, you need image widths that are 2x-3x the CSS display size. When using the w descriptor with proper sizes, the browser automatically accounts for DPR when selecting from srcset.

Yes, significantly! Responsive images improve Largest Contentful Paint (LCP) by delivering appropriately sized images — mobile users don't download massive desktop-sized files. This directly impacts your Core Web Vitals scores and Google rankings. Additionally, properly formatted srcset with modern formats (WebP, AVIF) via the <picture> element further reduces file sizes. Google explicitly recommends responsive images as a performance best practice.

srcset and sizes have excellent browser support — over 97% globally. They're supported in Chrome (since v38), Firefox (v38), Safari (v9), Edge (all versions), and all modern mobile browsers. For older browsers that don't support srcset, the src attribute serves as a reliable fallback, ensuring every user sees an image.

Use the URL Template feature! Enter your CDN's URL pattern with {width} as the placeholder. For Cloudinary: https://res.cloudinary.com/your-cloud/image/upload/w_{width}/image.jpg. For Imgix: https://your-domain.imgix.net/image.jpg?w={width}. The tool will automatically generate the correct URLs for each breakpoint. Many CDNs also support format conversion (WebP, AVIF) — combine this with the <picture> element for maximum performance.

WebP is the current sweet spot — excellent compression, universal modern browser support, and typically 25-35% smaller than JPEG/PNG. AVIF offers even better compression (up to 50% smaller than JPEG) but has slightly less browser support. Use the <picture> element to provide AVIF or WebP with JPEG/PNG fallbacks. Always include a src fallback for maximum compatibility.