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

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 LCP images.
`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 image selection.
`class`	—	Applied to the outer wrapper `<div>`.

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

How it works

Renders a wrapper <div> with position: relative; overflow: hidden.
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.
A <picture> element provides a WebP <source> with srcset at 400w 800w 1200w 1600w 2400w, plus a fallback <img> at opacity: 0.
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.

dnsk-work / twill-picture

Maintainers

Package info

Statistics

Security