{"id":28722,"date":"2021-05-31T15:08:00","date_gmt":"2021-05-31T12:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28722"},"modified":"2021-10-17T16:33:22","modified_gmt":"2021-10-17T13:33:22","slug":"como-cargar-y-comprimir-imagenes-en-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-cargar-y-comprimir-imagenes-en-laravel\/","title":{"rendered":"C\u00f3mo cargar y comprimir im\u00e1genes en Laravel"},"content":{"rendered":"

\u00bfEst\u00e1s buscando c\u00f3mo cargar y comprimir im\u00e1genes en Laravel? Laravel proporciona una manera f\u00e1cil de cargar archivos. Y comprimir las im\u00e1genes en el momento de la carga es una buena pr\u00e1ctica. En este art\u00edculo, te muestro c\u00f3mo cargar y comprimir im\u00e1genes en Laravel.<\/p>\n

\u00bfPor qu\u00e9 es necesario comprimir im\u00e1genes?<\/h3>\n

Las im\u00e1genes juegan un papel importante en su sitio web. Las im\u00e1genes agregan una mejor experiencia de usuario y una experiencia llamativa para los visitantes. Pero al mismo tiempo, tambi\u00e9n puede acabar con el rendimiento del sitio. Las im\u00e1genes pesadas ralentizan el sitio. Como resultado, su sitio tarda mucho en cargarse. A los usuarios no les gustan los sitios web lentos. Si su sitio tarda m\u00e1s en cargarse, es muy probable que pierda su audiencia. El tiempo de carga est\u00e1ndar de un sitio web es de 2 segundos. Debe tener cuidado de que su sitio se cargue en 2 segundos.<\/p>\n

Aunque hay varios factores que deben tenerse en cuenta para mejorar la velocidad de la p\u00e1gina, uno de ellos es el uso de im\u00e1genes optimizadas. La compresi\u00f3n de im\u00e1genes reduce el tama\u00f1o de la imagen original sin perder su calidad. Ayuda a aumentar la velocidad del sitio.<\/p>\n

Dicho esto, veamos c\u00f3mo cargar y comprimir im\u00e1genes en Laravel.<\/p>\n

Subiendo im\u00e1genes en Laravel<\/h3>\n

Laravel proporciona una forma limpia de cargar las im\u00e1genes. Para comenzar con \u00e9l, primero necesitamos crear un directorio donde almacenaremos las im\u00e1genes. Abra su s\u00edmbolo del sistema en el directorio ra\u00edz y ejecute el siguiente comando.<\/p>\n

php artisan storage:link<\/code><\/pre>\n
Este comando crea un directorio de "almacenamiento" en la carpeta "p\u00fablica".<\/p>\n
A continuaci\u00f3n, cree un formulario con la entrada del archivo y el bot\u00f3n enviar agregando el siguiente c\u00f3digo en su archivo blade.<\/p>\n
<form action=\"{{ url('ROUTE_HERE') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
En el HTML anterior, he agregado una entrada de archivo con el nombre ‘profile_image’. Tambi\u00e9n agregu\u00e9 lo {{ csrf_field() }}<\/code>que se requiere para enviar formularios de Laravel.<\/p>\n
Ahora, suponiendo que env\u00ede la solicitud de publicaci\u00f3n al store()<\/code>m\u00e9todo de su controlador, escriba un c\u00f3digo que almacene la imagen en el servidor como se muestra a continuaci\u00f3n.<\/p>\n
public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Compress Image Code Here\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Este c\u00f3digo crea un nombre de archivo \u00fanico y almacena el archivo dentro del directorio ‘profile_images’. Laravel genera autom\u00e1ticamente un directorio ‘profile_images’ en ‘public \/ storage’ si no existe.<\/p>\n
Como se dijo anteriormente, es una mejor pr\u00e1ctica optimizar la imagen en el momento de la carga. Terminamos con el c\u00f3digo de carga de una imagen. Ahora tenemos que comprimirlo. Voy a cubrir 2 servicios: TinyPNG<\/a> y reSmush.it,<\/a> que proporciona las API para comprimir im\u00e1genes sobre la marcha. Ve\u00e1moslos uno por uno.<\/p>\n
Comprimir im\u00e1genes usando TinyPNG en Laravel<\/h3>\n
Para comprimir im\u00e1genes usando la API de TinyPNG, necesita obtener su clave de API<\/a>. El proceso es sencillo. Registre su direcci\u00f3n de correo electr\u00f3nico con ellos y ellos le enviar\u00e1n su clave de desarrollador.<\/p>\n
Una vez que obtenga la clave API, agr\u00e9guela en el .env<\/code>archivo.<\/p>\n
Despu\u00e9s de esto, instale un paquete TinyPNG usando el comando:<\/p>\n
composer require tinify\/tinify<\/code><\/pre>\n
Tras la instalaci\u00f3n del paquete, tenemos que escribir un c\u00f3digo que comprima la imagen cargada usando TinyPNG.<\/p>\n
Escriba un c\u00f3digo de compresi\u00f3n justo debajo de la l\u00ednea que carga la imagen.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n\u00a0\ntry {\n\u00a0\u00a0\u00a0\u00a0TinifysetKey(env(\"TINIFY_API_KEY\"));\n\u00a0\u00a0\u00a0\u00a0$source = TinifyfromFile($filepath);\n\u00a0\u00a0\u00a0\u00a0$source->toFile($filepath);\n} catch(TinifyAccountException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Verify your API key and account limit.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyClientException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Check your source image and request options.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyServerException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Temporary issue with the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyConnectionException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ A network connection error occurred.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Something else went wrong, unrelated to the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n}<\/code><\/pre>\n
El c\u00f3digo anterior toma una imagen del directorio cargado, la env\u00eda al servidor TinyPNG para su compresi\u00f3n y, despu\u00e9s de recibir una respuesta, almacena la imagen comprimida en el mismo directorio.<\/p>\n
Este proceso se ejecuta en segundo plano. No necesita preocuparse por c\u00f3mo la imagen va al servidor TinyPNG, c\u00f3mo recibe la respuesta de la API. La biblioteca TinyPNG hace todas las tareas por usted.<\/p>\n
Intente cargar la imagen ahora y deber\u00eda ver que su imagen se comprime.<\/p>\n
Comprimir im\u00e1genes usando reSmush.it en Laravel<\/h3>\n
TinyPNG funciona bien pero tiene la limitaci\u00f3n de optimizar 500 im\u00e1genes gratuitas por mes. Si desea comprimir m\u00e1s de 500 im\u00e1genes, debe pagarlas. Alternativamente, los usuarios pueden elegir un servicio gratuito de reSmush.it para la compresi\u00f3n de im\u00e1genes. En el momento de escribir este art\u00edculo, reSmush.it comprime m\u00e1s de 7 mil millones de im\u00e1genes. Esto es suficiente para decir sobre la popularidad de este servicio.<\/p>\n
Entonces, escriba el c\u00f3digo a continuaci\u00f3n que comprime las im\u00e1genes usando reSmush.it en Laravel.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n$mime = mime_content_type($filepath);\n$output = new CURLFile($filepath, $mime, $filenametostore);\n$data = [\"files\" => $output];\n\u00a0\n$ch = curl_init();\ncurl_setopt($ch, CURLOPT_URL, 'http:\/\/api.resmush.it\/?qlty=80');\ncurl_setopt($ch, CURLOPT_POST,1);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);\ncurl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);\ncurl_setopt($ch, CURLOPT_POSTFIELDS, $data);\n$result = curl_exec($ch);\nif (curl_errno($ch)) {\n\u00a0\u00a0\u00a0\u00a0$result = curl_error($ch);\n}\ncurl_close ($ch);\n\u00a0\n$arr_result = json_decode($result);\n\u00a0\n\/\/ store the optimized version of the image\n$ch = curl_init($arr_result->dest);\n$fp = fopen($filepath, 'wb');\ncurl_setopt($ch, CURLOPT_FILE, $fp);\ncurl_setopt($ch, CURLOPT_HEADER, 0);\ncurl_exec($ch);\ncurl_close($ch);\nfclose($fp);<\/code><\/pre>\n
He pasado el valor de calidad como 80 ?qlty=80<\/code>en el c\u00f3digo anterior. Puedes jugar pasando diferentes valores de calidad.<\/p>\n
Espero que entiendas c\u00f3mo cargar y comprimir im\u00e1genes en Laravel. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n