Ability to optimize/replace the original image

[fabiomlferreira]

I've been using Laravel Media Library a lot and it's super useful. But, I noticed we can't optimize the original images we upload. Right now, we can only do stuff to the extra images, not the main one we upload. This can be a bit of a pain, especially with large images that take up lots of space and slow down loading times.

What I'm Thinking:
It would be awesome if we could have a feature to automatically optimize the original image right when we upload it. Like, compressing it and maybe resizing, but still keeping it looking good. Also, it'd be great if we could decide how much we want to compress or resize.

Why It's Cool:

Websites would load faster, which is always great.
We'd save on storage space, which is a big plus.
Plus, it's better for the environment since smaller images mean less data moving around.
Bottom Line:
Adding this feature would make Laravel Media Library even better, especially for those of us dealing with lots of images. Thanks for considering this!

[bert-w]

Yes same issue here; adding conversions seems to only apply to new copies of the original image. So I cannot for instance tell spatie-media to save the original image as max-width=1000px.

I guess you could do some pruning tasks behind the scenes that rescales them but it is kinda odd that you cannot define conversions for the original upload (before it is being stored).

[freekmurze]

To me it seems quite trivial to do these sorts of optimisations before adding the file to the media library.

Image::load($pathToImage)->fit(Fit::Max, 2000, 2000)->optimize()->save();

See:
https://spatie.be/docs/image/v3/image-manipulations/resizing-images
https://spatie.be/docs/image/v3/image-manipulations/optimizing-images

[bert-w]

Ah I'm using the Filament wrapper here https://filamentphp.com/plugins/filament-spatie-media-library but it seems I only have access to the manipulations i.e. https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/storing-media-specific-manipulations.

But these only apply to the "conversions" like thumb/sm/lg and not to the root file (I've tried the '*' key but it applies them to just the conversions as stated in the docs).

The filament wrapper is literally doing the following:

// Spatie\MediaLibrary\MediaCollections\FileAdder
$mediaAdder = $record->addMediaFromString($file->get());

$filename = $component->getUploadedFileNameForStorage($file);

$media = $mediaAdder
->addCustomHeaders($component->getCustomHeaders())
->usingFileName($filename)
->usingName($component->getMediaName($file) ?? pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME))
->storingConversionsOnDisk($component->getConversionsDisk() ?? '')
->withCustomProperties($component->getCustomProperties())
->withManipulations($component->getManipulations())
->withResponsiveImagesIf($component->hasResponsiveImages())
->withProperties($component->getProperties())
->toMediaCollection($component->getCollection(), $component->getDiskName());

@freekmurze Is there a way to make this work through the FileAdder or perhaps a method on an Eloquent model?

My use case is to decrease the size of big items like 5000x5000 pixels. I could work around it by decreasing the file afterwards using an event hook (like Events\MediaHasBeenAdded but preferably it happens before-save for which i cannot find an event in the code) but its not ideal (above all its a disk space issue).

[fabiomlferreira]

@freekmurze, you are right; optimizing images before adding them to the media library is straightforward. However, I find it slightly odd to have to do this everywhere. Your extension is amazing, and I believe a cleaner approach would be to configure those settings directly in the registerMediaCollections method.

Letting the media library handle everything centrally will aid in the future maintenance of the code since everything is consolidated in one place.

[freekmurze]

I think it's also trivial to do this in a centralised way in your app. You could for instance create a trait that add an addOptimizedMedia function to your models.

namespace App\Models\Concerns;

use Exception;
use Spatie\Image\Image;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\FileAdder;
use Spatie\MediaLibrary\MediaCollections\FileAdderFactory;
use Symfony\Component\HttpFoundation\File\UploadedFile;

trait InteractsWithOptimizedMedia
{
    use InteractsWithMedia;
    
    public function addOptimizedMedia(string|UploadedFile $file): FileAdder
    {
        try {
            Image::load($file)
                ->optimize()
                ->fit(Fit::Max, 2000, 2000)
                ->save();
        } catch (Exception) {
            
        }
        
        app(FileAdderFactory::class)->create($this, $file);
    }
}

Alternatively, you could also introduce some sort of action class AddMediaAction that contains the logic to add media in an optimised way.

[projct1]

How can you remove the original after saving without using crutches?
I no longer need him, since I already have an optimized image in the conversions folder.