Laravel Image Intervention Resizing

Hi,

In one of my blade views of my project, I have an input where the user can upload an image. When storing the image in my project's storage folder (online), I want to resize the image uploaded.

After visiting some forums, I went for the Image intervention package.

This is how I am resizing the image:

use Intervention\Image\Facades\Image;
use Illuminate\Support\Facades\Storage;

Part of the image storing/resizing function:

// Check if an image has been chosen and save to DB
        if($request->hasFile('image')) {
            $image = $request->file('image');
            $path = public_path('../storage/uploads/iotpark/warranty/');
            $filename = $id . '_' . $device->sigfox_transceiver_id . '_' . time() . '.' . $image->getClientOriginalExtension();
            // Image resizing
            $img = Image::make($image->getRealPath());
            $img->resize(500, 500, function ($constraint) {
                $constraint->aspectRatio();
            })->save($path.$filename);
            
            $device->warranty_photo = $filename;
            $device->save();
            $message = 3;
        }

Could someone explain how the resizing function works exactly please?

What is the best way to decide what resizing parameters to choose?
How does this affect uploaded images of different sizes and ratios?
Is there a way to compress the image instead of resizing it?

Thank you in advance for your suggestions :)

Brian

laracoft

5 years ago

Level 27

@briana

Resizing depends on the medium the image is targeted at. Leaving high density displays aside, 500 by 500 is generally sufficient for photos for articles
If you are going for print, you probably want it to be of higher resolution to meet 300 dpi (dots per inch).
Generally, the higher the width and height, the bigger the file byte size.
File formats also play a part, PNGs are bigger, JPGs are usually smaller in file byte size.
Saving it as JPEG can involve lossy compression, i.e. your compressed image is slightly different from the original

1 like

drehimself

5 years ago

Level 35

Hmm, this depends on your app. In general, you want to save the image at a size that is required and not over. For example, if it's only a thumbnail then it doesn't have to be that big.

Different sizes and ratios of images can affect other images if you display them in a grid for example. If they are all the same ratio, it will look a bit cleaner.

Intervention image has an option to save your image at a certain quality: http://image.intervention.io/api/save

1 like

Snapey

5 years ago

Level 122

I would recommend that you have a look at Spatie media library.

It will allow you to retain images at different sizes so that you can use the image size that is correct for the situation, or use srcset so that the browser can decide for itself what image size to request

https://spatie.be/docs/laravel-medialibrary/v8/introduction

https://youtu.be/3eyftAR5ilo

2 likes

BrianA

5 years ago

Level 1

Hi :)

Thank you for the information and for your recommendations. I will go through them and decide what might be the best for my application.

In my case, I have section where admins can upload photographs of damaged devices which are returned back by the client. These are stored in a folder within the project so that admins can refer to the photographs at any time, or to show them to the clients and explain what might be the cause.

This means that I must find a compromise between image quality and byte size. Damages/features must remain recognizable while minimizing the file byte size (due to the large number of image that might accumulate over time).

Brian

Please or to participate in this conversation.