Picasso is a Laravel Image Management and Optimization Package by laravelista. It defines image dimensions and options, stores uploaded images in multiple dimensions with or without a watermark and retrieves optimized images on your website when needed.

Overview

You can reduce your site size and improve site loading time with this package. It also has a lot of features given below:

• resize image to multiple dimensions; [width x height with upscale] (‘news_thumbnail’, ‘news_gallery’, ‘news_cover’, …)
• retrieve optimized image for specific position get(‘news_cover’)
• apply watermark on images that need it (task in progress)
• quickly change the image dimension and update all, subset or a single image with optimized size
• implement this package in any phase of your application
• to use this package on your whole site or just a part of it
• set global or individual image quality (default 60)
• set global or individual image format (default webp)

Benefits

You can keep your original user-uploaded images untouched (2MB or more). This package will create new optimized images and keep a reference of the original and optimized in the manifest file.

Your page will load faster because it will have less MB to download because the images will be smaller. I have managed to reduce image size from 2.4MB to 700Kb, just by implementing this package as an addon later in the development phase.

Installation

You can install this package via composer.

composer require laravelista/picasso

Publish the config file picasso.php to your /config directory:

php artisan vendor:publish --provider="Laravelista\Picasso\ServiceProvider" --tag=config

Installation complete!

Configuration

Before continuing be sure to open the /config/picasso.php file and update the dimensions and quality to your needs.

Usage

There are a few ways to implement this package in your application. I will try to cover them all.

Store method

After you have stored the user uploaded image in your storage UploadedFile $image->store(‘images’) and you have retrieved the path to the image. Give that path (that you would usually store in the database) to Picasso:

use Laravelista\Picasso\Picasso;

public function store(Request $request, Picasso $picasso)
{
    // ...

    // store original image in storage
    $article->image = $request->image->store('images');

    // optimize original image to desired dimensions
    $picasso->optimize($article->image, ['news_small', 'news_cover']);

    // ...
}

Update method

When the user is going to replace the existing image with a new one, we have to first purge all records from storage and manifest file of the old image and then optimize the new image:

use Laravelista\Picasso\Picasso;

public function update(Request $request, Article $article, Picasso $picasso)
{
    // ...

    if ($request->hasFile('image')) {

        // delete original image from storage
        Storage::delete($article->image);

        // delete all optimized images for old image
        $picasso->drop($article->image, ['news_small', 'news_cover']);

        // save new original image to storage and retrieve the path
        $article->image = $request->image->store('images');

        // optimize new original image
        $picasso->optimize($article->image, ['news_small', 'news_cover']);
    }

    // ...
}

Destroy method

When deleting a record that has optimized images, be sure to delete optimized image also to reduce unused files:

use Laravelista\Picasso\Picasso;

public function destroy(Article $article, Picasso $picasso)
{
    // ...

    // delete original image
    Storage::delete($article->image);

    // delete optimized images
    $picasso->purge($article->image);

    // delete record from database
    $article->delete();

    // ...
}

Optimizing already uploaded and saved images

I suggest you create a console route for this. I will show you how I do this in my applications. In routes/console.php and this route:

use Laravelista\Picasso\Picasso;

Artisan::command('picasso:article-optimize', function (Picasso $picasso) {

    $images = Article::all()->pluck('image')->toArray();

    $picasso->optimize($images, ['news_small', 'news_cover']);

    $this->comment("Article images optimized!");
});

Now from the command line, you can call php artisan picasso:article-optimize whenever you want and it will grab the original images for the table article, create optimized images, create/update optimized images in storage and update the reference in the database.

Retrieving optimized images

From your view files do:

<image src="{{ Picasso::get($article->image, 'news_small') }}" />

This line will retrieve the optimized image URL.

There are also other API methods are available in the Picasso package, If you wanna explore them, You can head over to its documentation & source code on Github.