README

Blade component and url routing to generate responsive images and thumbnails.

Be lazy, just use an image and the package will be responsive alone.

Boost the PageSpeed.

Requirements

PHP >= 8.2
Laravel 11+

Image processing

This package use by default intervention/image, needed to have at least one image processing extension installed.

Image optimizer

This package use by default spatie/image-optimizer, see optimization tools section

Install

composer require board3r/laravel-responsive-image

Basic usage

Store the images in the laravel local disk in the directory /storage/app/private/responsive-image (default settings)

<x-board3r::responsive-image
    image="mountain.png"
    alt="Beautifull mountain"
    :thumbs="{{['w'=>800,'w'=>600]}}"
    class="rounded border-white border-5"
    sizes="(min-width: 990px) calc(100vw / 3),
     (min-width: 480px) calc(100vw / 2),
     calc((100vw - 3rem) / 2)"
/>

Html render :

<img src="/image-responsive/mountain.png"
    alt="Beautifull mountain"
    srcset="/img/mountain.png?w=800 w800
            /img/mountain.png?w=600 w600"
    sizes="(min-width: 990px) calc(100vw / 3),
     (min-width: 480px) calc(100vw / 2),
     calc((100vw - 3rem) / 2)"            
    width="1600" 
    height="900"
    loading="lazy"          
/>

All thumbnails are ready using the package routes.

Documentation

Configuration

The configuration will be published automatically under the folder /config/responsive-image.php during the installation.

In the documentation the tag @conf make a reference of the config file of this package.

All the example are illustrated with default Laravel And Laravel Responsive Image configuration and environnement.

Component parameters

image (required)

Set the src attribute image of img html tag.

// The origin image must be stored in /storage/app/private/responsive-image/mountain.jpg" 
<x-board3r::responsive-image
    ...
    image="mountain.jpg"
    ...
/>

// Possibilty to use subfolders, the origin image must be stored in /storage/app/private/responsive-image/subdir/mountain.jpg" 
<x-board3r::responsive-image
    ...
    image="/subdir/mountain.jpg"
    ...
/>

// Possibilty to external image, the origin image will be stored automatically in /storage/app/private/responsive-image/picsum.photos/450-1600x900.jpg" 
<x-board3r::responsive-image
    ...
    image="https://picsum.photos/id/450/1600/900"
    ...
/>

@conf

storage.origin : The original image storage (default: 'local')
img_path : The directory in the storage disk (default: '/responsive-image')
allowed_extension : Allowed extension of original image (default:['webp', 'jpg', 'jpeg', 'png', 'gif'] )

:thumbs (optional)

List the thumbnails needed for good responsive performance. Pass an array for each thumb with one or more following query parameters

w : An integer to define the width
h : An integer to define height, if the height and width are defined the image will be cropped automatically
c : Define a position to crop (default: 'center')
f : Format of the thumbnail (default: 'webp')

// Generate two thumbs, one with 400px width and an other with 600px width
<x-board3r::responsive-image
    ...
    :thumbs="[['w'=>400],['w'=>600]]"
    ...
/>

// Cropped thumbnails
<x-board3r::responsive-image
    ...
    :thumbs="[['w'=>400,'h'=>400] ,['w'=>100,'h'=>100,'c'=>'top']]"
    ...
/>

// Output in a different format
<x-board3r::responsive-image
    ...
    :thumbs="[['w'=>400,'f'=>'jpg'],['w'=>600,'f'=>'jpg']]"
    ...
/>

@conf

