{"id":22179,"date":"2020-09-30T15:51:25","date_gmt":"2020-09-30T15:51:25","guid":{"rendered":"http:\/\/compressing_resizing_and_optimizing_images_in_laravel"},"modified":"2025-02-08T13:09:36","modified_gmt":"2025-02-08T21:09:36","slug":"compressing_resizing_and_optimizing_images_in_laravel","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/compressing_resizing_and_optimizing_images_in_laravel","title":{"rendered":"Compressing, Resizing, and Optimizing Images in Laravel"},"content":{"rendered":"

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.<\/p>\n

This article shows you how to optimize images in Laravel<\/a>.<\/p>\n

Set Up a Laravel Project<\/h2>\n
    \n
  1. \n

    Install Composer<\/a> and PHP<\/a> on your development or production machine and then run this command:<\/p>\n

    composer create-project --prefer-dist laravel\/laravel performance\n<\/code><\/span><\/pre>\n<\/li>\n
  2. \n
    Go to the performance<\/code> directory and rename the env.example<\/code> file to .env<\/code>.<\/p>\n<\/li>\n
  3. \n
    Run the project with the command php artisan serve<\/code>.<\/p>\n<\/li>\n<\/ol>\n
    Your Laravel project is now up and running.<\/p>\n
    Set Up Cloudinary\u2019s Laravel SDK<\/h2>\n
    With Cloudinary, you can efficiently optimize media assets\u2014regardless 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\u2019 devices.<\/p>\n
    To enable file uploads and optimization with Cloudinary:<\/p>\n
      \n
    1. \n
      Sign up<\/a> for a free Cloudinary account, log in, and note your cloud name and API keys from the dashboard.<\/p>\n
      \"media<\/p>\n<\/li>\n
    2. \n
      Install Cloudinary\u2019s Laravel SDK<\/a>:<\/p>\n
      composer require cloudinary-labs\/cloudinary-laravel\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
      Important:<\/strong> Be sure to follow the steps in the #Installation section. Publish the configuration file and add your Cloudinary credentials to the .env<\/code> file of your app.<\/p>\n
      \nUsing Intervention Image Library for Compression<\/span><\/strong>\n<\/p>\n
      \nAnother approach to compressing images in Laravel is by adding the namespace use Intervention\\Image\\ImageManagerStatic<\/strong> as Image to your controller. Once added, you can utilize the following code when the file type is an image:\n<\/p>\n
      $s3 = Storage::disk('s3');\n<\/pre>\n
      \nThis method compresses images to 1\/4th of their actual size.\n<\/p>\n
      \nTinyPNG for Image Compression<\/strong>\n<\/p>\n
      \nYou can also compress images using TinyPNG. After installing the package, you can write a code that compresses the uploaded image using TinyPNG. This compression code should be placed just below the line which uploads the image.\n<\/p>\n
      \nOptimizing Images with ImageOptimizer Package<\/strong>\n<\/p>\n
      \nFor further optimization, consider using the ImageOptimizer package. This package can automatically detect the mime type and choose the best optimizer for an image. Here’s a sample code for its usage:\n<\/p>\n
      ImageOptimizer::optimize($pathToImage, $pathToOptimizedImage);\n<\/pre>\n
      \nIf you use a second parameter, the package will not modify the original, preserving its integrity.\n<\/p>\n
      Set Up the Mechanics for File Uploads<\/h2>\n
        \n
      1. \n
        Create a file-upload controller (FileUpload Controller<\/code>) in your project:<\/p>\n
        php<\/span> artisan<\/span> make<\/span>:controller<\/span> FileUploadController<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
      2. \n
        Open the FileUploadController.php<\/code> file and add a method for displaying the upload form:<\/p>\n
        <?php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\n\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\n\nclass<\/span> FileUploadController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> showUploadForm<\/span>()<\/span>\n    <\/span>{\n        return<\/span> view('upload'<\/span>);\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
      3. \n
        Create an upload.blade.php<\/code> file in the resources\/views<\/code> directory and populate the file with the code below:<\/p>\n
        <!DOCTYPE html<\/span>><\/span>\n<html<\/span>><\/span>\n    <head<\/span>><\/span>\n        <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1\"<\/span>><\/span>\n\n        <title<\/span>><\/span>Laravel File Upload<\/title<\/span>><\/span>\n\n        <!-- Fonts --><\/span>\n        <link<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,600\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n\n        <!-- Styles --><\/span>\n        <style<\/span>><\/span>\n            html<\/span>, body<\/span> {\n                background-color<\/span>: #fff<\/span>;\n                color<\/span>: #636b6f<\/span>;\n                font-family<\/span>: 'Nunito'<\/span>, sans-serif;\n                font-weight<\/span>: 200<\/span>;\n                height<\/span>: 100vh<\/span>;\n                margin<\/span>: 0<\/span>;\n            }\n\n            .full-height<\/span> {\n                height<\/span>: 100vh<\/span>;\n            }\n\n            .flex-center<\/span> {\n                align-items<\/span>: center;\n                display<\/span>: flex;\n                justify-content<\/span>: center;\n            }\n\n            .position-ref<\/span> {\n                position<\/span>: relative;\n            }\n\n            .top-right<\/span> {\n                position<\/span>: absolute;\n                right<\/span>: 10px<\/span>;\n                top<\/span>: 18px<\/span>;\n            }\n\n            .content<\/span> {\n                text-align<\/span>: center;\n            }\n\n            .title<\/span> {\n                font-size<\/span>: 84px<\/span>;\n            }\n\n            .links<\/span> > a<\/span> {\n                color<\/span>: #636b6f<\/span>;\n                padding<\/span>: 0<\/span> 25px<\/span>;\n                font-size<\/span>: 13px<\/span>;\n                font-weight<\/span>: 600<\/span>;\n                letter-spacing<\/span>: .1rem<\/span>;\n                text-decoration<\/span>: none;\n                text-transform<\/span>: uppercase;\n            }\n\n            .m-b-md<\/span> {\n                margin-bottom<\/span>: 30px<\/span>;\n            }\n        <\/span><\/style<\/span>><\/span>\n    <\/head<\/span>><\/span>\n    <body<\/span>><\/span>\n        <div<\/span> class<\/span>=\"flex-center position-ref full-height\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"content\"<\/span>><\/span>\n                <div<\/span> class<\/span>=\"title m-b-md\"<\/span>><\/span>\n                    Laravel File Upload\n                <\/div<\/span>><\/span>\n\n                @if ($message = Session::get('success'))\n                    <div<\/span> class<\/span>=\"alert alert-success alert-block\"<\/span>><\/span>\n                        <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"close\"<\/span> data-dismiss<\/span>=\"alert\"<\/span>><\/span>\u00d7<\/button<\/span>><\/span>\n                            <strong<\/span>><\/span>{{ $message }}<\/strong<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                @endif\n\n                <div<\/span> class<\/span>=\"links\"<\/span>><\/span>\n                    <form<\/span> action<\/span>=\"\/upload\"<\/span> method<\/span>=\"POST\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span>><\/span>\n                        @csrf\n                        <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"image\"<\/span> class<\/span>=\"form-control\"<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-success\"<\/span>><\/span>Upload a File<\/button<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                        <\/div<\/span>><\/span>\n                    <\/form<\/span>><\/span>\n                <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
        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<\/code> route in the routes\/web.php<\/code> file.<\/p>\n
        Note:<\/strong> You\u2019ll see the related code later in this post.<\/p>\n<\/li>\n
      4. \n
        Go to the routes\/web.php<\/code> directory and add two routes: one to display the form and the other to process the file upload:<\/p>\n
        Route::get('\/upload'<\/span>, 'FileUploadController@showUploadForm'<\/span>);\nRoute::post('\/upload'<\/span>, 'FileUploadController@storeUploads'<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n
        Now reload the app and go to the \/upload<\/code> route. This page is then displayed:<\/p>\n
        \"Laravel<\/p>\n
        Compress and Resize Images On Upload<\/h2>\n
        Create an  upload<\/code> method in the FileUploadController.php<\/code> file to ensure that compression and resizing of user-uploaded images occur by default on upload<\/strong>.<\/p>\n
        The code below resizes an image to 100 pixels in both width and height:<\/p>\n
        public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $resizedImage = cloudinary()->upload($request->file('image'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'uploads'<\/span>,\n            'transformation'<\/span> => [\n                      'width'<\/span> => 100<\/span>,\n                      'height'<\/span> => 100<\/span>\n             ]\n])->getSecurePath();\n\n\tdd($resizedImage);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
        The code below resizes an image through smart cropping:<\/p>\n
        public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $resizedImage = cloudinary()->upload($request->file('image'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'uploads'<\/span>,\n            'transformation'<\/span> => [\n                      'width'<\/span> => 100<\/span>,\n                      'height'<\/span> => 100<\/span>,\n\t          \u2018crop\u2019 => \u2018limit\u2019\n             ]\n])->getSecurePath();\n\ndd($resizedImage);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
        The code below, slated for images with people, focuses on those people through cropping and resizing:<\/p>\n
        public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $resizedImage = cloudinary()->upload($request->file('image'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'avatar'<\/span>,\n            'transformation'<\/span> => [\n                      'width'<\/span> => 250<\/span>,\n                      'height'<\/span> => 250<\/span>,\n\t          \u2018gravity\u2019 => \u2018faces\u2019,\n\t          \u2018crop\u2019 => \u2018fill\u2019\n             ]\n])->getSecurePath();\n\n\tdd($resizedImage);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
        Optimize Images On Upload<\/h2>\n
        The code below compresses and optimizes an image:<\/p>\n
        public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $compressedImage = cloudinary()->upload($request->file('image'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'uploads'<\/span>,\n            'transformation'<\/span> => [\n                      'quality'<\/span> => auto,\n                      'fetch_format'<\/span> => auto\n\t ]\n])->getSecurePath();\ndd($resizedImage);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
        Setting the auto<\/code> value for the fetch_format<\/code> and quality<\/code> attributes automatically compresses and optimizes the image in the best way, balancing its visual quality.<\/p>\n
        Note:<\/strong> As a rule, with fetch_format<\/code> and quality<\/code> set to auto<\/code>, 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.<\/p>\n
        Here\u2019s the original, uncompressed picture with a size of 2.58 MB:\n\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Eden<\/a><\/p>\n
        Here\u2019s the compressed version with a size of 918 KB:\n\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Eden<\/a><\/p>\n
        The two pictures look the same even though the second one has undergone compression that reduced its size by almost 2 MB.<\/p>\n
        Leverage More Cloudinary Capabilities<\/h2>\n
        Cloudinary helps you administer the entire spectrum of your media\u2019s lifecycle, end to end, from upload and transformation to optimization and delivery. Do check it out<\/a>.<\/p>\n
        Want to Learn More About Laravel?<\/h2>\n