PHPackages                             craftyhedge/breakpoints - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. craftyhedge/breakpoints

ActiveCraft-plugin[Image & Media](/categories/media)

craftyhedge/breakpoints
=======================

Automatic responsive image processing and transform set generation.

0.1.9(2w ago)063↑130%proprietaryPHPPHP ^8.2CI passing

Since Jun 9Pushed 2w agoCompare

[ Source](https://github.com/craftyhedge/craft-breakpoints)[ Packagist](https://packagist.org/packages/craftyhedge/breakpoints)[ RSS](/packages/craftyhedge-breakpoints/feed)WikiDiscussions master Synced 1w ago

READMEChangelogDependencies (14)Versions (11)Used By (0)

Breakpoints
===========

[](#breakpoints)

[![CI](https://github.com/craftyhedge/craft-breakpoints/actions/workflows/ci.yml/badge.svg)](https://github.com/craftyhedge/craft-breakpoints/actions/workflows/ci.yml)[![PHPStan Level 7](https://camo.githubusercontent.com/797fcfed94913f509c34a34eddcb3019ef7fe96435ca6cbcdab00e26918d3230/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d6c6576656c253230372d627269676874677265656e3f6c6f676f3d706870)](https://github.com/craftyhedge/craft-breakpoints/blob/main/phpstan.neon)[![PHP 8.2+](https://camo.githubusercontent.com/91c32053ff9bef6ba397e97fb6224bdb85a98947e8a7b3555a8c76cb655d16a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e32253230253743253230382e33253230253743253230382e342d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://github.com/craftyhedge/craft-breakpoints)[![Craft 5.3+](https://camo.githubusercontent.com/46e90bb4cc673700202ca2ea63d0c6b2d557e797a1c9369dde1aa5a5b06f58f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4372616674253230434d532d352e332532422d6535343232623f6c6f676f3d63726166742d636d73266c6f676f436f6c6f723d7768697465)](https://github.com/craftyhedge/craft-breakpoints)

> Breakpoints is currently in beta. APIs, configuration, and generated transform-set structure may change before the stable `1.0.0` release.

Breakpoints handles the front end markup for your Craft assets and provides a developer processing tool to accurately measure each breakpoint rendering size and create transform sets without any manual work.

Processing is intended for local development environments with the resulting transform sets being commited to git.

Key concepts
------------

[](#key-concepts)

- **Transform set** — a named, reusable recipe (e.g. `hero`, `card`) describing the image dimensions, format, and quality at each breakpoint. Stored as JSON in `config/breakpoints/transform-sets.json`.
- **Breakpoint slots** — every set has a `base` slot (smallest viewport) followed by one slot per configured breakpoint (`xs`, `sm`, `md`, …), in width order.
- **Processing run** — a control-panel pass that renders a chosen entry, measures the rendered size of each breakpoint image, and lets you apply those measurements back into the set.
- **Escape width** — an optional extra-large variant for the final slot, to keep very wide layouts sharp.
- **DPR variants** — high-density `srcset` descriptors (`1x` always; opt in to common ratios like `2x`/`3x`, or configure custom numeric ratios).

Features
--------

[](#features)

- One `` per configured breakpoint, with correct `media` ranges.
- Primary format plus an optional secondary `` fallback (e.g. AVIF + WebP).
- DPR `srcset` density descriptors.
- SVG assets pass through to a plain `` (no ``).
- Native `loading="lazy"` / `decoding` control.
- Fully overridable Twig templates for custom markup and lazy-loading integrations.
- File-backed transform sets that are commit-friendly and reviewable in version control.

Requirements
------------

[](#requirements)

- PHP `^8.2`
- Craft CMS `^5.3.0`

Install
-------

[](#install)

### Option 1: Composer

[](#option-1-composer)

Install with Composer:

```
composer require craftyhedge/breakpoints:^0.1.0
```

To pin the exact release:

```
composer require craftyhedge/breakpoints:0.1.0
```

Then install the plugin:

```
php craft plugin/install breakpoints
```

### Option 2: Plugin Store (Control Panel)

[](#option-2-plugin-store-control-panel)

1. Open the Craft Control Panel.
2. Go to **Plugin Store**.
3. Find **Breakpoints**.
4. Click **Install**.

Quick start
-----------

[](#quick-start)

1. Render the image in a template:

    ```
    {{ image(entry.heroImage.one(), 'hero', {
      initWidth: 1200,
      initHeight: 675
    }) }}
    ```
2. Keep building the component with that usable output.
3. When the layout is ready, open **Breakpoints → Transform Sets**, process the entry to create the transform set. Review and edit as needed.
4. Put shared defaults, especially breakpoint widths, in `config/breakpoints.php`. Use **Breakpoints → Settings** for quick output/default changes.

See [Getting Started](docs/getting-started.md) for the full walkthrough.

Documentation
-------------

[](#documentation)

- [Getting Started](docs/getting-started.md) — render a usable image, finalize the set.
- [Configuration](docs/configuration.md) — settings, the config file, and precedence.
- [Responsive Images](docs/responsive-images.md) — the output model, media ranges, DPR, and escape width.
- [Custom Image Templates](docs/custom-templates.md) — render through your own Twig.
- [`image()` Twig Function](docs/reference/twig-image-tag.md) — full API reference.
- [Release history](CHANGELOG.md)

Support
-------

[](#support)

- Source:
- Issues:

License
-------

[](#license)

Commercial plugin licensing follows the Craft License model.

See [LICENSE.md](LICENSE.md).

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance96

Actively maintained with recent releases

Popularity12

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

10

Last Release

20d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f19c0ee773f5be119993f6e002e329db3bee3d847ea2d3dc7067f1019c8c8651?d=identicon)[craftyhedge](/maintainers/craftyhedge)

---

Top Contributors

[![craftyhedge](https://avatars.githubusercontent.com/u/229282336?v=4)](https://github.com/craftyhedge "craftyhedge (211 commits)")

---

Tags

pluginimagesresponsiveCraftcraftcms

###  Code Quality

TestsCodeception

### Embed Badge

![Health badge](/badges/craftyhedge-breakpoints/health.svg)

```
[![Health](https://phpackages.com/badges/craftyhedge-breakpoints/health.svg)](https://phpackages.com/packages/craftyhedge-breakpoints)
```

###  Alternatives

[spacecatninja/imager-x

Ninja powered image transforms.

29405.1k39](/packages/spacecatninja-imager-x)[marionnewlevant/picture

Generate responsive <picture> and <img> elements based on configuration.

1213.9k](/packages/marionnewlevant-picture)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)