Como fazer upload e compactar imagens no Laravel

Last updated Out 18, 2021

Contente

Comprimir imagens usando o TinyPNG no Laravel

Comprimir imagens usando reSmush.it no Laravel

Por que precisa compactar imagens?

As imagens desempenham um papel importante no seu site. As imagens adicionam uma melhor experiência do usuário e uma experiência atraente para os visitantes. Mas, ao mesmo tempo, também pode prejudicar o desempenho do site. Imagens pesadas tornam o site lento. Como resultado, seu site demora muito para carregar. Os usuários não gostam de sites lentos. Se o seu site demorar mais para carregar, há uma grande chance de você perder seu público. O tempo de carregamento padrão de um site é de 2 segundos. Você deve cuidar para que seu site carregue em 2 segundos.

Embora haja vários fatores que precisam ser levados em consideração para melhorar a velocidade da página, um deles é o uso de imagens otimizadas. A compactação de imagens reduz o tamanho da imagem original sem perder sua qualidade. Isso ajuda a aumentar a velocidade do site.

Dito isso, vamos ver como fazer upload e compactar imagens no Laravel.

Carregando imagens no Laravel

O Laravel oferece uma maneira limpa de enviar as imagens. Para começar, primeiro precisamos criar um diretório onde armazenaremos as imagens. Abra seu prompt de comando no diretório raiz e execute o comando abaixo.

php artisan storage:link

Este comando cria um diretório de ‘armazenamento’ na pasta ‘pública’.

Em seguida, crie um formulário com o botão de entrada e envio do arquivo, adicionando o código abaixo em seu arquivo blade.

<form action="{{ url('ROUTE_HERE') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

No HTML acima, adicionei uma entrada de arquivo com o nome ‘profile_image’. Eu também adicionei o {{ csrf_field() }}que é necessário para enviar formulários do Laravel.

Agora, supondo que você envie a solicitação de postagem para o store()método do seu controlador, escreva um código que armazene a imagem no servidor conforme abaixo.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
 
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
 
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
 
        //Compress Image Code Here
 
        return redirect('ROUTE_HERE')->with('success', "Image uploaded successfully.");
    }
}

Este código cria um nome de arquivo único e armazena o arquivo dentro do diretório ‘profile_images’. O Laravel gera automaticamente um diretório ‘profile_images’ sob ‘public / storage’ se ele não existir.

Como dito antes, é uma prática melhor otimizar a imagem no momento do upload. Terminamos com o código de upload de uma imagem. Agora precisamos compactá-lo. Vou cobrir 2 serviços – TinyPNG e reSmush.it que fornece as APIs para compactar imagens em tempo real. Vamos vê-los um por um.

Comprimir imagens usando o TinyPNG no Laravel

Para compactar imagens usando a API TinyPNG, você precisa obter sua chave de API. O processo é direto. Registre seu endereço de e-mail com eles e eles enviarão sua chave de desenvolvedor.

Depois de obter a chave API, adicione-a ao .envarquivo.

Depois disso, instale um pacote TinyPNG usando o comando:

composer require tinify/tinify

Após a instalação do pacote, temos que escrever um código que compacta a imagem carregada usando o TinyPNG.

Escreva um código de compressão logo abaixo da linha que carrega a imagem.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
 
try {
    TinifysetKey(env("TINIFY_API_KEY"));
    $source = TinifyfromFile($filepath);
    $source->toFile($filepath);
} catch(TinifyAccountException $e) {
    // Verify your API key and account limit.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyClientException $e) {
    // Check your source image and request options.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyServerException $e) {
    // Temporary issue with the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyConnectionException $e) {
    // A network connection error occurred.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(Exception $e) {
    // Something else went wrong, unrelated to the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
}

O código acima pega uma imagem do diretório carregado, a envia ao servidor TinyPNG para compactação e, após receber uma resposta, armazena a imagem compactada no mesmo diretório.

Este processo é executado em segundo plano. Você não precisa se preocupar em como a imagem está indo para o servidor TinyPNG, como ele recebe a resposta da API. A biblioteca TinyPNG faz todas as tarefas para você.

Tente fazer o upload da imagem agora e você deverá ver sua imagem sendo compactada.

Comprimir imagens usando reSmush.it no Laravel

O TinyPNG funciona bem, mas tem uma limitação de otimizar 500 imagens gratuitas por mês. Se você deseja compactar mais de 500 imagens, é necessário pagar por elas. Como alternativa, os usuários podem escolher um serviço gratuito de reSmush.it para compactação de imagens. No momento em que este artigo foi escrito, reSmush.it compactava mais de 7 bilhões de imagens. Isso é o suficiente para dizer sobre a popularidade deste serviço.

Então, escreva o código abaixo que compacta as imagens usando reSmush.it no Laravel.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
$mime = mime_content_type($filepath);
$output = new CURLFile($filepath, $mime, $filenametostore);
$data = ["files" => $output];
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://api.resmush.it/?qlty=80');
curl_setopt($ch, CURLOPT_POST,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$result = curl_exec($ch);
if (curl_errno($ch)) {
    $result = curl_error($ch);
}
curl_close ($ch);
 
$arr_result = json_decode($result);
 
// store the optimized version of the image
$ch = curl_init($arr_result->dest);
$fp = fopen($filepath, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

Passei o valor de qualidade como 80 ?qlty=80no código acima. Você pode jogar com a passagem de diferentes valores de qualidade.

Espero que você entenda como fazer upload e compactar imagens no Laravel. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.

Como fazer upload e compactar imagens no Laravel

Por que precisa compactar imagens?

Carregando imagens no Laravel

Comprimir imagens usando o TinyPNG no Laravel

Comprimir imagens usando reSmush.it no Laravel

Artigos relacionados