PHPackages                             dnsk-work/twill-picture - 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. [Templating & Views](/categories/templating)
4. /
5. dnsk-work/twill-picture

ActiveLibrary[Templating & Views](/categories/templating)

dnsk-work/twill-picture
=======================

Progressive blur-up <x-twill-picture::picture> Blade component for Twill + Glide (or any query-param image transform service)

v1.0.2(1mo ago)01MITBladePHP ^8.1

Since Jun 22Pushed 2mo agoCompare

[ Source](https://gitlab.com/dnsk.work/twill-picture)[ Packagist](https://packagist.org/packages/dnsk-work/twill-picture)[ Docs](https://gitlab.com/dnsk.work/twill-picture)[ RSS](/packages/dnsk-work-twill-picture/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (4)Versions (4)Used By (0)

Twill Picture — Progressive blur-up image component for Laravel Twill & Glide
=================================================================================

[](#twill-picture--progressive-blur-up-image-component-for-laravel-twill--glide)

A `` Blade component for [Laravel Twill](https://twillcms.com) that renders responsive WebP images with a progressive blur-up (LQIP) loading effect. Shows a blurred low-quality image placeholder while the full image loads, then fades it in and removes the placeholder from the DOM.

Works with [Glide](https://glide.thephpleague.com), imgproxy, Cloudinary, imgix, or any image service that accepts `w`, `q`, and `fm` as URL query parameters.

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

[](#installation)

```
composer require dnsk-work/twill-picture
```

The component is auto-registered by Laravel as ``.

To use the shorter `` tag, publish the view to your app:

```
php artisan vendor:publish --tag=twill-picture-views
```

Usage
-----

[](#usage)

```

```

Props
-----

[](#props)

PropDefaultDescription`src``''`Image URL. Existing query params are preserved.`alt``''`Alt text.`loading``lazy`Set to `eager` for above-the-fold / LCP images.`fetchpriority``null`Set to `high` for LCP images.`width``null`Passed to `` for layout stability (CLS).`height``null`Passed to `` for layout stability (CLS).`sizes``100vw`CSS `sizes` attribute for responsive image selection.`class`—Applied to the outer wrapper ``.Any other attributes are forwarded to the `` element.

How it works
------------

[](#how-it-works)

1. Renders a wrapper `` with `position: relative; overflow: hidden`.
2. Inside it, an absolutely-positioned `` shows a 40px-wide WebP LQIP (`w=40&q=10&fm=webp`) scaled up with `blur(24px)`. `inset: -10%` hides the blur-edge glow.
3. A `` element provides a WebP `` with srcset at `400w 800w 1200w 1600w 2400w`, plus a fallback `` at `opacity: 0`.
4. On `img.onload`, opacity transitions to `1` and the LQIP element is removed from the DOM.

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

[](#requirements)

- PHP 8.1+
- Laravel 10, 11, or 12

License
-------

[](#license)

MIT

---

Made by [DNSK.WORK](https://dnsk.work), a [UI/UX agency](https://dnsk.work).

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance89

Actively maintained with recent releases

Popularity1

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity44

Maturing project, gaining track record

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

Total

3

Last Release

32d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/97341bc4ae531e231e628ed6bc237cb72afd375af4d8a62b629648cbfd19c9b6?d=identicon)[alexhalchenko](/maintainers/alexhalchenko)

---

Tags

laravelimagebladeglideResponsive ImagessrcsetWebptwilllqipprogressive-imageblur-up

### Embed Badge

![Health badge](/badges/dnsk-work-twill-picture/health.svg)

```
[![Health](https://phpackages.com/badges/dnsk-work-twill-picture/health.svg)](https://phpackages.com/packages/dnsk-work-twill-picture)
```

###  Alternatives

[moonshine/moonshine

Laravel administration panel

1.3k253.1k86](/packages/moonshine-moonshine)[blade-ui-kit/blade-icons

A package to easily make use of icons in your Laravel Blade views.

2.5k42.5M423](/packages/blade-ui-kit-blade-icons)[psalm/plugin-laravel

Psalm plugin for Laravel

3345.3M347](/packages/psalm-plugin-laravel)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

728176.2k14](/packages/tallstackui-tallstackui)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5443.8k](/packages/hasinhayder-tyro-dashboard)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9762.4M133](/packages/roots-acorn)

PHPackages © 2026

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