Laravel S3 Thumbnail

🔥 original photo was 1024x1024, 989.98 kB

By creating many media pages, I have worked out some solution. This package will help you to minimize S3 / Cloudfront costs (sometimes unexpected) and the amount of data transfer. It also helps SEO by optimizing the image size - yeah I tried that and Google Lighthouse likes that. 🎉

If your assets are not in terabytes, this package may be of help to you. Especially if you create small or medium-sized media sites.

You can configure your own thumbnails settings. Currently, the package supports resize, crop and quality. It is not much, but it is a good step for optimizing your website.

Installation

# Install package
composer require michaldoda/laravel-s3-thumbnail

# Publish configuration
php artisan vendor:publish --tag=s3-thumbnail-config

# (Optional) if storage has not been linked
php artisan storage:link

Usage

# resources/article/some-view.blade.php
{{ $article->yourImageModel->getThumbnailHtml('article_main') }}

# it will produce

<picture data-alt="Description">
    <source srcset="/storage/thumbnails/pk.../bc9400.../w600.jpeg" media="(max-width: 600px)">
    <img src="/storage/thumbnails/pk.../bc9400.../default.jpeg" alt="Description">
</picture>

# app/Models/YourImageModel.php
use MichalDoda\LaravelS3Thumbnail\ThumbnailInterface;
use MichalDoda\LaravelS3Thumbnail\ThumbnailTrait;

class YourImageModel extends Model implements ThumbnailInterface
{
    use ThumbnailTrait;
    
    public function getS3ImagePath(): string
    {
        return $this->path;
    }

    public function getImageAltDescription(): ?string
    {
        return $this->alt;
    }
}

# config/s3-thumbnail.php
'thumbnails' => [
   'article_main' => [
        [
            'max_width' => 'default',
            'quality' => 50,
            'filters' => [
                'resize' => [
                    'width'  => 550,
                ],
            ],
        ],
        [
            'max_width' => 600,
            'quality' => 50,
            'filters' => [
                'resize' => [
                    'width'  => 350,
                ],
            ],
        ],
        // ...
    ],
]

Configuration

/**
 * It is a default Laravel local disk name.
 * If you are using different disk for local purpose then please update the value.
 */
'local_disk' => 'local',
/**
 * It is a default Laravel s3 disk name.
 * If you are using different disk for s3 file system then please update the value.
 */
's3_disk' => 's3',
/**
 * It is a default Laravel public disk name.
 * If you are using different disk for public purpose then please update the value.
 */
'public_disk' => 'public',
/**
 * It will create directory ./storage/app/public/thumbnails.
 * There will be placed all thumbnails generated by the package.
 * If you already use one of the path below then please update the value.
 * ./storage/app/public/thumbnails
 * ./public/storage/thumbnails
 */
'public_path' => 'thumbnails',
/**
 * It will create directory ./storage/app/originals.
 * There will be placed all images retrieved from AWS S3 disk.
 * If you already use path ./storage/app/originals then please update the value.
 */
'originals_path' => 'originals',
/**
 * Default format for thumbnails.
 * Available options: webp, jpeg
 */
'default_format' => 'webp',
/**
 * Default quality for thumbnails.
 * It will be used only if single thumbnail configuration does not have own value.
 */
'default_quality' => 80,
/**
 * Thumbnails configuration.
 */
'thumbnails' => [
    /**
     * Reduce image quality to 70% for all screens
     */
    'article_main' => [
        [
            'max_width' => 'default',
            'quality' => 70,
            'filters' => [],
        ]
    ],
    /**
     * Reduce image quality to 70% for screens viewport > 480px
     * Reduce image quality to 50% for screens viewport <= 480px
     */
    'article_main_another' => [
        [
            'max_width' => 'default',
            'quality' => 70,
            'filters' => [],
        ],
        [
            'max_width' => 480,
            'quality' => 50,
            'filters' => [],
        ],
    ],
    /**
     * Reduce image quality to 70% for all screens
     * Resize to width 550px
     */
    'article_suggestions1' => [
        [
            'max_width' => 'default',
            'quality' => 70,
            'filters' => [
                'resize' => [
                    'width'  => 550,
                ],
            ],
        ],
    ],
    /**
     * Reduce image quality to 70% for all screens
     * Resize to width 650
     * Crop 550x400
     */
    'article_suggestions2' => [
        [
            'max_width' => 'default',
            'quality' => 70,
            'filters' => [
                'resize' => [
                    'width'  => 650,
                ],
                'crop' => [
                    'width' => 550,
                    'height' => 400,
                ],
            ],
        ],
    ],
]

Testing

composer test

License

This package is open-sourced software licensed under the MIT License.