Cloudinary Blog

Compressing, Resizing, and Optimizing Images in Laravel

By Sep 30, 2020

Since performance is by and large the holy grail of software development, tools abound for building fast software, notably those for optimizing online media, most of which are images and videos. Optimization in this context means downsizing the media files but maintaining a satisfactory level of visual quality for delivery. The smaller those files are, the faster your website loads.

This article shows you how to optimize images in Laravel.

Set Up a Laravel Project

Install Composer and PHP on your development or production machine and then run this command:
Copy to clipboard
composer create-project --prefer-dist laravel/laravel performance
Go to the performance directory and rename the env.example file to .env.
Run the project with the command php artisan serve.

Your Laravel project is now up and running.

Set Up Cloudinary’s Laravel SDK

With Cloudinary, you can efficiently optimize media assets—regardless of programming language. One reason is that, by default, Cloudinary automatically performs certain optimization steps on all transformed images. Plus, its integrated, fast-delivery capability through content delivery networks (CDNs) ensures that your images are seamlessly displayed on your viewers’ devices.

To enable file uploads and optimization with Cloudinary:

Install Cloudinary’s Laravel SDK:

composer require cloudinary-labs/cloudinary-laravel

Important: Be sure to follow the steps in the #Installation section. Publish the configuration file and add your Cloudinary credentials to the .env file of your app.

Set Up the Mechanics for File Uploads

Create a file-upload controller (FileUpload Controller) in your project:
Copy to clipboard
php artisan make:controller FileUploadController

Open the FileUploadController.php file and add a method for displaying the upload form:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function showUploadForm()
    {
        return view('upload');
    }
}

Create an upload.blade.php file in the resources/views directory and populate the file with the code below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel File Upload</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- Styles -->
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="title m-b-md">
                Laravel File Upload
            </div>

            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                </div>
            @endif

            <div class="links">
                 <form action="/upload" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-md-6">
                            <input type="file" name="image" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <button type="submit" class="btn btn-success">Upload a File</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

On a successful upload, the code above displays the form along with a confirmation message. Concurrently, the code posts the form data to an /upload route in the routes/web.php file.

Note: You'll see the related code later in this post.

Go to the routes/web.php directory and add two routes: one to display the form and the other to process the file upload:
Copy to clipboard
Route::get('/upload', 'FileUploadController@showUploadForm'); Route::post('/upload', 'FileUploadController@storeUploads');

Now reload the app and go to the /upload route. This page is then displayed:

Laravel File upload

Compress and Resize Images On Upload

Create an upload method in the FileUploadController.php file to ensure that compression and resizing of user-uploaded images occur by default on upload.

The code below resizes an image to 100 pixels in both width and height:

public function upload(Request $request)
{
     $resizedImage = cloudinary()->upload($request->file('image')->getRealPath(), [
            'folder' => 'uploads',
            'transformation' => [
                      'width' => 100,
                      'height' => 100
             ]
])->getSecurePath();

    dd($resizedImage);
}

The code below resizes an image through smart cropping:

public function upload(Request $request)
{
     $resizedImage = cloudinary()->upload($request->file('image')->getRealPath(), [
            'folder' => 'uploads',
            'transformation' => [
                      'width' => 100,
                      'height' => 100,
              ‘crop’ => ‘limit’
             ]
])->getSecurePath();

dd($resizedImage);
}

The code below, slated for images with people, focuses on those people through cropping and resizing:

public function upload(Request $request)
{
     $resizedImage = cloudinary()->upload($request->file('image')->getRealPath(), [
            'folder' => 'avatar',
            'transformation' => [
                      'width' => 250,
                      'height' => 250,
              ‘gravity’ => ‘faces’,
              ‘crop’ => ‘fill’
             ]
])->getSecurePath();

    dd($resizedImage);
}

Optimize Images On Upload

The code below compresses and optimizes an image:

public function upload(Request $request)
{
     $compressedImage = cloudinary()->upload($request->file('image')->getRealPath(), [
            'folder' => 'uploads',
            'transformation' => [
                      'quality' => auto,
                      'fetch_format' => auto
     ]
])->getSecurePath();
dd($resizedImage);
}

Setting the auto value for the fetch_format and quality attributes automatically compresses and optimizes the image in the best way, balancing its visual quality.

Note: As a rule, with fetch_format and quality set to auto, Cloudinary picks WebP or JPEG-XR as the display format for Chrome or IE, respectively. However, if the quality algorithm determines that PNG-8 or PNG-24 is optimal, Cloudinary might pick either of them for display.

Here’s the original, uncompressed picture with a size of 2.58 MB:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/v1565124833/eden_group.jpg

Ruby:

cl_image_tag("eden_group.jpg")

PHP v1:

cl_image_tag("eden_group.jpg")

PHP v2:

(new ImageTag('eden_group.jpg'));

Python:

CloudinaryImage("eden_group.jpg").image()

Node.js:

cloudinary.image("eden_group.jpg")

Java:

cloudinary.url().imageTag("eden_group.jpg");

JS:

cloudinary.imageTag('eden_group.jpg').toHtml();

jQuery:

$.cloudinary.image("eden_group.jpg")

React:

<Image publicId="eden_group.jpg" >

</Image>

Vue.js:

<cld-image publicId="eden_group.jpg" >

</cld-image>

Angular:

<cl-image public-id="eden_group.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("eden_group.jpg")

Android:

MediaManager.get().url().generate("eden_group.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("eden_group.jpg")!, cloudinary: cloudinary)

Here’s the compressed version with a size of 918 KB:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/q_auto/eden_group.jpg

Ruby:

cl_image_tag("eden_group.jpg", :quality=>"auto")

PHP v1:

cl_image_tag("eden_group.jpg", array("quality"=>"auto"))

PHP v2:

(new ImageTag('eden_group.jpg'))
  ->delivery(Delivery::quality(Quality::auto()));

Python:

CloudinaryImage("eden_group.jpg").image(quality="auto")

Node.js:

cloudinary.image("eden_group.jpg", {quality: "auto"})

Java:

cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("eden_group.jpg");

JS:

cloudinary.imageTag('eden_group.jpg', {quality: "auto"}).toHtml();

jQuery:

$.cloudinary.image("eden_group.jpg", {quality: "auto"})

React:

<Image publicId="eden_group.jpg" >
  <Transformation quality="auto" />
</Image>

Vue.js:

<cld-image publicId="eden_group.jpg" >
  <cld-transformation quality="auto" />
</cld-image>

Angular:

<cl-image public-id="eden_group.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("eden_group.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("eden_group.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("eden_group.jpg")!, cloudinary: cloudinary)

The two pictures look the same even though the second one has undergone compression that reduced its size by almost 2 MB.

Leverage More Cloudinary Capabilities

Cloudinary helps you administer the entire spectrum of your media’s lifecycle, end to end, from upload and transformation to optimization and delivery. Do check it out.

Want to Learn More About Laravel?

Recent Blog Posts

Supercharge Shopify Conversions and Revenue with Cloudinary

By Aug 19, 2022

Our $2B Valuation

By Feb 17, 2022

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal Feb 02, 2022

Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Automatically Translating Videos for International Outreach

By Jan 26, 2022

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Minted Delivers High-quality Art at Scale with Cloudinary

By Jan 25, 2022

Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By Jan 24, 2022

Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.