Resizing Images in Laravel 11 with Intervention Image

In web development, managing images efficiently is crucial for both performance and user experience. One common task is resizing images to ensure they load quickly and display correctly across various devices and screen sizes. This is where the Intervention Image package in Laravel comes into play. It provides a simple and expressive way to handle image manipulation, including resizing, cropping, and more.

Why Image Resizing is Important

1. Performance: Large images can significantly slow down your website, leading to longer load times and poor user experience. Resizing images to appropriate dimensions helps reduce file sizes, improving load times and overall site performance.
2. Responsive Design: With the variety of devices and screen sizes used today, it’s essential to serve images that fit well on any screen. Resizing images ensures they look good and load efficiently on desktops, tablets, and mobile devices.
3. Bandwidth Savings: Smaller image files consume less bandwidth, which is beneficial for both the server hosting the website and users with limited data plans.
4. SEO Benefits: Faster-loading websites tend to rank higher in search engine results. By optimizing images through resizing, you can enhance your site’s SEO performance.

Intervention Image Package

The Intervention Image package is a powerful and easy-to-use image manipulation library for PHP, which integrates seamlessly with Laravel. It provides a fluent interface for creating, editing, and composing images, making it an excellent choice for web developers who need to handle image processing tasks efficiently.

Benefits of Using Intervention Image in Laravel

1. Ease of Use: The package offers a simple and expressive syntax, allowing developers to perform complex image manipulations with minimal code.
2. Comprehensive Features: It supports a wide range of image manipulation functions, including resizing, cropping, rotating, and adding watermarks.
3. Integration with Laravel: Intervention Image integrates smoothly with Laravel, leveraging Laravel’s service container and facades, which simplifies configuration and usage.
4. Support for Multiple Image Formats: It can handle various image formats such as JPEG, PNG, GIF, and more, ensuring compatibility with different types of image files.
5. Chainable Methods: The fluent interface allows for chaining methods, making the code more readable and maintainable.
6. Community and Documentation: With a strong community and comprehensive documentation, developers can easily find support and resources to help them implement image manipulation features.

PHP Extensions

Visit the Official Website: Go to the Intervention Image website.

Select Intervention Image: Choose the Intervention Image package, which will show you the latest version (version 3).

Check Server Requirements: In the left sidebar, navigate to the Installation section and then to the Server Requirements. Here, you’ll see that PHP version 8.1 or higher is required.

Upgrade PHP: If your PHP version is below 8.1, upgrade it to meet the requirements. If you already have PHP 8.1 or higher, you’re good to go.

Install the Package: After ensuring your PHP version meets the requirements, run the following command to install the Intervention Image package:

composer require intervention/image

This command will install the latest version of the Intervention Image package.

Now lets move onto the codes which need to be written

Step 1: Create Controller

Generate Controller: Create a new controller for handling image uploads:

php artisan make:controller ImageController

ImageController.php file

There are two functions , index() and storeImage().

index()  => It shows the blade file named resize-image.

storeImage() => This function validates the input from the form in the blade file, then creates a file name in $fileName variable, then stores it in the device at the specified path in $path variable.

Then ImageManager is used to manipulate the image,

Here, we are reading the file in the $image variable, then changing its filetype to jpeg, with 80% compression.

Then $filePath variable is used to store the value of the image in the database which basically contains the path of the image.

As successful creation is done, redirect to the same page with success message.

Step2 : Create Model and migration filesGenerate Model: Create a new model

php artisan make:model Image -m

This command will create a model and the migration file.
The model is as below:

The migration file is as below:

Run the command given as below to migrate the table into the database which you have created:
php artisan migrate

Step 3: Create a blade file

In the resources/views/
create a blade file with name of your choice, for now the name of blade file is resize-image.blade.php .

So the path of blade file is resources/views/resize-image.blade.phpThe blade file is as follows:

Step4: Create routes

To create routes, navigate to the routes/web.php file in the project of laravel.

The routes file looks like this:

Now to view the form you need to run the command,

php artisan serve.

which in turn gives the link as : http://127.0.0.1:8000

http://127.0.0.1:8000/image.

The view is :

Step 5: Now submit the form by clicking the upload button after choosing the file to be

uploaded

The view would look like this:

Now, after uploading image, you can see the resized image in the path given below:

public/uploads/images

where the view would be like this

Step 6 : Go the original image where you stored it and open it in the image editor and similarly go to the path mentioned in the above image and open it in the editor.

Then in its properties, compare both the images’ size, quality of both would be the same but size of the image would be less compared to the original one.

Summary:
In this blog post, we’ve explored how to resize images in Laravel 11 using the Intervention Image package. We covered the installation and configuration of Laravel and the Intervention Image package, the necessary PHP extensions, and provided a step-by-step guide to creating routes, controllers, and views for image upload and resizing. Additionally, we discussed how to display both the original and resized images side by side.

By following these steps, you can efficiently manage and manipulate images in your Laravel applications, enhancing performance and user experience. Whether you’re building a personal project or a professional web application, mastering image resizing will be a valuable skill in your development toolkit.

Happy coding! 😊