default_srcset : If :thumbs parameter is not set, a default set will be used (default: [['w' => 100], ['w' => 200], ['w' => 400], ['w' => 800], ['w' => 1200]])
img_thumb_path : The directory in the storage disk (default: '/responsive-image/thumbs')
default_thumb_ext : The default format to generate thumbnail (default :'webp'). The default value must be allowed in allowed_format
allowed_format : Allowed format to generate thumbnail (default: ['webp', 'jpg', 'png', 'gif'])
allowed_width : Allowed widths to generate thumbnail (default: [50, 100, 200, 400, 600, 800, 1200, 1400, 1600]). Possibility to allow all widths with an empty array
allowed_height : Allowed heights to generate thumbnail (default: [50, 100, 200, 300, 400, 500, 600, 800, 1000, 1200]). Possibility to allow all heights with an empty array
allowed_crop : Allowed crop positions to generate thumbnail (default: ['center', 'top', 'top-right', 'top-left', 'left', 'bottom', 'bottom-right', 'bottom-left', 'right'])
storage.thumb : The thumbnail storage (default: 'public')
thumb_dir_level : Thumbnail will generate a tree storage. This parameter define the number of level (default: 2)

:useCustomThumbs

By default this parameter is disabled, but the package offer the possibility to use specifics thumbnails and this parameter is set to true.

Don't forget to specify a width associated with the thumbnail to stay responsive.

<x-board3r::responsive-image
    ...
    :thumbs="['https://picsum.photos/id/450/800/600 600w','https://picsum.photos/id/450/400/200 200w']"
    :useCustomThumbs="true"
    ...
/>

loading, fetchPriority and decoding

These parameters will impact the page loading.

Allowed values :

loading (default: 'lazy') : 'auto','lazy','eager' more information
fetchPriority : 'high','low','auto' more information
decoding : 'sync','async','lazy' more information

width and height (optional)

By default these values are calculated, but force them to avoid some problems of calculation

<x-board3r::responsive-image
    ...
    width="1600"
    height="900"
    ...
/>

Get more attributes

As all components in Laravel, you can add other attributes, they will reuse to display the image.

<x-board3r::responsive-image
    ...
    alt="Beautifull moutain"
    class="responsive-image"
    ...
/>

Don't forget important thing to keep the image responsive and a performant page loading, the attribute sizes.

This attribute is not directly manage by the package because each case is different, but it's very important to set it. More information

// an example of attributes size to determine which thumnail to use... 
<x-board3r::responsive-image
    ...
    sizes="(min-width: 1600px) 367px, 
    (min-width: 990px) calc((100vw - 10rem) / 4),
    (min-width: 750px) calc((100vw - 10rem) / 3),
    (min-width: 480px) calc((100vw - 5rem) / 2),
    calc((100vw - 3rem) / 2)"
    ...
/>

Environnement

Possibility to use some environnement variable to configure a default config value

RESPONSIVE_IMAGE_CACHE_TIME=2592000
RESPONSIVE_IMAGE_URL_PATH=/img
RESPONSIVE_IMAGE_IMG_PATH=/responsive-image
RESPONSIVE_IMAGE_IMG_THUMB_PATH=/responsive-image/thumbs
RESPONSIVE_IMAGE_DEFAULT_THUMB_EXT=webp
RESPONSIVE_IMAGE_THUMB_DIR_LEVEL=2
RESPONSIVE_IMAGE_STORAGE_ORIGIN=local
RESPONSIVE_IMAGE_STORAGE_THUMB=public

Extending Processors

The package is only delivered with Intervention Image

Possibility to extend with another image processor following the ProcessorInterface::class

@conf

processor.class (default: InterventionProcessor::class)_ : Define the image processor class

Extending Optimizers

The package is delivered with Spatie Image Optimizer and another one to disable image optimisation (DisableOptimizer::class)

Possibility to extend with another image optimizer following the OptimizerInterface::class

@conf

optimizer.class (default: SpatieOptimizer::class)_ : Define the image optimisation class

board3r / laravel-responsive-image

Maintainers

Details

README

Requirements

Image processing

Image optimizer

Install

Basic usage

Documentation

Configuration

Component parameters

image (required)

:thumbs (optional)

:useCustomThumbs

loading, fetchPriority and decoding

width and height (optional)

Get more attributes

Environnement

Extending Processors

Extending Optimizers