Laravel Tutorials

Resize Images in Laravel 9 Before Uploading to Server

Throughout this tutorial, you will learn how to create resize image functionality in the Laravel application.

Laravel resizes the image before the upload is the primary topic that has been asked by many novice developers.

Fret not; in this tutorial, we will help you understand the entire concept of laravel generate thumbnail images without putting extra effort to resize and upload images in the laravel project.

Laravel Image Intervention example will also be explained in this step-by-step guide. You will learn to use the intervention/image package for resizing the image in laravel; this will also help you clear the doubts about resizing the image in laravel.

Intervention package follows the FIG standard PSR-2 to ensure a high level of interoperability between shared PHP code; this Image library is a powerful open-source PHP image handling and manipulation package.

It offers facile and meaningful methods to create, edit, and compose images and currently supports the two most common image processing libraries GD Library and Imagick.

It allows you to control PHP image manipulating easier; not just that, you can also create image thumbnails, watermarks, or format large image files.

Create Laravel App

A brand new or existing laravel application is required to build the laravel image resize feature.

composer create-project laravel/laravel --prefer-dist laravel-image-resize-example

Install Intervention Image Library

Image resizing in Laravel application needs to have intervention/image library installed; simultaneously, it allows you to generate a thumbnail image.

composer require intervention/image

The next step is to inject intervention class altogether in providers and aliases array inside the config/app.php configuration file.

return [

    $provides => [



    $aliases => [

        'Image' => Intervention\Image\Facades\Image::class



Create New Controller

Inside the controller file, you can create the functions to handle the image resizing in Laravel or manifesting the blade view for the file upload component.

php artisan make:controller FileController

Head over to app/Http/Controllers/FileController.php file, place the following code within:


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Image;

class FileController extends Controller
     * Init view.
    public function index()
        return view('welcome');
     * Image resize
    public function imgResize(Request $request)
        $this->validate($request, [
            'name' => 'required',
            'imgFile' => 'required|image|mimes:jpg,jpeg,png,svg,gif|max:2048',
        $image = $request->file('imgFile');
        $input['imagename'] = time().'.'.$image->extension();
        $filePath = public_path('/thumbnails');

        $img = Image::make($image->path());
        $img->resize(110, 110, function ($const) {
        $filePath = public_path('/images');
        $image->move($filePath, $input['imagename']);
        return back()
            ->with('success','Image uploaded')

Build Routes

To create routes you need to import the controller and add the following code in routes/web.php file:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;
| Web Routes
Route::get('/', [FileController::class, 'index']);
Route::post('/image-resize', [FileController::class, 'imgResize'])->name('img-resize');

Create Blade View

Create, or you might also use the existing welcome blade view file, afterward add the following code in resources/views/welcome.blade.php file:

Also, create images equally important thumbnails folders in the public directory.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <title>Laravel Image Resize Example</title>
    <link rel="stylesheet" href="">


    <div class="container mt-5">
        @if (count($errors) > 0)
        <div class="alert alert-danger">
            Error occured.<br><br>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>

        @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <strong>{{ $message }}</strong>
        <div class="row">
            <div class="col-md-4">
                <h3>Primary Image:</h3>
                <img src="/images/{{ Session::get('fileName') }}" />
            <div class="col-md-4">
                <img src="/thumbnails/{{ Session::get('fileName') }}" />

        <form action="{{ route('img-resize') }}" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <input type="text" name="name" class="form-control" placeholder="Name">
            <div class="form-group">
                <input type="file" name="imgFile" class="imgFile">
            <div class="form-group">
                <button type="submit" class="btn btn-success">Save</button>



At last, make sure your application is working fine, so run the command to start the project.

php artisan serve

Thats it for now; you have seen how to resize an image and keep it in the images and thumbnails folder.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago