PHPackages                             zoker/responsive-images - 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. [Utility & Helpers](/categories/utility)
4. /
5. zoker/responsive-images

ActiveLibrary[Utility & Helpers](/categories/utility)

zoker/responsive-images
=======================

Responsive images with webp conversion for Laravel

1.2.1(1mo ago)0169PHPPHP ^8.2

Since May 26Pushed 3w agoCompare

[ Source](https://github.com/zoker68/responsive-images)[ Packagist](https://packagist.org/packages/zoker/responsive-images)[ RSS](/packages/zoker-responsive-images/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (4)Dependencies (4)Versions (5)Used By (0)

Responsive Images for Laravel
=============================

[](#responsive-images-for-laravel)

Laravel package for automatic image conversion to WebP and responsive sizes generation.

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

[](#installation)

```
composer require zoker/responsive-images
```

Configuration
-------------

[](#configuration)

Publish the configuration file:

```
php artisan vendor:publish --tag="responsive-images-config"
```

Usage
-----

[](#usage)

### Facade

[](#facade)

```
use Zoker\ResponsiveImages\Facades\ResponsiveImages;

// With specific dimensions
$image = ResponsiveImages::make(
    'uploads/products/image.jpg',
    width: 1200,
    height: 800,
    disk: 'public',
);

// Or use original image dimensions
$image = ResponsiveImages::make(
    'uploads/products/image.jpg',
    disk: 'public',
);

// Default: lazy loading
echo $image->toHtml('Product image');

// For hero images: eager loading
echo $image->toHtml('Hero image', 'eager');
```

### Blade Component

[](#blade-component)

```
{{-- With specific dimensions --}}

{{-- Or use original dimensions --}}

{{-- Hero image with eager loading --}}

```

### Blade Directive

[](#blade-directive)

```
{{-- Default: lazy loading --}}
@responsiveImage(
    'uploads/products/image.jpg',
    width: 1200,
    height: 800,
    alt: 'Product image',
    disk: 'public'
)

{{-- Hero image with eager loading --}}
@responsiveImage(
    'uploads/hero.jpg',
    width: 1920,
    height: 1080,
    alt: 'Hero image',
    loading: 'eager',
    disk: 'public'
)
```

### Working with the `ResponsiveImage` Object

[](#working-with-the-responsiveimage-object)

`ResponsiveImages::make()` returns a `ResponsiveImage` object with the following methods:

```
$image = ResponsiveImages::make('uploads/products/image.jpg', width: 1200, height: 800);

// Get all generated images as [width => url] array
$image->getImages();
// e.g. [320 => 'https://...', 640 => 'https://...', 1200 => 'https://...']

// Get the URL of the closest generated image to the given width
// Prefers equal or larger sizes; falls back to largest available if all are smaller
$image->getImage(500);
// returns URL of the nearest generated size (e.g. 640px version)

// Get srcset string
$image->getSrcset();
// e.g. "https://.../image-320-abc.webp 320w, https://.../image-640-def.webp 640w, ..."

// Render as HTML  element
$image->toHtml('Alt text');
$image->toHtml('Alt text', 'eager');
$image->toHtml('Alt text', 'lazy', ['class' => 'my-image']);
```

Available public properties:

PropertyTypeDescription`$src``string`URL of the largest generated image`$generatedImages``array`All generated images as `[width => url]``$sizes``string`The `sizes` attribute value`$width``int`Target width`$height``int`Target height`$format``string`Output format (e.g. `webp`)Artisan Commands
----------------

[](#artisan-commands)

### Clear Generated Images

[](#clear-generated-images)

```
# Clear all
php artisan responsive-images:clear

# Clear for specific file
php artisan responsive-images:clear uploads/products/image.jpg
```

> **Note:** Images are automatically regenerated when the original file changes or config parameters are updated. No manual regeneration needed!

How It Works
------------

[](#how-it-works)

1. Package accepts image path, optional target width and height (uses original dimensions if not specified), Alt attribute, optional disk (uses default disk if not specified)
2. Automatically calculates responsive sizes based on breakpoints from config
3. Converts image to WebP
4. Generates versions for each size with hash-based filenames
5. Caches results using hash of (file modification time + dimensions + quality + format)
6. Automatically invalidates cache when original file or parameters change
7. Returns HTML with `` and `srcset`

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance92

Actively maintained with recent releases

Popularity15

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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

Total

4

Last Release

58d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0b075c23dd895b751d3f14d3b90188954aed10d9c2ca845cd007ea139b41a8a4?d=identicon)[zoker](/maintainers/zoker)

---

Top Contributors

[![zoker68](https://avatars.githubusercontent.com/u/132267010?v=4)](https://github.com/zoker68 "zoker68 (1 commits)")

###  Code Quality

Static AnalysisPHPStan

### Embed Badge

![Health badge](/badges/zoker-responsive-images/health.svg)

```
[![Health](https://phpackages.com/badges/zoker-responsive-images/health.svg)](https://phpackages.com/packages/zoker-responsive-images)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

330530.5k30](/packages/codewithdennis-filament-select-tree)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

123177.8k1](/packages/stephenjude-filament-feature-flags)[symfony/ux-cropperjs

Cropper.js integration for Symfony

19346.6k3](/packages/symfony-ux-cropperjs)

PHPackages © 2026

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