PHPackages                             infernalmedia/responsive-image-craft - 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. infernalmedia/responsive-image-craft

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

infernalmedia/responsive-image-craft
====================================

ResponsiveImageCraft is a Laravel package that simplifies responsive image generation with a command-line interface, a flexible display component, and SCSS mixins for effortless background-image integration. Elevate your image handling capabilities and deliver stunning visuals effortlessly

v0.0.8(1y ago)05.5k↓34.2%[2 PRs](https://github.com/infernalmedia/responsive-image-craft/pulls)MITPHPPHP ^8.2CI passing

Since Aug 3Pushed 1y agoCompare

[ Source](https://github.com/infernalmedia/responsive-image-craft)[ Packagist](https://packagist.org/packages/infernalmedia/responsive-image-craft)[ Docs](https://github.com/infernalmedia/responsive-image-craft)[ RSS](/packages/infernalmedia-responsive-image-craft/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (15)Versions (13)Used By (0)

Add static responsive images to your Laravel project
====================================================

[](#add-static-responsive-images-to-your-laravel-project)

[![Latest Version on Packagist](https://camo.githubusercontent.com/3c3a82a3983d1444060076a89df9c3e91cb0a88319237a9fd601ed829d54a3a5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696e6665726e616c6d656469612f726573706f6e736976652d696d6167652d63726166742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/infernalmedia/responsive-image-craft)[![GitHub Tests Action Status](https://camo.githubusercontent.com/33aab6f6d2c86eca370de5f39d6547b16ea9afe3c476513c8daadb446b89ddf2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f696e6665726e616c6d656469612f726573706f6e736976652d696d6167652d63726166742f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/infernalmedia/responsive-image-craft/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/bd6bc27f78488cb859ce77ecca6788fe8fad2fe5f328f872e33777fe192d81c4/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f696e6665726e616c6d656469612f726573706f6e736976652d696d6167652d63726166742f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/infernalmedia/responsive-image-craft/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/4f06a76424894ab26d5040816c95c280452f118d2f41daa871746ad064ad0b50/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f696e6665726e616c6d656469612f726573706f6e736976652d696d6167652d63726166742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/infernalmedia/responsive-image-craft)

Introducing **ResponsiveImageCraft**, a powerful Laravel package that empowers you to effortlessly generate responsive images in various desired static formats through a simple command line interface. This package equips you with a versatile component to effortlessly display these responsive images on your web pages. Additionally, you'll find a collection of SCSS mixins to effortlessly generate the necessary code when using the images as background-images, ensuring a seamless integration into your projects.

With **ResponsiveImageCraft**, you can now efficiently manage and serve responsive images, enhancing your website's performance and user experience across various devices. Embrace the ease and flexibility of **ResponsiveImageCraft** as it takes care of the heavy lifting for you, delivering stunning visuals without the hassle. So why wait? Elevate your image handling capabilities today with **ResponsiveImageCraft**.

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

[](#installation)

You can install the package via composer:

```
composer require infernalmedia/responsive-image-craft
```

You can publish the config file with:

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

This is the contents of the published config file:

```
return [
    'use_responsive_images' => env('USE_RESPONSIVE_IMAGES', true),
    'source_disk' => env('RESPONSIVE_IMAGES_SOURCE_DISK', 'public'),
    'target_disk' => env('RESPONSIVE_IMAGES_TARGET_DISK', 's3'),
    'source_directory' => env('RESPONSIVE_IMAGES_SOURCE_DIRECTORY', 'images'),
    'target_directory' => env('RESPONSIVE_IMAGES_TARGET_DIRECTORY', 'images'),
    'sizes' => explode(',', env('RESPONSIVE_IMAGES_SIZES', "320,640,880,1024,1200,1760,2100")),
    'extensions' => [
        "jpg",
        "png",
        "avif",
        "webp",
    ],
    'extensions_filters_rules' => [
        "jpg" => ["png"],
        "png" => ["jpg"],
        "webp" => [],
        "avif" => [],
    ],
    'extensions_to_ignore' => [
        'svg'
    ],
    'filename_to_ignore' => [
        'favicon'
    ],
    'supported_file_extensions' => [
        "jpg",
        "webp",
        "png",
        "avif",
        "gif",
        "tiff",
        "pjpg"
    ],
    'filename_spacer' => '@',
    'container_css_class_name' => 'img-container'
    'scss_path' => resource_path('/scss/utilities'),
];
```

Optionally, you can publish the scss helper. The scss needs `sass:^1.57` to run correctly.

```
php artisan vendor:publish --tag="responsive-image-craft-scss"
```

Usage
-----

[](#usage)

### Images generations

[](#images-generations)

After configuring, the source and targets, run:

```
php artisan responsive-image-craft:generate
```

Optionally you can define the source

```
php artisan responsive-image-craft:generate --source-disk=public --relative-source-path=images
```

### Responsive Image Component

[](#responsive-image-component)

Here is a basic working configuration

```

```

Will generate the following html

```

        [...]

```

#### The following attributes are available for customization

[](#the-following-attributes-are-available-for-customization)

- `$alt`
    The alternative text for the image. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
- `$skipPictureTag`
    A flag to skip the `picture` tag and only render the `img` tag.
- `$src`
    The image relative path.
- `$height`
    The height of the original image. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height)
- `$width`
    The width of the original image [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width). The width value will define de maximum available image width, following the generated ones.
- `$asyncDecoding`
    Enable async decoding of the image. This can improve page load performance by decoding images in the background. [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding)
- `$lazy`
    Enable lazy loading of the image. When set to true, the image will load only when it's visible in the viewport. [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading)
- `$containerClass`
    CSS class to add to the wrapping top ``. You can apply custom styling using this class.
- `$imgAttributes`
    Additional html attributes to be added to the `img` tag. e.g.:`"class=img-class data-attribute=attribute"`

Here is complete example:

```

```

Will generate the following html

```

        [...]

```

### Using responsive image with Sass (and ViteJs)

[](#using-responsive-image-with-sass-and-vitejs)

#### Configuration

[](#configuration)

Set your vite.config.js to give env variables to your scss

```
import { defineConfig, loadEnv } from 'vite'
import laravel from 'laravel-vite-plugin'
import { AssetsScssFile } from './resources/js/AssetsScssFile'

export default defineConfig(async ({ command, mode }) => {
    const env = loadEnv(mode, process.cwd())
    const useResponsiveImages = Boolean(
        JSON.parse(env.VITE_USE_RESPONSIVE_IMAGES.toLowerCase())
    )
    const assetsUrl = useResponsiveImages ? env.VITE_ASSETS_URL : null
    const variables = new Map([
        ['$assetsUrl', assetsUrl],
        ['$filenameSpacer', env.VITE_RESPONSIVE_IMAGES_FILENAME_SPACER],
    ])

    const scss = new AssetsScssFile()
    scss.createSCSSFile(variables)

    return {
        plugins: [
            laravel({
                ...
            }),
        ],
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: "@use 'assets' as *;",
                },
            },
        },
    }
})
```

#### Responsive Image SCSS Mixins and Styles

[](#responsive-image-scss-mixins-and-styles)

The Responsive Image SCSS module provides useful mixins and styles for creating responsive background images and managing media queries.

##### Mixin usage

[](#mixin-usage)

Use the `responsive-background-image-from-existing-css-var` mixin to generate responsive background images from existing CSS vars generated by the laravel facade `ResponsiveImageCraft::getCssVariables()`:

```
.example-class {
    @include responsive-background-image-from-existing-css-var(
        $sizes: (480px, 768px, 1024px),
        $extensions: ('webp', 'jpg'),
        $full: 'full'
    );
}
```

Or use the `responsive-background-image` mixin to generate responsive background images

```
.example-class {
    @include responsive-background-image(
        $base-relative-path: "images/example.jpg",
        $extensions: ('webp', 'jpg'),
        $breakpoints: (480px, 768px, 1024px),
        $file-name-spacer: '@'
    );
}
```

Be careful, the extensions list order will define the browser preference.

Other useful functions are available in `/scss/_assets-url-helper.scss`

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Guillaume Ernst](https://github.com/infernalmedia)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance47

Moderate activity, may be stable

Popularity23

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 86.6% 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 ~69 days

Recently: every ~46 days

Total

10

Last Release

396d ago

PHP version history (2 changes)v0.0.1-alphaPHP ^8.1

v0.0.5PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/5e6b848fc01893e8da4578965df3b420534287587366737940499c8665946438?d=identicon)[guillaume-infernal](/maintainers/guillaume-infernal)

![](https://www.gravatar.com/avatar/01b1551c97db1c958792e35553fcae0608d87d908c05e71028cdeb7611fdcba3?d=identicon)[jlalande](/maintainers/jlalande)

---

Top Contributors

[![guillaume-infernal](https://avatars.githubusercontent.com/u/56695355?v=4)](https://github.com/guillaume-infernal "guillaume-infernal (58 commits)")[![jlalande](https://avatars.githubusercontent.com/u/2721747?v=4)](https://github.com/jlalande "jlalande (7 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)")

---

Tags

laravelinfernalmediaresponsive-image-craft

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/infernalmedia-responsive-image-craft/health.svg)

```
[![Health](https://phpackages.com/badges/infernalmedia-responsive-image-craft/health.svg)](https://phpackages.com/packages/infernalmedia-responsive-image-craft)
```

###  Alternatives

[spatie/laravel-health

Monitor the health of a Laravel application

86910.0M83](/packages/spatie-laravel-health)[spatie/laravel-pdf

Create PDFs in Laravel apps

9963.4M12](/packages/spatie-laravel-pdf)[finller/laravel-media

A flexible media library for Laravel

472.1k](/packages/finller-laravel-media)[wnx/laravel-backup-restore

A package to restore database backups made with spatie/laravel-backup.

203330.1k2](/packages/wnx-laravel-backup-restore)[saasykit/laravel-open-graphy

An awesome open graph image (social cards) generator package for Laravel.

13057.0k](/packages/saasykit-laravel-open-graphy)[vormkracht10/laravel-mails

Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app.

24149.7k](/packages/vormkracht10-laravel-mails)

PHPackages © 2026

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