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 2026-06-22 18:04 UTC

Requires

• php: ^8.1
• illuminate/support: ^10.0|^11.0|^12.0
• illuminate/view: ^10.0|^11.0|^12.0

MIT

• image
• laravel
• blade
• srcset
• glide
• lqip
• Webp
• twill
• responsive-images
• progressive-image
• blur-up

Published on Packagist.org on 2026-06-22 17:26 UTC

README

# Twill Picture

An <x-picture> Blade component for Laravel Twill that renders responsive WebP images with a progressive blur-up (LQIP) load: a blurred low-quality placeholder shows instantly, the full image fades in on load, and the placeholder is removed from the DOM.

Works with Glide, imgproxy, Cloudinary, imgix — anything that takes w, q and fm as URL query parameters.

Requirements

PHP	^8.1
Laravel	10, 11 or 12

Installation

composer require dnsk-work/twill-picture

The component auto-registers as <x-twill-picture::picture>. To use the shorter <x-picture> tag, publish the view:

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

Usage

<x-twill-picture::picture
    src="{{ $block->image('hero_image', 'desktop') }}"
    alt="{{ $title }}"
    loading="eager"
    fetchpriority="high"
    sizes="100vw"
    class="w-full h-full"
/>

Props

Prop	Default	Description
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 the LCP image.
width	null	Passed to <img> for layout stability (CLS).
height	null	Passed to <img> for layout stability (CLS).
sizes	100vw	CSS sizes attribute for responsive selection.
class	—	Applied to the outer wrapper <div>.

Any other attribute is forwarded to the <img> element.

How it works

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

License

MIT — © dnsk.work.

**[dnsk.work](https://dnsk.work)** — a UI/UX design agency without the agency part.
Senior-led, embedded, no six-week process.