{"id":1373,"date":"2024-11-19T06:05:15","date_gmt":"2024-11-19T06:05:15","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=1373"},"modified":"2025-12-04T07:44:06","modified_gmt":"2025-12-04T07:44:06","slug":"resizing-images-in-laravel-11-with-intervention-image","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/","title":{"rendered":"Resizing Images in Laravel 11 with Intervention Image"},"content":{"rendered":"\n

In web development, managing images efficiently is crucial for both performance and user experience. One common task is resizing images to ensure they load quickly and display correctly across various devices and screen sizes. This is where the Intervention Image<\/strong> package in Laravel comes into play. It provides a simple and expressive way to handle image manipulation, including resizing, cropping, and more.<\/p>\n\n\n\n

Why Image Resizing is Important<\/strong><\/h2>\n\n\n\n
    \n
  1. Performance<\/strong>: Large images can significantly slow down your website, leading to longer load times and poor user experience. Resizing images to appropriate dimensions helps reduce file sizes, improving load times and overall site performance.<\/li>\n\n\n\n
  2. Responsive Design<\/strong>: With the variety of devices and screen sizes used today, it\u2019s essential to serve images that fit well on any screen. Resizing images ensures they look good and load efficiently on desktops, tablets, and mobile devices.<\/li>\n\n\n\n
  3. Bandwidth Savings<\/strong>: Smaller image files consume less bandwidth, which is beneficial for both the server hosting the website and users with limited data plans.<\/li>\n\n\n\n
  4. SEO Benefits:<\/strong> Faster-loading websites tend to rank higher in search engine results. By optimizing images through resizing, you can enhance your site\u2019s SEO performance.<\/li>\n<\/ol>\n\n\n\n

    Intervention Image Package<\/strong><\/h2>\n\n\n\n

    The Intervention Image package<\/strong> is a powerful and easy-to-use image manipulation library for PHP, which integrates seamlessly with Laravel. It provides a fluent interface for creating, editing, and composing images, making it an excellent choice for web developers who need to handle image processing tasks efficiently.<\/p>\n\n\n\n

    Benefits of Using Intervention Image in Laravel<\/strong><\/h2>\n\n\n\n
      \n
    1. Ease of Use<\/strong>: The package offers a simple and expressive syntax, allowing developers to perform complex image manipulations with minimal code.<\/li>\n\n\n\n
    2. Comprehensive Features:<\/strong> It supports a wide range of image manipulation functions, including resizing, cropping, rotating, and adding watermarks.<\/li>\n\n\n\n
    3. Integration with Laravel:<\/strong> Intervention Image integrates smoothly with Laravel, leveraging Laravel\u2019s service container and facades, which simplifies configuration and usage.<\/li>\n\n\n\n
    4. Support for Multiple Image Formats<\/strong>: It can handle various image formats such as JPEG, PNG, GIF,<\/strong> and more, ensuring compatibility with different types of image files.<\/li>\n\n\n\n
    5. Chainable Methods:<\/strong> The fluent interface allows for chaining methods, making the code more readable and maintainable.<\/li>\n\n\n\n
    6. Community and Documentation:<\/strong> With a strong community and comprehensive documentation, developers can easily find support and resources to help them implement image manipulation features.<\/li>\n<\/ol>\n\n\n\n

      PHP Extensions<\/strong><\/h2>\n\n\n\n

      Visit the Official Website<\/strong>: Go to the Intervention Image website.<\/p>\n\n\n\n

      Select Intervention Image:<\/strong> Choose the Intervention Image package, which will show you the latest version (version 3).<\/p>\n\n\n\n

      Check Server Requirements:<\/strong> In the left sidebar, navigate to the Installation section and then to the Server Requirements. Here, you\u2019ll see that PHP version 8.1 or higher is required.<\/p>\n\n\n\n

      Upgrade PHP<\/strong>: If your PHP version is below 8.1, upgrade it to meet the requirements. If you already have PHP 8.1 or higher, you\u2019re good to go.<\/p>\n\n\n\n

      Install the Package<\/strong>: After ensuring your PHP version meets the requirements, run the following command to install the Intervention Image package:<\/p>\n\n\n\n

      composer require intervention\/image<\/code><\/pre>\n\n\n\n
      This command will install the latest version of the Intervention Image package.<\/strong><\/p>\n\n\n\n
      Now lets move onto the codes which need to be written<\/strong><\/p>\n\n\n\n
      Step 1: Create Controller<\/strong><\/p>\n\n\n\n
      Generate Controller<\/strong>: Create a new controller for handling image uploads:<\/p>\n\n\n\n
      php artisan make:controller ImageController<\/strong>\n<\/code><\/pre>\n\n\n\n
      ImageController.php file<\/strong><\/code><\/pre>\n\n\n\n
      \"Code<\/figure>\n\n\n\n
      There are two functions , index() and storeImage()<\/strong>.<\/p>\n\n\n\n
      index() <\/strong> => It shows the blade file named resize-image.<\/p>\n\n\n\n
      storeImage() <\/strong>=> This function validates the input from the form in the blade file, then creates a file name in $fileName <\/strong>variable, then stores it in the device at the specified path in $path<\/strong> variable.<\/p>\n\n\n\n
      Then ImageManager<\/strong> is used to manipulate the image,<\/p>\n\n\n\n
      Here, we are reading the file in the $image<\/strong> variable, then changing its filetype to jpeg,<\/strong> with 80% compression.<\/strong><\/p>\n\n\n\n
      Then $filePath <\/strong>variable is used to store the value of the image in the database which basically contains the path of the image.

      As successful creation<\/strong> is done, redirect <\/strong>to the same page with success message.<\/strong>

      Step2 : Create Model and migration filesGenerate Model<\/strong>: Create a new model<\/p>\n\n\n\n
      php artisan make:model Image -m<\/strong><\/code><\/pre>\n\n\n\n
      This command will create a model and the migration file.
      The model is as below:<\/p>\n\n\n\n
      \"Code<\/figure>\n\n\n\n
      The migration file is as below:<\/strong><\/p>\n\n\n\n
      \"Laravel<\/figure>\n\n\n\n
      Run the command given as below to migrate the table into the database which you have created:
      php artisan migrate<\/strong><\/p>\n\n\n\n
      Step 3: Create a blade file<\/strong>

      In the resources\/views\/<\/strong>
      create a blade file with name of your choice, for now the name of blade file is resize-image.blade.php .<\/strong>

      So the path of blade file is resources\/views\/resize-image.blade.php<\/strong>The blade file is as follows:<\/strong><\/p>\n\n\n\n
      \"HTML<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      Step4: Create routes<\/strong> <\/p>\n\n\n\n
      To create routes, navigate to the routes\/web.php<\/strong> file in the project of laravel.

      The routes file looks like this:<\/strong><\/p>\n\n\n\n
      \"<\/figure>\n\n\n\n
      Now to view the form you need to run the command,<\/strong><\/p>\n\n\n\n
      php artisan serve.<\/strong><\/code><\/pre>\n\n\n\n
      which in turn gives the link as : http:\/\/127.0.0.1:8000<\/strong><\/p>\n\n\n\n
      http:\/\/127.0.0.1:8000\/image<\/strong><\/a>.<\/strong><\/p>\n\n\n\n
      <\/p>\n\n\n\n
      The view is :<\/strong><\/p>\n\n\n\n
      \"Browser<\/figure>\n\n\n\n
      Step 5: <\/strong>Now submit the form by clicking the upload button after choosing the file to be<\/p>\n\n\n\n
      uploaded

      The view would look like this:<\/p>\n\n\n\n
      \"<\/figure>\n\n\n\n
      Now, after uploading image, you can see the resized image in the path given below:<\/strong><\/p>\n\n\n\n
      public\/uploads\/images<\/strong><\/code><\/pre>\n\n\n\n
      where the view would be like this<\/p>\n\n\n\n
      \"Directory<\/figure>\n\n\n\n
      Step 6 :<\/strong> Go the original image where you stored it and open it in the image editor and similarly go to the path mentioned in the above image and open it in the editor.

      Then in its properties, compare both the images\u2019 size, quality of both would be the same but size of the image would be less compared to the original one.
      <\/p>\n\n\n\n
      \"Comparison<\/figure>\n\n\n\n
      Summary<\/strong>:
      In this blog post, we\u2019ve explored how to resize images in Laravel 11 using the Intervention Image package. We covered the installation and configuration of Laravel and the Intervention Image package, the necessary PHP extensions, and provided a step-by-step guide to creating routes, controllers, and views for image upload and resizing. Additionally, we discussed how to display both the original and resized images side by side.<\/p>\n\n\n\n
      By following these steps, you can efficiently manage and manipulate images in your Laravel applications, enhancing performance and user experience. Whether you\u2019re building a personal project or a professional web application, mastering image resizing will be a valuable skill in your development toolkit.<\/p>\n\n\n\n
      Happy coding! \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"
      In web development, managing images efficiently is crucial for both performance and user experience. One common task…<\/p>\n","protected":false},"author":5,"featured_media":1382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[410,407,406,400,408,33,409,207],"class_list":["post-1373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-image-handling-in-laravel","tag-image-resizing-in-laravel","tag-intervention-image","tag-laravel-11","tag-laravel-image-optimization","tag-laravel-packages","tag-php-image-manipulation","tag-web-development"],"yoast_head":"\nResizing Images in Laravel 11 with Intervention Image Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Learn how to resize images in Laravel 11 effortlessly using the Intervention Image package. Step-by-step guide for optimized image handling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resizing Images in Laravel 11 with Intervention Image Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Learn how to resize images in Laravel 11 effortlessly using the Intervention Image package. Step-by-step guide for optimized image handling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-19T06:05:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png\" \/>\n\t<meta property=\"og:image:width\" content=\"624\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Resizing Images in Laravel 11 with Intervention Image Web Development, Software, and App Blog | 200OK Solutions","description":"Learn how to resize images in Laravel 11 effortlessly using the Intervention Image package. Step-by-step guide for optimized image handling.","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:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/","og_locale":"en_US","og_type":"article","og_title":"Resizing Images in Laravel 11 with Intervention Image Web Development, Software, and App Blog | 200OK Solutions","og_description":"Learn how to resize images in Laravel 11 effortlessly using the Intervention Image package. Step-by-step guide for optimized image handling.","og_url":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2024-11-19T06:05:15+00:00","article_modified_time":"2025-12-04T07:44:06+00:00","og_image":[{"width":624,"height":260,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png","type":"image\/png"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Resizing Images in Laravel 11 with Intervention Image","datePublished":"2024-11-19T06:05:15+00:00","dateModified":"2025-12-04T07:44:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/"},"wordCount":999,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png","keywords":["Image Handling in Laravel","Image Resizing in Laravel","Intervention Image","Laravel 11","Laravel Image Optimization","Laravel Packages","PHP Image Manipulation","Web Development"],"articleSection":["Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/","url":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/","name":"Resizing Images in Laravel 11 with Intervention Image Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png","datePublished":"2024-11-19T06:05:15+00:00","dateModified":"2025-12-04T07:44:06+00:00","description":"Learn how to resize images in Laravel 11 effortlessly using the Intervention Image package. Step-by-step guide for optimized image handling.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png","contentUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture10.png","width":624,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/resizing-images-in-laravel-11-with-intervention-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Resizing Images in Laravel 11 with Intervention Image"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android & iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1373"}],"version-history":[{"count":3,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1373\/revisions"}],"predecessor-version":[{"id":1386,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1373\/revisions\/1386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/1382"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}