Generating your own tiny placeholder | laravel-medialibrary | Spatie

 SPATIE

  Laravel Media Library
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v11)  Responsive-images  Generating your own tiny placeholder

 Version   v11   v10   v9   v8   v7   v6   v5   v4   v3

 Other versions for crawler [v11](https://spatie.be/docs/laravel-medialibrary/v11) [v10](https://spatie.be/docs/laravel-medialibrary/v10) [v9](https://spatie.be/docs/laravel-medialibrary/v9) [v8](https://spatie.be/docs/laravel-medialibrary/v8) [v7](https://spatie.be/docs/laravel-medialibrary/v7) [v6](https://spatie.be/docs/laravel-medialibrary/v6) [v5](https://spatie.be/docs/laravel-medialibrary/v5) [v4](https://spatie.be/docs/laravel-medialibrary/v4) [v3](https://spatie.be/docs/laravel-medialibrary/v3)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v11/introduction)
- [ Support us ](https://spatie.be/docs/laravel-medialibrary/v11/support-us)
- [ Base installation ](https://spatie.be/docs/laravel-medialibrary/v11/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-medialibrary/v11/questions-issues)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary/v11/requirements)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary/v11/upgrading)
- [ Changelog ](https://spatie.be/docs/laravel-medialibrary/v11/changelog)
- [ Troubleshooting ](https://spatie.be/docs/laravel-medialibrary/v11/troubleshooting)
- [ About us ](https://spatie.be/docs/laravel-medialibrary/v11/about-us)

Basic usage
-----------

- [ Preparing your model ](https://spatie.be/docs/laravel-medialibrary/v11/basic-usage/preparing-your-model)
- [ Associating files ](https://spatie.be/docs/laravel-medialibrary/v11/basic-usage/associating-files)
- [ Retrieving media ](https://spatie.be/docs/laravel-medialibrary/v11/basic-usage/retrieving-media)

Working with media collections
------------------------------

- [ Simple media collections ](https://spatie.be/docs/laravel-medialibrary/v11/working-with-media-collections/simple-media-collections)
- [ Defining media collections ](https://spatie.be/docs/laravel-medialibrary/v11/working-with-media-collections/defining-media-collections)

Converting images
-----------------

- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v11/converting-images/defining-conversions)
- [ Retrieving converted images ](https://spatie.be/docs/laravel-medialibrary/v11/converting-images/retrieving-converted-images)
- [ Optimizing converted images ](https://spatie.be/docs/laravel-medialibrary/v11/converting-images/optimizing-converted-images)
- [ Regenerating images ](https://spatie.be/docs/laravel-medialibrary/v11/converting-images/regenerating-images)

Responsive images
-----------------

- [ Getting started with responsive images ](https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/getting-started-with-responsive-images)
- [ Using your own width calculator ](https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/using-your-own-width-calculator)
- [ Customizing the rendered HTML ](https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/customizing-the-rendered-html)
- [ Generating your own tiny placeholder ](https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/generating-your-own-tiny-placeholder)
- [ Responsive images demo ](https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/demo)

Converting other file types
---------------------------

- [ Using image generators ](https://spatie.be/docs/laravel-medialibrary/v11/converting-other-file-types/using-image-generators)
- [ Creating a custom image generator ](https://spatie.be/docs/laravel-medialibrary/v11/converting-other-file-types/creating-a-custom-image-generator)

Downloading media
-----------------

- [ Downloading a single file ](https://spatie.be/docs/laravel-medialibrary/v11/downloading-media/downloading-a-single-file)
- [ Downloading multiple files ](https://spatie.be/docs/laravel-medialibrary/v11/downloading-media/downloading-multiple-files)

Advanced usage
--------------

- [ Working with multiple filesystems ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/working-with-multiple-filesystems)
- [ Using custom properties ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-custom-properties)
- [ Storing media specific manipulations ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/storing-media-specific-manipulations)
- [ Using your own model ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-your-own-model)
- [ Outputting media ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/outputting-media)
- [ Rendering media ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/rendering-media)
- [ Using a custom directory structure ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-a-custom-directory-structure)
- [ Using a custom file removal strategy ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-a-custom-file-removal-strategy)
- [ Ordering media ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/ordering-media)
- [ Using a custom media downloader ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-a-custom-media-downloader)
- [ Moving media ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/moving-media)
- [ Consuming events ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/consuming-events)
- [ Attaching media in mails ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/attaching-media-in-mails)
- [ Generating custom URLs ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/generating-custom-urls)
- [ Overriding default filesystem behavior ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/overriding-the-default-filesystem-behaviour)
- [ Naming generated files ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/naming-files)
- [ Disable CDN ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/disable-cdn)
- [ Customising Database Connections ](https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/customising-database-connections)

API
---

- [ Adding files ](https://spatie.be/docs/laravel-medialibrary/v11/api/adding-files)
- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v11/api/defining-conversions)

 Generating your own tiny placeholder
====================================

When generating responsive images, the media library will generate a tiny version of your image which will be used for [progressive image loading](/docs/laravel-medialibrary/v11/responsive-images/getting-started-with-responsive-images#progressive-image-loading). By default, this tiny version will be a blurred version of the original.

You can customize how the tiny version of the image should be generated. Maybe you want to just use the dominant color instead of blur. In the `responsive_images.tiny_placeholder_generator` of the `media-library` config file you can specify a class that implements `Spatie\MediaLibrary\ResponsiveImages\TinyPlaceholderGenerator`. This interface only requires you to implement one function:

```
public function generateTinyPlaceholder(string $sourceImagePath, string $tinyImageDestinationPath);
```

`$sourceImagePath` contains the path of the image where you should generate a tiny representation for. The generated tiny image should be saved at `$tinyImageDestinationPath`. This tiny image should be a `jpg`.

Here's an example implementation that generates a blurred version:

```
namespace App;

use Spatie\Image\Image;

class Blurred implements TinyPlaceholderGenerator
{
    public function generateTinyPlaceholder(string $sourceImagePath, string $tinyImageDestinationPath)
    {
        $sourceImage = Image::load($sourceImagePath);

        $sourceImage->width(32)->blur(5)->save($tinyImageDestinationPath);
    }
}
```