README

A <x-picture> Blade component for Laravel Twill 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, imgproxy, Cloudinary, imgix, or any image service that accepts w, q, and fm as URL query parameters.

Installation

composer require dnsk-work/twill-picture

The component is auto-registered by Laravel as <x-twill-picture::picture>.

To use the shorter <x-picture> tag, publish the view to your app:

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

Any other attributes are forwarded to the <img> element.

How it works

1. Renders a wrapper <div> with position: relative; overflow: hidden.
2. Inside it, an absolutely-positioned <div> 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 <picture> element provides a WebP <source> with srcset at 400w 800w 1200w 1600w 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.

Requirements

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

License

MIT

Made by DNSK.WORK, a UI/UX agency.