MooseSaid's avatar

Images Optimization With Laravel

I'm building a platform where people can upload product images, I have used Laravel Image Optimizer's middleware to automatically optimize any image uploaded in specific routes.

    // automatically optimize images
    Route::middleware('optimizeImages')->group(function () {
        Route::post('products/create', [ProductController::class, 'store'])->name('products.create');
        Route::post('webshops/create', [WebshopController::class, 'store'])->name('webshops.create');
    });

Now according to the docs for the package, Since I added their middleware in the Karnel 's $routeMiddleware it should optimize automatically any image uploaded in those routes.

My questions are:

1- I found Laravel-webp which converts all images to Webp and I think Webp is the perfect option for any web app since it's really small sized files. Should I use this package to convert all images to webp and then use laravel image optimizer's middleware to optimize the images?

2- Since laravel image optimizer package doesn't work unless I install image optimization tools, how can I test it on windows local server? how would I know it works?

3- If it's still a small project, is it okay to store images in database? Or should it be S3 free plan?

0 likes
10 replies
Sinnbeck's avatar
Sinnbeck
3 years ago
Best Answer
Level 102
  1. You can safely use it nowadays. The support is pretty good: https://caniuse.com/webp So its mostly up to you if you want to :) Just make sure the spatie optimizer works with webp
  2. I cannot think of a way to test it without setting up a more "advanced" dev environment. If you really want to test it you can use wsl2 to install ubuntu and run it on there (or use docker)
1 like
MooseSaid's avatar

@Sinnbeck Yes the Spatie optimizer has webp support under the condition that I have a specific tool they mentioned installed in the server. I think I will go with converting all images to webp and then optimize them. But this leaves me with 2 questions.

1- Laravel-webp package mentions that it supports 2 drivers (php-gd and cwebp), Are those things to install on server when I start deploying my app?

2- If I use Laravel-webp package to convert images to webp, would this action take place after the middleware for the other package run? So it will be -> Image optimized by the middleware and then converted to webp in controller?

Sinnbeck's avatar

@moosesaid

  1. I would go with gd. It's a breeze to install and most image packages use it
  2. If you want to use both, I think you need to do it in the controller as the first one does not support middleware (unless you add this yourself). You could create an action that you call in the controller that does both
1 like
MooseSaid's avatar

@Sinnbeck Got it, So gd-php is something to install on server when I start deploying correct? Not during development or local server.

Sinnbeck's avatar

@MooseSaid it's something you install once. It's the sake as php-mbstring or similar which is needed to run laravel. My guess is that it's already installed. Run php -m on the server to check

MooseSaid's avatar

Didn't find it on local server on windows. But that's not a problem, Will ensure installing it when I deploy to digital ocean with Forge. Thanks for all the help @sinnbeck ! :)

Sinnbeck's avatar

@MooseSaid I bet forge installs it as it is quite common :) Just ssh into the server and run php -m

And Im sure you can enable it in php.ini on windows :)

Happy to help!

1 like
MooseSaid's avatar

@Sinnbeck I'm thinking of ignoring those 2 packages and use spatie media library as it has optimization + converting + responsive images srcset

The only question is how to display responsive images in a Vue component. They provide helpers for blade components but I'm using Vue with Inertia.

The way they explained it in the docs for blade is like this:

{{-- in a Blade view --}} 
<h1>My responsive images</h1>
 {{ $yourModel->getFirstMedia() }}

So I'm wondering how can I pass this to a Vue component and make is parse HTML same as the package would do for a blade component. Would you like this in a new thread? I feel it belongs here.

Sinnbeck's avatar

@MooseSaid sadly I have no knowledge of vue. My suggestion would be to make a fresh thread dedicated to that specific question :)

Please or to participate in this conversation.