Inicio » Blog » Laravel

24 octubre, 2018

Reducir el tamaño de una imagen en Laravel

Para redimensionar una imagen en Laravel usamos la dependencia Image Intervention que nos permite: Reducir el peso, Reducir el tamaño, Renombrar la imagen. Veamos un ejemplo sencillo y fácil de implementar

Reducir el tamaño de una imagen en Laravel

Suscríbete a nuestro canal en Youtube

Suscríbirse

En Laravel, una de las maneras más efectivas de reducir el tamaño de una imagen es mediante el uso de la librería Intervention Image. Esta librería facilita la manipulación de imágenes y proporciona herramientas para redimensionar y comprimir de manera eficiente.

Contenido:

¿Cómo reducir el tamaño de una imagen en Laravel PHP?

Para reducir el tamaño de una foto o imagen debemos procesarla para obtener un tamaño menor y un peso menor mediante el uso de librerías que hacen más fácil la implementación.

En el desarrollo web la imágenes son una parte muy esencial en la comunicación con el usuario, por ello es necesario tener buenas prácticas de desarrollo, muy cuidadosas y más aún cuando se trata de imágenes. Y bueno Laravel nos permite controlar el proceso y/o tratamiento de imágenes. Algunas aclaraciones que debes tener en cuenta:

  • El tamaño es cuan grande es una imagen visualmente, se mide en pixeles.
  • El peso es la cantidad de bytes ó Kb ó Mb que tiene la imagen y se mide en puntos por pulgada dpi llamado tambien resolución

Image Intervention e Instalación

Pues bien, en Laravel se puede usar una librería "Image Intervention" para la gestión de imágenes; este paquete nos permite:

  1. Reducir el peso
  2. Reducir el tamaño
  3. Renombrar la imagen
  4. Salvarlo en una ruta del servidor

Instalación con Composer

Para instalar dicha librería debemos tener instalado Composer y digitar el siguiente comando Artisan:

composer require intervention/image

Después de que haya instalado, abra su archivo de configuración de Laravel config/app.php y agregue las siguientes líneas. En el array $providers, agregue los proveedores de servicios para este paquete.

Código Php

Intervention\Image\ImageServiceProvider::class

Agregue el facade de este paquete al array $aliases:

Código Php

'Image' => Intervention\Image\Facades\Image::class

as :

Comando Artisan

 php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

 


Código para redimensionar la imagen en Laravel:

El siguiente es para redimensionar la imagen a 600 x 400px.  En un controlador dentro del método Store o Edit puede ser de la siguiente manera:

En la vista create.blade.php

En esta ocación estoy usando LaravelCollective aunque ya esta desfasado, pero la idea es solo declarar un input de tipo file con el name='urlfoto'.

{!! Form::open(['route'=>'store','method'=>'POST','files'=>true]) !!}    
      <div class="form-group">
                {!! Form::label('urlfoto','Imagen (600x400px)',['class'=>'control-label']) !!}<br>
                <img src="/img/default.jpg" class="img-thumbnail center-block">
                {!! Form::file('urlfoto',['class'=>'form-control']) !!}
                {{ Form::submit('GUARDAR',['class'=>'btn btn-primary']) }}
      </div>
{!! Form::close()

En nuestro controlador PostController.php

Debes llamar a la clase de la siguiente forma:

use Intervention\Image\ImageManagerStatic as Image;

Y en el método store  podemos implementar el siguiente código PHP:

if ($request->hasFile('urlfoto')){
                $urlfoto    = $request->file('urlfoto');
                $nombre     = 'nuevonombre'.$urlfoto->guessExtension();
                $ruta=public_path('/img/'.$nombre);
                Image::make($urlfoto->getRealPath())
                    ->resize(600,400, function ($constraint){ 
                        $constraint->aspectRatio();
                    })
                    ->save($ruta,72);
            }

En este caso estamos redimensionando cualquier tamaño de imagen subida a 600px de ancho por 400px de alto, además estamos reduciendo el peso con 72

Por Qué Reducir el Tamaño de las Imágenes en Laravel:

  • Rendimiento de la Página: Imágenes más pequeñas se cargan más rápidamente, mejorando el tiempo de carga de la página. Esto es crucial para proporcionar una experiencia de usuario ágil y mantener la retención de visitantes.

  • Ahorro de Ancho de Banda: Imágenes más pequeñas consumen menos ancho de banda, lo que es beneficioso tanto para los usuarios como para el propietario del sitio, especialmente en entornos donde el ancho de banda es limitado o se factura.

  • SEO y Posicionamiento: Google y otros motores de búsqueda consideran la velocidad de carga de la página como un factor de clasificación. Reducir el tamaño de las imágenes contribuye positivamente al rendimiento general del sitio y, por lo tanto, a su visibilidad en los resultados de búsqueda.

  • Experiencia del Usuario: Usuarios satisfechos son usuarios que permanecen. La rápida carga de imágenes mejora la experiencia del usuario, disminuye las tasas de rebote y aumenta la probabilidad de interacción y conversión en tu sitio.

En resumen, reducir el tamaño de las imágenes en Laravel no solo es una práctica técnica eficiente sino también una estrategia clave para mejorar el rendimiento web y ofrecer una experiencia de usuario excepcional. La implementación de estas prácticas garantiza un sitio web rápido, eficiente y bien posicionado en los motores de búsqueda.


Leido 14214 veces

Descarga el código fuente Laravel

Recurso descargado 8 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Laravel 9 Página Web para Negocio Laravel 9 Página Web para Negocio

Curso Laravel 9 Avanzado Desarrollo Web Administrable para negocio

Descarga del código fuente

USD 10.00

Aprende más sobre Laravel

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023