Aprende cómo optimizar imágenes en Laravel

Las imágenes representan una gran parte del tráfico global de la web. La entrega de imágenes de forma rápida y eficiente puede mejorar el rendimiento general de una aplicación web. Entonces, si estás llevando cursos de Laravel, te interesa saber cómo optimizar y almacenar las imágenes.

Optimizar significa reducir el tamaño de los archivos multimedia pero manteniendo un nivel satisfactorio de calidad visual. Cuanto más pequeños sean esos archivos, más rápido se cargará tu sitio web. A continuación, te explicamos cómo optimizar imágenes en Laravel. ¡Sigue leyendo!

¿Cómo optimizar imágenes en Laravel?

Existen varios paquetes de Laravel que pueden ayudarte a facilitar varias tareas. Por ejemplo, Laravel optimizador de imágenes desarrollado por Spatie es un paquete impresionante que se puede utilizar para optimizar y almacenar imágenes en múltiples tamaños de una forma fácil. ¡Aprendamos paso a paso a utilizarlo!

#1 Instala Laravel Spatie

Al igual que en otros paquetes, la instalación suele ser sencilla si ejecutas bien cada paso. Entonces, ¿cómo instalar Spatie? Puedes instalar este paquete a través de Composer ejecutando este comando:

composer require spatie/laravel-image-optimizer

Este paquete es la integración específica de Laravel 6.0 y superiores, por lo que puedes optimizar imágenes en formato PNG, JPG, SVG y GIF ejecutándolos a través de una cadena de varias herramientas de optimización de imágenes. El paquete detectará de forma automática qué archivos de optimización están instalados en tu sistema y los utilizará.

Pero, ¿cómo funciona este paquete? Este hace las imágenes tan pequeñas como pueden ser con estas herramientas: jpegtran, pngquant, y gifsicle. En la mayoría de los casos, estas pueden hacer que tus imágenes sean más pequeñas en un rango considerable sin que te des cuenta, a menos que tengas un ojo entrenado para ello.

#2 Configura el paquete Laravel Spatie

Ahora que ya instalaste este paquete en tu aplicación Laravel, es momento de empezar a utilizarlo. Como mencionamos, este paquete utiliza diversas herramientas para optimizar las imágenes, por lo que es posible que tengas que configurar cada uno de estos para que puedas visualizarlos en tu sistema. Aquí está la lista de optimizadores disponibles:

• JpegOptim
• Optipng
• Pngquant 2
• SVGO 1
• Gifsicle
• cwebp

Para ello, abre el archivo config/app.php y establece el proveedor de servicios, mediante este camino:

'providers' => [
	....
	Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider::class,
],
'aliases' => [
	....
	'ImageOptimizer' => Spatie\LaravelImageOptimizer\ImageOptimizerFacade::class,
],

A continuación, después de configurar es momento de publicar ejecutando el siguiente comando:

php artisan vendor:publish --provider="Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider"

Luego de ello, el modo de uso es bastante simple. Puedes utilizar la función OptimizerChain directamente o puedes utilizar la interfaz para un uso sencillo. Si deseas optimizar la imagen y reemplazar la actual, realiza una de estas opciones:

app(OptimizerChain::class)->optimize($imagePath);
ImageOptimizer::optimize($imagePath);

Del mismo modo, si deseas optimizar la imagen y no quieres sustituir el archivo, te recomendamos realizar una de estas opciones:

app(OptimizerChain::class)->optimize($imagePath, $newImagePath);
ImageOptimizer::optimize($imagePath, $newImagePath);

El optimizador detectará de forma automática el tipo de archivo y optimizará en consecuencia utilizando la herramienta seleccionada. Por ejemplo:

public function store(Request $request)

{
    ...    
    ImageOptimizer::optimize($request->image->getRealPath());
    $request->image->storeAs('image');    
    ...    
}

Te puede interesar: ¿Por qué usar Laravel en 2023? 4 ventajas que debes conocer

#3 Añade Middleware

Si tienes varios formularios en tu proyecto actual que tienen carga de imágenes, serán muchos cambios en todos los controladores de formulario. Sin embargo, este paquete hace las cosas más simples sin tocar tu controlador, sino mediante el uso de Middleware.

\Spatie\LaravelImageOptimizer\Middlewares\OptimizeImages::class

Este Middleware encontrará todos los archivos en cada solicitud y los optimizará de forma inmediata. No obstante, si estás utilizando Livewire, este middleware no funcionará, por lo que puede que necesites utilizar el OptimizerChain en tu sistema antes de almacenar la imagen.

¡Ahora ya sabes cómo optimizar imágenes en tu aplicación Laravel! Recuerda que para proporcionar una carga rápida de tu página web lo mejor es hacer que los archivos multimedia sean lo más pequeños posible. Esto quiere decir que cuantos menos bytes tenga que descargar el navegador, más rápida será la página.

Lo mejor es que con este paquete podrás reducir el tamaño de los archivos multimedia sin perder la calidad visual de tus imágenes. ¡Inténtalo tú mismo! ¡Esperamos que esta información te haya sido de utilidad!

¿Te gustaría aprender a utilizar Laravel desde cero? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!