Hello, laravel web developers! In this article, we'll see how to compress image size in laravel 11. In laravel 11, we'll compress image size using the composer package. Here, we'll use spatie/image composer package.
Spatie/image allows users to resize, crop, and apply filters to images easily. Also, supports various formats like JPEG, PNG, and GIF.
Laravel 11 Compress Image Size using Spatie/image
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel laravel-11-example
Next, we'll install spatie/image composer package using the following command.
composer require spatie/image
Install all the optimizers on Ubuntu/Debian:
sudo apt-get install jpegoptim
sudo apt-get install optipng
sudo apt-get install pngquant // For PNG Image
sudo npm install -g svgo
sudo apt-get install gifsicle
sudo apt-get install webp
sudo apt-get install libavif-bin # minimum 0.9.3
Install all the optimizers on MacOS:
brew install jpegoptim
brew install optipng
brew install pngquant
npm install -g svgo
brew install gifsicle
brew install webp
brew install libavif
Install all the optimizers on Fedora/RHEL/CentOS:
sudo dnf install epel-release
sudo dnf install jpegoptim
sudo dnf install optipng
sudo dnf install pngquant
sudo npm install -g svgo
sudo dnf install gifsicle
sudo dnf install libwebp-tools
sudo dnf install libavif-tools
Then, we'll define the routes to the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');
Next, we'll create a controller file using the following command.
php artisan make:controller ImageController
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Spatie\Image\Image;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('image-upload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
$this->validate($request, [
'image' => ['required'],
]);
$imageName = time().'.'.$request->image->extension();
Image::load($request->image->path())
->optimize()
->save(public_path('images/'). $imageName);
return back()->with('success', 'You have successfully upload image.')
->with('image', $imageName);
}
}
Note: Create an images folder in the public directory.
Then, we'll create a blade file for the image upload.
resources/views/image-upload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Compress Image Size in Laravel 11 - Websolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"><i class="fa fa-star"></i> How to Compress Image Size in Laravel 11 - Websolutionstuff</h3>
<div class="card-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
<img src="images/{{ Session::get('image') }}">
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputImage">Image:</label>
<input
type="file"
name="image"
id="inputImage"
class="form-control @error('image') is-invalid @enderror">
@error('image')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
In this article, we will show you laravel whereMonth and whereYear examples. whereMonth and whereYear are...
Jan-25-2021
This article will show us how to validate upload file type using javascript. Using this post we can easily check the sel...
Aug-03-2020
Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation erro...
Mar-08-2024
In This small tutorial, I will explain to you how to validate a 10-digit mobile number using regular expressions in...
Jun-15-2020