Responsive Image Sets — Without the pipeline

The Problem

Responsive images are hard

Every modern website needs responsive images. But getting them right means juggling multiple concerns at once.

Multiple widths

Different screen sizes need different image widths — 640px, 768px, 1024px, 1200px, 1920px, 2560px. That's six versions of every image.

Multiple formats

AVIF for Chrome and Firefox, WebP for Safari and Edge, JPEG as a universal fallback. That's three formats per width.

Correct markup

Each combination needs correct <picture> markup with <source> elements, srcset attributes, and sizes hints.

Repeat for every image

Hero images, product photos, banners — each one needs the full treatment. Most teams solve this with Sharp scripts, Cloudinary, or custom build plugins.

The Solution

One pass. Everything generated.

PicSquish generates the complete set in one pass: 1 source image becomes 18+ optimised files plus ready-to-use HTML.

Import your source image

Drag and drop or use the file picker. PicSquish accepts any format it can read — including RAW files.

Choose breakpoints

Pick from 6 presets (Minimal, Standard Web, Comprehensive, Mobile-First, Retina-Ready, E-Commerce) or define your own custom widths.

Choose formats

Select any combination of AVIF, WebP, JPEG, and PNG. PicSquish generates every selected width in every selected responsive format.

Click Generate

PicSquish outputs all files plus production-ready HTML, JSX, or Markdown — ready to paste into your project.

What you get

Files and HTML, ready to ship

Generated files

hero-640.avif    hero-640.webp    hero-640.jpg
hero-768.avif    hero-768.webp    hero-768.jpg
hero-1024.avif   hero-1024.webp   hero-1024.jpg
hero-1200.avif   hero-1200.webp   hero-1200.jpg
hero-1920.avif   hero-1920.webp   hero-1920.jpg
hero-2560.avif   hero-2560.webp   hero-2560.jpg

Auto-generated HTML (copy-paste ready)

<picture>
  <source
    type="image/avif"
    srcset="hero-640.avif 640w, hero-768.avif 768w,
            hero-1024.avif 1024w, hero-1200.avif 1200w,
            hero-1920.avif 1920w, hero-2560.avif 2560w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px">
  <source
    type="image/webp"
    srcset="hero-640.webp 640w, hero-768.webp 768w,
            hero-1024.webp 1024w, hero-1200.webp 1200w,
            hero-1920.webp 1920w, hero-2560.webp 2560w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px">
  <img
    src="hero-1200.jpg"
    srcset="hero-640.jpg 640w, hero-768.jpg 768w,
            hero-1024.jpg 1024w, hero-1200.jpg 1200w,
            hero-1920.jpg 1920w, hero-2560.jpg 2560w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
    alt="Hero image"
    width="2560" height="1440"
    loading="lazy">
</picture>

Presets

Breakpoint presets

Choose from six built-in presets or define your own custom widths for any use case.

Preset	Widths	Best for
Minimal	640, 1024, 1920	Simple sites, blogs
Standard Web	640, 768, 1024, 1200, 1920, 2560	Most websites
Comprehensive	320, 480, 640, 768, 1024, 1200, 1440, 1920, 2560, 3840	Image-heavy sites
Mobile-First	320, 480, 640, 768, 1024	Mobile-optimised apps
Retina-Ready	640, 1280, 1920, 2560, 3840	High-DPI displays
E-Commerce	400, 800, 1200, 1600	Product photography
Custom	You decide	Everything else

Flexibility

Output options

Fine-tune the generated output to match your project's requirements.

HTML flavours

Standard HTML, JSX for React and Next.js, or Markdown. Pick the syntax that matches your project.

Attributes

Configure alt text, loading (lazy/eager), fetchpriority (high/low/auto), and width/height for CLS prevention.

Sizes attribute

Auto-generated responsive layout hints, or supply your own custom sizes attribute for precise browser width selection.

Naming patterns

Token-based naming with {name}-{width}.{ext} and customisable patterns to match your existing file conventions.

PicSquish library view with responsive image set generation

Comparison

Why not just use a CDN?

CDN image services are excellent for dynamic, high-volume sites. But they come with trade-offs.

CDN image services

Monthly cost (Cloudinary from £70+/mo)
Network requests for every transformation
External infrastructure dependency
Don't work for static sites on Netlify, Vercel, or GitHub Pages

PicSquish

Static files — upload to any hosting or CDN
No vendor lock-in or recurring costs
No API keys or configuration
Works with every static site generator

Stop writing image scripts.

Generate your responsive sets in seconds, not sprints.

Download PicSquish

Responsive imageswithout the pipeline.