PHPackages                             mia/statamic-image-renderer - 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. mia/statamic-image-renderer

ActiveLibrary

mia/statamic-image-renderer
===========================

2.0.0(3mo ago)113.0k3[3 issues](https://github.com/moodley-interactive/statamic-responsive-image/issues)MITPHP

Since May 5Pushed 3mo ago2 watchersCompare

[ Source](https://github.com/moodley-interactive/statamic-responsive-image)[ Packagist](https://packagist.org/packages/mia/statamic-image-renderer)[ Docs](https://github.com/moodley-interactive/statamic-responsive-image)[ RSS](/packages/mia-statamic-image-renderer/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (28)Used By (0)

[![Responsive Image Addon Banner](https://raw.githubusercontent.com/moodley-interactive/statamic-responsive-image/dev/responsive.gif)](https://raw.githubusercontent.com/moodley-interactive/statamic-responsive-image/dev/responsive.gif)

moodley interactive - Responsive image Statamic addon
=====================================================

[](#moodley-interactive---responsive-image-statamic-addon)

[Demo](https://responsive-image-demo.moodley.dev/):

Features
--------

[](#features)

- Works with [Glide](https://glide.thephpleague.com/) and [Imgix](https://www.imgix.com/)
- Generates `picture` elements with the correct `sizes` attribute, based on your pages grid system
- Supports art directed images
- Supports aspect ratios
- Works with your existing assets, no custom fieldtype needed
- Displays a single color placeholder (muted dominant color) of the image
- Supports [lazySizes](https://github.com/aFarkas/lazysizes)

Motivation
----------

[](#motivation)

The motivation was, that we needed a solution that works with Glide and Imgix in the first place. And all CPU heavy calculations, like fallback images (e.g.: dominant color placeholder), should not be done in runtime. Further we needed the `sizes` attribute to be calculated based on our grid system, to make this super easy, we used `col_span` as a parameter, just as you are used to from Tailwind.

Installation
------------

[](#installation)

Install via composer: `composer require mia/statamic-image-renderer`

Publish the config: `php artisan vendor:publish --tag="statamic-image-renderer-config"`

If you want to use the native browser-level lazy-loading, set `lazy_loading` to `browser` inside the config.

When using [lazysizes](https://github.com/aFarkas/lazysizes) add it to your site like this:

```
npm install lazysizes

```

Then add it to your js file:

```
import lazySizes from 'lazysizes'

```

Config
------

[](#config)

The published config can be found in `config/statamic-image-renderer.php` and you can set up the breakpoints, the image provider and the container size for your main content.

Placeholder
-----------

[](#placeholder)

Placeholders are getting generated on upload. If you add the addon to an existing site, you can generate the placeholders for all assets already uploaded with a command. To to so run `php please resp:generate`.

Tag Usage
---------

[](#tag-usage)

In all the examples the assets field is called `image` in the blueprint. Can be called anything, thats up to your fieldsets/blueprint.

All parameters can be mixed, however you have to make sure, that the ratio and col\_span attributes have a corresponding breakpoint set up. You can't have `md:ratio="4/3"` and `lg:col_span="4"`. The parameter `col_span` expects a ratio to be set up.

The `col_span` attribute is the most important one, as it tells the browser which size of the image it should load. So the `{{ resp:image }}` tag should never be used without it, or the loaded image size is based on the viewport width.

### Basic Tag

[](#basic-tag)

```
{{ resp:image }}

```

### Provided Ratio

[](#provided-ratio)

Outputs a 16/9 image on mobile and a 4/3 image on breakpoint lg and up.

```
{{ resp:image ratio="16/9" lg:ratio="4/3" }}

```

### Provided Col Span

[](#provided-col-span)

Sets the correct size on mobile and desktop and takes the page grid in account. Make sure to set up the grid in your config file correctly.

**12 Cols on mobile and 4 cols on desktop:**

```
{{ resp:image col_span="12" lg:col_span="4" }}

```

### Set container to full width

[](#set-container-to-full-width)

This tells the tag, that this image is not in the page grid and is rather a fullscreen image.

```
{{ resp:image container_full_width="true" }}

```

### Crop to faces (only supported with imgix)

[](#crop-to-faces-only-supported-with-imgix)

Crop to faces in the picture instead of the focalpoint or center.

```
{{ resp:image crop="faces" }}

```

###  Health Score

48

—

FairBetter than 95% of packages

Maintenance74

Regular maintenance activity

Popularity28

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~72 days

Recently: every ~306 days

Total

25

Last Release

108d ago

Major Versions

1.0.23 → 2.0.02026-01-30

### Community

Maintainers

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

---

Top Contributors

[![goellner](https://avatars.githubusercontent.com/u/3986748?v=4)](https://github.com/goellner "goellner (26 commits)")[![valentinschreibmaier](https://avatars.githubusercontent.com/u/78438580?v=4)](https://github.com/valentinschreibmaier "valentinschreibmaier (16 commits)")[![valschr](https://avatars.githubusercontent.com/u/10574961?v=4)](https://github.com/valschr "valschr (11 commits)")[![kurticadna](https://avatars.githubusercontent.com/u/8883622?v=4)](https://github.com/kurticadna "kurticadna (2 commits)")[![moritzlang](https://avatars.githubusercontent.com/u/19893634?v=4)](https://github.com/moritzlang "moritzlang (2 commits)")[![juliakrenn](https://avatars.githubusercontent.com/u/63496035?v=4)](https://github.com/juliakrenn "juliakrenn (1 commits)")[![dominikfoeger](https://avatars.githubusercontent.com/u/84016239?v=4)](https://github.com/dominikfoeger "dominikfoeger (1 commits)")[![hfuchs28](https://avatars.githubusercontent.com/u/83972849?v=4)](https://github.com/hfuchs28 "hfuchs28 (1 commits)")[![davidwittenbrink](https://avatars.githubusercontent.com/u/1695809?v=4)](https://github.com/davidwittenbrink "davidwittenbrink (1 commits)")

---

Tags

imagesresponsiveglidestatamicimgix

### Embed Badge

![Health badge](/badges/mia-statamic-image-renderer/health.svg)

```
[![Health](https://phpackages.com/badges/mia-statamic-image-renderer/health.svg)](https://phpackages.com/packages/mia-statamic-image-renderer)
```

###  Alternatives

[nette/utils

🛠 Nette Utils: lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.

2.1k394.3M1.5k](/packages/nette-utils)[spatie/laravel-medialibrary

Associate files with Eloquent models

6.1k37.7M472](/packages/spatie-laravel-medialibrary)[mindkomm/timmy

Advanced image manipulation for Timber.

17735.6k](/packages/mindkomm-timmy)[visuellverstehen/statamic-picturesque

A Statamic tag for building HTML-only responsive images.

1016.9k](/packages/visuellverstehen-statamic-picturesque)[schnitzler/fluid-styled-responsive-images

Enables creation of responsive images for fluid styled content elements.

279.7k1](/packages/schnitzler-fluid-styled-responsive-images)[bigfork/htmleditorsrcset

Simple srcset integration with SilverStripe’s HTMLEditorField

1025.4k4](/packages/bigfork-htmleditorsrcset)

PHPackages © 2026

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