Cloudinary Blog

Compressing, Resizing, and Optimizing Images in Laravel

Compressing, Resizing, and Optimizing Images in Laravel

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

  1. 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
  2. Go to the performance directory and rename the env.example file to .env.

  3. Run the project with the command php artisan serve.

Your Laravel project is now up and running.


Sign up for Cloudinary free today!


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:

  1. Sign up for a free Cloudinary account, log in, and note your cloud name and API keys from the dashboard.

    media library

  2. Install Cloudinary’s Laravel SDK:

    Copy to clipboard
    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

  1. Create a file-upload controller (FileUpload Controller) in your project:

    Copy to clipboard
    php artisan make:controller FileUploadController
  2. Open the FileUploadController.php file and add a method for displaying the upload form:

    Copy to clipboard
    <?php
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    
    class FileUploadController extends Controller
    {
        public function showUploadForm()
        {
            return view('upload');
        }
    }
  3. Create an upload.blade.php file in the resources/views directory and populate the file with the code below:

    Copy to clipboard
    <!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.

  4. 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:

Copy to clipboard
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:

Copy to clipboard
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:

Copy to clipboard
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:

Copy to clipboard
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:

Ruby:
Copy to clipboard
cl_image_tag("eden_group.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("eden_group.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('eden_group.jpg'));
Python:
Copy to clipboard
CloudinaryImage("eden_group.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("eden_group.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("eden_group.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('eden_group.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("eden_group.jpg")
React:
Copy to clipboard
<Image publicId="eden_group.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="eden_group.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="eden_group.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("eden_group.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("eden_group.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("eden_group.jpg")!, cloudinary: cloudinary)
Eden group

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

Ruby:
Copy to clipboard
cl_image_tag("eden_group.jpg", :quality=>"auto")
PHP v1:
Copy to clipboard
cl_image_tag("eden_group.jpg", array("quality"=>"auto"))
PHP v2:
Copy to clipboard
(new ImageTag('eden_group.jpg'))
  ->delivery(Delivery::quality(Quality::auto()));
Python:
Copy to clipboard
CloudinaryImage("eden_group.jpg").image(quality="auto")
Node.js:
Copy to clipboard
cloudinary.image("eden_group.jpg", {quality: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("eden_group.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('eden_group.jpg', {quality: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("eden_group.jpg", {quality: "auto"})
React:
Copy to clipboard
<Image publicId="eden_group.jpg" >
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="eden_group.jpg" >
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="eden_group.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("eden_group.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("eden_group.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("eden_group.jpg")!, cloudinary: cloudinary)
Eden Group Compressed

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

Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

Read more
Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more