genealabs/laravel-imagery

Serve optimize images for faster page loads.

Imagery for Laravel

, _(*1)

, _(*2)

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

Goal

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'., _(*4)

Reasoning

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., _(*5)

Installation

1. Pull in the package:, _(*6)

   composer require genealabs/imagery
   

2. Register the service provider in \config\app.php:, _(*7)

   GeneaLabs\LaravelImagery\Providers\LaravelImageryService::class,
   

3. Publish the assets:, _(*8)

   php artisan imagery:publish --assets
   

Configuration

Settings

Annotations to be added..., _(*9)

<?php

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

Queue

It is recommended to set up an async queue driver to process image generation. See https://laravel.com/docs/5.4/queues for more details. Items will be dispatched onto a separate queue called imagery., _(*10)

Usage

Blade

@imageryImg

Outputs an <img src="..." width="..." height="..."> tag., _(*11)

@imageryPicture

Outputs a multi-resolution, responsive <picture> tag., _(*12)

Options

alwaysPreserveAspectRatio

type: bool, default: true Allow distortion of images if set to false., _(*13)

doNotCreateDerivativeImages

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

overrideScreenConstraint

type: bool, default: false Allows overriding of constraining image to screen dimensions., _(*15)

screenConstraintMethod

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., _(*16)

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).