Resize Image In Laravel Using Intervention Image Library

Recently one of our readers asked how to resize the image in Laravel. Image resizing is a very common task in web development. It’s a good practice to use the images as per container size. It helps you to improve your page speed. In this article, we study how to resize the image in Laravel using Intervention Image library.

We are going to use Intervention Image library which provides an easy way to resize your images. This library uses GD Library and Imagick for image manipulation under the hood.

Why Should Resize Images?

Let’s take an example of a gallery. While working on a gallery, we normally display the small thumbnail in the listing. When someone clicks on the thumbnail then we show a large portion of the image. The thumbnails are the resized version of your original image.

Let’s say our original image size is 500*500 and our thumbnail container is 200*200. In this case, we should resize our original image as per thumbnail container. Using a large size image in the small container is a bad practice. It also affects your website performance.

This is one example of why should we resize the images for the website. There are many others as well. Having said that, let’s take a look at how to resize the image using the Intervention Image library.

Installation

At first, we need to install the Intervention Image library in Laravel. You should have Composer installed on your system. Open the terminal in your project root directory and run the command below:

After installing the library, open config/app.php file and add the following lines in it.

Add the service providers for this package in the $providers array.

Next add the facade to the $aliases array.

Resize Image In Laravel

For resizing image, we need to first write code for uploading an image. We need to create a directory where we store all uploaded files. Head over to the terminal and run the command as follows:

 

This command creates a storage directory under the public folder. In the storage folder, we will store our uploaded images full and thumbnail versions.

Now, let’s create a form in our view file.

In our controller, we need to add our library facade ‘Image’ which we have added in our config/app.phpfile.

 

By adding the facade, we are able to call functions of Intervention Image library. In the below code, we will upload our file in two places. One is the original image. The second one is under the thumbnail directory. We first upload the original image in the thumbnail folder and then resize it.

 

Here we are resizing the image proportionally. Doing so, we keep the aspect ratio and image will not cut off. We are passing width as 400 and height as 150. You can change these values as per your requirement.

If you are looking for hard crop then replace below lines

With

We hope you may learn about resizing the image in Laravel using Intervention Image library. Please share your thoughts in the comment section below.

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Gửi email cho tôi

Hotline
0396.504.701
GÓP Ý
CỦA BẠN
Hotline
0396.504.701
ĐĂNG KÝ
NHẬN THÔNG TIN