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
=======================

Craft CMS 5 plugin for responsive breakpoint image helpers.

0.1.0(yesterday)02↑2900%proprietaryPHPPHP ^8.2CI passing

Since Jun 9Pushed todayCompare

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

READMEChangelogDependencies (7)Versions (2)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 `2x`/`3x`).

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

37

—

LowBetter than 81% of packages

Maintenance100

Actively maintained with recent releases

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 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

Unknown

Total

1

Last Release

1d 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 (155 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.

29399.9k34](/packages/spacecatninja-imager-x)[verbb/image-resizer

Resize assets when they are uploaded.

127273.9k8](/packages/verbb-image-resizer)[marionnewlevant/picture

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

1213.8k](/packages/marionnewlevant-picture)

PHPackages © 2026

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