PHPackages                             onlinedigital/laravel-perfect-image - 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. [Image & Media](/categories/media)
4. /
5. onlinedigital/laravel-perfect-image

ActiveLibrary[Image & Media](/categories/media)

onlinedigital/laravel-perfect-image
===================================

Automatic responsive image optimization for Laravel

v0.0.1(2mo ago)02MITPHPPHP ^8.1

Since Mar 2Pushed 2mo agoCompare

[ Source](https://github.com/OnlineDigital/laravel-perfect-image)[ Packagist](https://packagist.org/packages/onlinedigital/laravel-perfect-image)[ RSS](/packages/onlinedigital-laravel-perfect-image/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (2)Used By (0)

Laravel Perfect Image
=====================

[](#laravel-perfect-image)

Automatic responsive image optimization for Laravel. Detects rendered image dimensions, caches the most common resolutions, and generates srcset attributes automatically.

Features
--------

[](#features)

- Automatic detection of rendered image dimensions via JavaScript
- Caches the most common resolutions per image
- Driver-based URL generation (supports multiple image services)
- Blade directive for easy usage
- Lazy resize tracking

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

[](#installation)

```
composer require onlinedigital/laravel-perfect-image
```

### Add Middleware (Optional - for automatic JS injection)

[](#add-middleware-optional---for-automatic-js-injection)

Add to your `bootstrap/app.php`:

```
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->alias([
            'perfect-image' => \OnlineDigital\PerfectImage\Http\Middleware\InjectPerfectImageJs::class,
        ]);
    })
    ->create();
```

Or apply to specific routes:

```
Route::get('/home', [HomeController::class, 'index'])->middleware('perfect-image');
```

### Publish Config

[](#publish-config)

```
php artisan vendor:publish --provider="OnlineDigital\\PerfectImage\\PerfectImageServiceProvider" --tag="perfect-image-config"
```

### Config Options

[](#config-options)

```
// config/perfect-image.php
return [
    // Cache driver to store resolution data
    'cache_driver' => env('PERFECT_IMAGE_CACHE_DRIVER', 'file'),

    // How many of the most common resolutions to keep
    'max_resolutions' => 5,

    // Minimum width difference to count as a new resolution
    'min_width_diff' => 50,

    // The route name for the observer endpoint
    'route_name' => '_perfect_image_observer',

    // Default image driver (url, cloudinary, etc.)
    'driver' => env('PERFECT_IMAGE_DRIVER', 'url'),

    // Driver-specific configuration
    'drivers' => [
        'url' => [
            // For simple URL manipulation (e.g., adding query params)
            'base_url' => env('APP_URL'),
            'param_format' => '{url}?w={width}&h={height}', // or {url}/{width}x{height}
        ],
        'cloudinary' => [
            'cloud_name' => env('CLOUDINARY_CLOUD_NAME'),
            'base_url' => 'https://res.cloudinary.com/{cloud_name}/image/upload',
        ],
        // Add more drivers as needed
    ],
];
```

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

In your Blade templates:

```

```

Example:

```

```

This generates:

```

```

### Custom Sizes

[](#custom-sizes)

```
image, ['640', '1024', '1280']) }}>
```

### JavaScript

[](#javascript)

The package automatically injects the required JavaScript. Make sure you have jQuery or the script will be included automatically.

Creating Custom Drivers
-----------------------

[](#creating-custom-drivers)

Create a class that implements `OnlineDigital\PerfectImage\Contracts\Driver`:

```