Serve optimize images for faster page loads.

dev-master 2019-10-20 21:56 UTC


Imagery for Laravel masthead image.

Join the chat at Travis SensioLabs Insight Scrutinizer Coveralls GitHub (pre-)release Packagist

NOTE: Still under initial development, not yet functional. Initial release will be available in the next week or so. Stay tuned. :)


Provide developers a simplified solution to serving dynamic and optimized images, regardless if the user uploaded unoptimized images. This is particularly important for blogs and CMS'.


There are some online third-party services out there that can handle this. But what do you do if you don't want the extra expense or complexity, or are serving sensitive images in an intranet setting that cannot be trusted to 3rd- party vendors? This package aims to fill that gap, and more-over, improve user experience in your application by loading assets faster, and at the right sizes.


  1. Pull in the package:
composer require genealabs/imagery
  1. Register the service provider in \config\app.php:
  1. Publish the assets:
php artisan imagery:publish --assets



Annotations to be added...


return [
    'storage-folder' => 'imagery-cache/',
    'size-presets' => [
        'thumbnail' => 150,
        'extra-small' => 480,
        'small' => 768,
        'medium' => 992,
        'large' => 1200,


It is recommended to set up an async queue driver to process image generation. See for more details. Items will be dispatched onto a separate queue called imagery.




Outputs an <img src="..." width="..." height="..."> tag.


Outputs a multi-resolution, responsive <picture> tag.



type: bool, default: true Allow distortion of images if set to false.


type: bool, default: false Prevent Laravel Imagery from automatically creating preset image sizes. This should normally be left on, unless specifically not needed.


type: bool, default: false Allows overriding of constraining image to screen dimensions.


type: string, options: 'contain|cover', default: contain. Determine how screen sizing constraints work. Just like the CSS background-size properties. cover will try to size the image to fill the boundaries of the size provided (or if not provided, use the screen size), while contain will size the image to fit within those bounds.

Planned Features

  • Detects visitor's screen dimensions and optimizes the image for it.
  • Your images don't have to be in a public folder to be served, imagery creates derivative images in its own public folder.
  • Further optimizes derivative images through lossless compression (using async queue so as not to hold things up).