{"id":27835,"date":"2022-06-28T09:07:47","date_gmt":"2022-06-28T09:07:47","guid":{"rendered":"http:\/\/laravel-image-optimization-using-cloudinary"},"modified":"2024-09-07T13:03:53","modified_gmt":"2024-09-07T20:03:53","slug":"laravel-image-optimization-using-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/","title":{"rendered":"Laravel Image Optimization Using Cloudinary"},"content":{"rendered":"

Introduction<\/h2>\n

Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.<\/p>\n

Cloudinary is a Software-as-a-Service (SaaS) solution for managing all your web or mobile application\u2019s media assets in\nthe cloud. Cloudinary offers an end-to-end solution for all your image and video needs, including upload, storage,\nadministration, transformation, and optimized delivery.<\/p>\n

PHPSandbox and Github<\/h2>\n

The final project can be viewed on PHPSandbox<\/a> and the entire source code is available on my Github<\/a> repository.<\/p>\n

Prerequisites<\/h2>\n

Using Cloudinary in your Laravel projects is pretty straightforward. However, for you to be able to easily follow along,\nyou need to have a good command of your terminal, Git, and entry knowledge of PHP specifically with the Laravel\nframework.<\/p>\n

Getting Started<\/h2>\n

This assumes you already have composer installed. Laravel uses Composer to manage its dependencies. So, before we can\nstart to ensure you have Composer installed on your machine.<\/p>\n

    \n
  1. \n

    Install Composer<\/a> and PHP<\/a> on\nyour development or production machine.<\/p>\n<\/li>\n

  2. \n

    Install Laravel<\/p>\n

      \n
    1. \n

      Via Composer:<\/p>\n

      composer create-project --prefer-dist laravel\/laravel cloudinary-speed<\/code><\/p>\n<\/li>\n

    2. \n

      Via Laravel Installer<\/p>\n

      `composer global require laravel\/installer<\/p>\n

      laravel new cloudinary-speed<\/code><\/p>\n<\/li>\n<\/ol>\n<\/li>\n

    3. \n

      In step 2 above we have created a project folder called cloudinary-speed<\/code>. Change the directory to this\nproject folder and run the local development server by typing the following commands:<\/p>\n

      cd cloudinary-speed<\/code><\/p>\n

      php artisan serve<\/code><\/p>\n<\/li>\n<\/ol>\n

      The Laravel project is now up and running.<\/p>\n

      \"Laravel<\/p>\n

      Setting up Cloudinary\u2019s Laravel SDK<\/h2>\n

      Using Cloudinary allows you to optimize the performance of your Laravel backend by allowing you to upload, process, and\ndeliver your media files. Cloudinary\u2019s servers automatically perform optimizations and scales to handle high loads and\nbursts of traffic with a global content delivery network (CDN) feature. This is great for our media platform.<\/p>\n

      To implement a content-aware crop for our media files with Cloudinary:<\/p>\n

        \n
      1. Sign up for a free Cloudinary account then navigate to the Console page and take note of your Cloud name, API Key and\nAPI Secret.<\/li>\n<\/ol>\n

        \"Cloudinary<\/p>\n

          \n
        1. \n

          Install Cloudinary\u2019s Laravel SDK<\/a>:<\/p>\n

          composer require cloudinary-labs\/cloudinary-laravel<\/code><\/p>\n<\/li>\n<\/ol>\n

          Note<\/strong>: Please ensure you follow all the steps in the #Installation section. Publish the configuration file and add\nthe Cloudinary credentials you noted in Step 1 to the .env file.<\/p>\n

          Uploading Image Files<\/h2>\n

          To demonstrate image optimization we will need a UI (User Interface), we will be using the Laravel package Livewire to build this and the image file upload functionality.<\/p>\n

            \n
          1. \n

            Install Livewire Package by running the following command in your Laravel project:<\/p>\n

            composer require livewire\/livewire<\/code><\/p>\n<\/li>\n

          2. \n

            Include Livewire scripts and styles on every page that will be using Livewire. In our case welcome.blade.php<\/code>:<\/p>\n<\/li>\n<\/ol>\n

            ...\n    @livewireStyles\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    ...\n    \n    @livewireScripts\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
              \n
            1. \n
              We will then create a Livewire Component to handle our image uploads:<\/p>\n
              php artisan make:livewire ImageUpload<\/code><\/p>\n<\/li>\n<\/ol>\n
              This will create two files, one in app\/Http\/Livewire\/ImageUpload<\/code> and the other one\nin resources\/views\/livewire\/image-upload.blade.php<\/code><\/p>\n
              Now you can use this component anywhere in your Laravel project using the following snippet:<\/p>\n
              <livewire:image-upload\/><\/code><\/p>\n
              or<\/p>\n
              @livewire(\u2018image-upload\u2019)<\/code><\/p>\n
                \n
              1. Open resources\/views\/welcome.blade.php<\/code> and add the following code within the <body><\/body><\/code> tags as shown below:<\/li>\n<\/ol>\n
                <body<\/span> class<\/span>=\"antialiased\"<\/span>><\/span>\n  <div<\/span>><\/span>\n    @livewire('image-upload')\n  <\/div<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                This basically includes the Livewire component we created earlier into our welcome.blade.php<\/code>.<\/p>\n
                Note:<\/strong> Please ensure you go through the Livewire documentation<\/a>, to learn how to install and set it up.<\/p>\n
                  \n
                1. Open the file resources\/views\/livewire\/image-upload.blade.php<\/code> and populate it with the following code:<\/li>\n<\/ol>\n
                  <form<\/span> class<\/span>=\"mb-5\"<\/span> wire:submit.prevent<\/span>=\"upload\"<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"form-group row mt-5 mb-3\"<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\n\t\t\t<input<\/span> type<\/span>=\"file\"<\/span> class<\/span>=\"form-control @error('media') is-invalid @enderror\"<\/span>\n\t\t\t       placeholder<\/span>=\"Choose file...\"<\/span> id<\/span>=\"media-file\"<\/span> type<\/span>=\"file\"<\/span> wire:model<\/span>=\"media\"<\/span>><\/span>\n\t\t\t@error('media')\n\t\t\t<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\t\t\t@enderror\n\t\t<\/div<\/span>><\/span>\n\t\t<small<\/span> class<\/span>=\"text-muted text-center mt-2\"<\/span> wire:loading<\/span> wire:target<\/span>=\"media\"<\/span>><\/span>\n\t\t\t{{ __('Uploading') }}&hellip;<\/span>\n\t\t<\/small<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"text-center\"<\/span>><\/span>\n\t\t<button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-sm btn-primary w-25\"<\/span>><\/span>\n\t\t\t<i<\/span> class<\/span>=\"fas fa-check mr-1\"<\/span>><\/span><\/i<\/span>><\/span> {{ __('Optimize') }}\n\t\t<\/button<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/form<\/span>><\/span>\n\n<!-- Original Image --><\/span>\n<div<\/span> class<\/span>=\"card-body\"<\/span>><\/span>\n\t<img<\/span> class<\/span>=\"card-img-top\"<\/span> src<\/span>=\"{{ $media }}\"<\/span> alt<\/span>=\"Original Image\"<\/span> width<\/span>=\"400\"<\/span> height<\/span>=\"600\"<\/span>><\/span>\n\t<h5<\/span> class<\/span>=\"card-title mt-4 fw-bold\"<\/span>><\/span>\n\t\tOriginal Image\n\t<\/h5<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<!-- Optimized Image --><\/span>\n<div<\/span> class<\/span>=\"card-body\"<\/span>><\/span>\n\t<img<\/span> class<\/span>=\"card-img-top\"<\/span> src<\/span>=\"{{ $optimizedImage }}\"<\/span> alt<\/span>=\"Optimized Image\"<\/span> width<\/span>=\"400\"<\/span> height<\/span>=\"600\"<\/span>><\/span>\n\t<h5<\/span> class<\/span>=\"card-title mt-4 fw-bold\"<\/span>><\/span>\n\t\tOptimized Image\n\t<\/h5<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                  This is our Livewire Component view, this basically will display the form and on successful optimization\nthrough Cloudinary will display the optimized image file.<\/p>\n
                  The first part of the code above is a form with an input of type file and a submit button.<\/p>\n
                  The second part will take the response from Cloudinary and display the non-optimized image and the optimized image from Cloudinary.<\/p>\n
                  Note:<\/strong> you will see the implementation in code shortly.<\/p>\n
                  Understanding Image Optimization with Cloudinary<\/h2>\n
                  Hold your horses, before we start coding away, we need to understand what image optimization is and specifically how to do it well with Cloudinary.<\/p>\n
                  The Right Image Format<\/h3>\n
                  There are several image formats with PNGs and JPEGs being some of the most popular formats. Image formats have their strengths and weaknesses like PNGs allow you to display transparent images which JPEGs cannot.<\/p>\n
                  As a rule of thumb we use:<\/p>\n
                    \n
                  1. Vector Images – for simple shapes like logos, icons, texts etc<\/li>\n
                  2. Raster Images  – for complex scenes, these are basically the image formats that users upload to platforms like Instagram. They are complex photos taken from device cameras.<\/li>\n<\/ol>\n
                    We also have newer formats like WebP, and JPEG-XR, with better encoding but are only supported in newer browsers. This makes it challenging to choose which format to send to the browser. You can take advantage of Cloudinary\u2019s fetch (f_)<\/code> transformation to choose and specify the format you want.<\/p>\n
                    For instance, if you want the PNG format, you can specify the format after the underscore f_png<\/code> as follows:<\/p>\n
                    https:\/\/res.cloudinary.com\/demo\/image\/fetch\/c_scale,h_400\/f_png\/https:\/\/en.wikipedia.org\/wiki\/File:Benedict_Cumberbatch_2008.jpg<\/code><\/p>\n
                    In this transformation, the original image is a but thanks to Cloudinary and specifying f_png<\/code> we will get back an optimized PNG image.<\/p>\n
                    PNG is not the best in all scenarios, and we might need to take a more dynamic approach which will allow Cloudinary to automatically determine the best format suited for a particular browser based on its capabilities. RIP Internet Explorer. To do this we use f_auto<\/code>:<\/p>\n
                    https:\/\/res.cloudinary.com\/demo\/image\/fetch\/c_scale,h_400\/f_auto\/https:\/\/en.wikipedia.org\/wiki\/File:Benedict_Cumberbatch_2008.jpg<\/code><\/p>\n
                    For more information on these transformations, check out the official Cloudinary guide<\/a>.<\/p>\n
                    Lazy Loading<\/h3>\n
                    Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time – when those images are actually needed, instead of loading them upfront. These techniques help in improving performance, better utilization of the device\u2019s resources, and reducing associated costs.<\/p>\n
                    When Lazy Loading images it is important to use the most efficient rendering method. By default, Cloudinary<\/a> uses progressive rendering which is one of the two ways in which to optimize images and make them display faster even on sluggish connections.<\/p>\n
                    We can specify this in our transformations using the transformation fl_progressive<\/code>.<\/p>\n
                    Smart Quality Optimization<\/h3>\n
                    There is no standard quality and encoding setting that works for all images. Luckily Cloudinary provides a smart solution to handling image compression without compromising on visual quality. This is done using the transformation q_auto<\/code>:<\/p>\n
                    https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600\/q_auto\/beach_huts.jpg<\/code><\/p>\n
                    Cloudinary automates the file size versus visual quality trade-off decision, on the on-the-fly, by using perceptual metrics and heuristics that tune the encoding settings and select the appropriate image quality based on the specific image content and format.<\/p>\n
                    Serve Scaled Images<\/h3>\n
                    The last pillar of core web vitals when it comes to image optimization is sizing.<\/p>\n
                    Web application design requires the display of images in varied sizes. Delivering full-size images and relying on browser-side resizing using CSS or HTML width and height attributes forces the user to render unnecessary bytes and suffer the cons of a slow loading application that is heavy on user resources like bandwidth, CPU, and more.<\/p>\n
                    Like magic, Cloudinary swoops in to save us by providing resizing transformations. The sizing (scaling\/cropping) is performed on their servers and always delivers an image to the browser at the requested size.<\/p>\n
                    Implementation in Code<\/h2>\n
                    Enough theory let\u2019s code. We will use all the above techniques in our code.<\/p>\n
                    Open the file app\/Http\/Livewire\/ImageUpload.php<\/code>. Here, we are going to add a method that will upload an image to\nCloudinary applies the necessary transformations for optimization, compression, and resizing. Add the following code to this file.<\/p>\n
                      \n
                    1. \n
                      First we use Livewires WithFileUploads<\/code> to help us with file uploads, then create two variables $media<\/code>\nand $optimizedImage<\/code> which is an array that will contain the image URLs we get back from Cloudinary.<\/p>\n
                      use<\/span> Livewire<\/span>\\WithFileUploads<\/span>;\n\npublic<\/span> $media;\npublic<\/span> $optimizedImage;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
                    2. \n
                      Secondly, we will create the upload function which will upload the image file to Cloudinary<\/a> and\napply specific transformation which will compress, resize and optimize our images for a speedy web application.<\/p>\n
                      public<\/span> function<\/span> upload<\/span>()<\/span> <\/span>{\n ...\n}  \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
                    3. \n
                      Lets populate our method in step 2 above:<\/p>\n
                      public<\/span> function<\/span> upload<\/span>()<\/span> <\/span>{\n  \/\/ First we validate the input from the user<\/span>\n  $data = $this<\/span>->validate([\n    'media'<\/span> => [\n      'required'<\/span>,\n      'image'<\/span>,\n      'mimes:jpeg,jpg,png'<\/span>,\n      ],\n  ]);\n\n  \/*We will now set the transformations required to optimize the images based on recommended optimization solutions*\/<\/span>\n  $cloud_name = env('CLOUDINARY_CLOUD_NAME'<\/span>, 'dgrpkngjn'<\/span>);\n  $folder = 'cloudinary-speed'<\/span>;\n  $media = $data['media'<\/span>];\n  $width = '700'<\/span>;\n  $height = '800'<\/span>;\n  $quality = 'auto'<\/span>;\n  $fetch = 'auto'<\/span>;\n  $crop = 'scale'<\/span>;\n\n  $optimal = cloudinary()->upload($media->getRealPath(), [\n    'folder'<\/span>         => $folder,\n    'transformation'<\/span> => [\n      'width'<\/span>   => $width,\n      'height'<\/span>  => $height,\n      'quality'<\/span> => $quality,\n      'fetch'<\/span>   => $fetch,\n      'crop'<\/span>    => $crop\n      ]\n  ])->getSecurePath();\n\n  $non-optimal = cloudinary()->upload($media->getRealPath(),[\n    'folder_name'<\/span> => $folder   \n  ])->getSecurePath();\n\n  \/\/ Optimized image fetching<\/span>\n  \/* Fetching an optimized image applying the transformations we specified which will compress, resize and optimize our images for a speedy web application *\/<\/span>\n  $slice = Str::afterLast($image, '\/'<\/span>);\n  $optimized = \"https:\/\/res.cloudinary.com\/{$cloud_name}\/image\/upload\/w_{$width},h_{$height},c_{$crop}\/{$folder}\/{$slice}\"<\/span>;\n\n  $this<\/span>->optimizedImage = $optimized;\n\n  \/\/ Non optimized version for comparison<\/span>\n  $this<\/span>->media = $non_optimal;\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                      The code above will upload an image to Cloudinary and return an optimized image URL. Cloudinary automatically optimizes the image size with no compromise in quality. This is done by setting the auto<\/code> value for the quality<\/code> and fetch<\/code> attributes. We have also specified the image width and height which will instruct Cloudinary to resize and scale the image based on these parameters.<\/p>\n
                      Note:<\/strong> There is a non-optimized image for comparison.<\/p>\n<\/li>\n<\/ol>\n
                      If you successfully implemented the code above, you should be able to see the following when you navigate to your project on the browser:<\/p>\n
                      \"Speedy<\/p>\n
                      Note:<\/strong> Cloudinary is super powerful for the management of your media assets in your project that will not only optimize your assets for visual quality but also cost savings in terms of performance, storage, and AI-powered transformations as well.<\/p>\n
                      Optimization with Cloudinary<\/h1>\n
                      Cloudinary is your A to Z media management solution – upload, storage, administration, manipulation, optimization, and delivery.<\/p>\n
                      Get started<\/a> with Cloudinary in your Laravel projects for FREE!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27836,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,387,388,229,371],"class_list":["post-27835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-laravel","tag-optimize","tag-php","tag-under-review"],"acf":[],"yoast_head":"\nLaravel Image Optimization Using Cloudinary<\/title>\n<meta name=\"description\" content=\"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Image Optimization Using Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T09:07:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-07T20:03:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Laravel Image Optimization Using Cloudinary\",\"datePublished\":\"2022-06-28T09:07:47+00:00\",\"dateModified\":\"2024-09-07T20:03:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Laravel\",\"Optimize\",\"PHP\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\",\"name\":\"Laravel Image Optimization Using Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA\",\"datePublished\":\"2022-06-28T09:07:47+00:00\",\"dateModified\":\"2024-09-07T20:03:53+00:00\",\"description\":\"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA\",\"width\":900,\"height\":598},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel Image Optimization Using Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Image Optimization Using Cloudinary","description":"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/","og_locale":"en_US","og_type":"article","og_title":"Laravel Image Optimization Using Cloudinary","og_description":"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-28T09:07:47+00:00","article_modified_time":"2024-09-07T20:03:53+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Laravel Image Optimization Using Cloudinary","datePublished":"2022-06-28T09:07:47+00:00","dateModified":"2024-09-07T20:03:53+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA","keywords":["Guest Post","Laravel","Optimize","PHP","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/","name":"Laravel Image Optimization Using Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA","datePublished":"2022-06-28T09:07:47+00:00","dateModified":"2024-09-07T20:03:53+00:00","description":"Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA","width":900,"height":598},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-image-optimization-using-cloudinary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Laravel Image Optimization Using Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926145\/Web_Assets\/blog\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26\/e327e14e0921f6344a6f4405a1a939abcde1e358-900x598-1_278369ea26.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27835"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27835\/revisions"}],"predecessor-version":[{"id":35582,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27835\/revisions\/35582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27836"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
                      As you can see the Cloudinary Optimized Image loads faster. Don\u2019t take my word for it, you can test it out on this demo<\/a>. Just upload a super large image, less than 10\u00a0MB of course.<\/p>\n