Comment télécharger et compresser des images dans Laravel

Dernière mise à jour Oct 18, 2021

Teneur

Pourquoi avoir besoin de compresser des images ?

Compresser des images avec TinyPNG dans Laravel

Compresser des images à l’aide de reSmush.it dans Laravel

Pourquoi avoir besoin de compresser des images ?

Les images jouent un rôle important dans votre site Web. Les images ajoutent une meilleure expérience utilisateur et une expérience accrocheuse pour les visiteurs. Mais en même temps, cela peut également tuer les performances du site. Les images lourdes ralentissent le site. En conséquence, votre site prend beaucoup de temps à charger. Les utilisateurs n’aiment pas les sites Web lents. Si votre site met plus de temps à se charger, il y a de fortes chances que vous perdiez votre audience. Le temps de chargement standard d’un site Web est de 2 secondes. Vous devez veiller à ce que votre site se charge dans les 2 secondes.

Bien qu’il y ait plusieurs facteurs qui doivent être pris en considération afin d’améliorer la vitesse de la page, l’un d’eux est l’utilisation d’images optimisées. La compression d’images réduit la taille de votre image originale sans perdre sa qualité. Cela aide à augmenter la vitesse du site.

Cela dit, voyons comment télécharger et compresser des images dans Laravel.

Télécharger des images dans Laravel

Laravel fournit un moyen propre de télécharger les images. Pour commencer, nous devons d’abord créer un répertoire où nous stockerons les images. Ouvrez votre invite de commande dans le répertoire racine et exécutez la commande ci-dessous.

php artisan storage:link

Cette commande crée un répertoire « stockage » dans le dossier « public ».

Ensuite, créez un formulaire avec le bouton de saisie et de soumission du fichier en ajoutant le code ci-dessous dans votre fichier 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>

Dans le code HTML ci-dessus, j’ai ajouté un fichier d’entrée avec le nom ‘profile_image’. J’ai également ajouté {{ csrf_field() }}ce qui est nécessaire pour soumettre des formulaires Laravel.

Maintenant, en supposant que vous envoyez la demande de publication à la store()méthode de votre contrôleur, écrivez un code qui stocke l’image sur le serveur comme ci-dessous.

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.");
    }
}

Ce code crée un nom de fichier unique et stocke le fichier dans le répertoire ‘profile_images’. Laravel génère automatiquement un répertoire ‘profile_images’ sous ‘public/storage’ s’il n’existe pas.

Comme dit précédemment, il est préférable d’optimiser l’image au moment du téléchargement. Nous avons terminé avec le code de téléchargement d’une image. Maintenant, nous devons le compresser. Je vais couvrir 2 services – TinyPNG et reSmush.it qui fournit les API pour compresser les images à la volée. Voyons-les un par un.

Compresser des images avec TinyPNG dans Laravel

Pour compresser des images à l’aide de l’API TinyPNG, vous devez obtenir votre clé API. Le processus est simple. Enregistrez votre adresse e-mail avec eux et ils vous enverront votre clé de développeur.

Une fois que vous obtenez la clé API, ajoutez-la dans le .envfichier.

Après cela, installez un package TinyPNG à l’aide de la commande :

composer require tinify/tinify

Lors de l’installation du package, nous devons écrire un code qui compresse l’image téléchargée à l’aide de TinyPNG.

Écrivez un code de compression juste en dessous de la ligne qui télécharge l’image.

//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());
}

Le code ci-dessus prend une image du répertoire téléchargé, l’envoie au serveur TinyPNG pour compression, et après avoir reçu une réponse, stocke l’image compressée dans le même répertoire.

Ce processus s’exécute en arrière-plan. Vous n’avez pas à vous soucier de la façon dont l’image va au serveur TinyPNG, de la façon dont elle reçoit la réponse de l’API. La bibliothèque TinyPNG effectue toutes les tâches pour vous.

Essayez de télécharger l’image maintenant et vous devriez voir votre image se compresser.

Compresser des images à l’aide de reSmush.it dans Laravel

TinyPNG fonctionne bien mais il a une limite d’optimisation de 500 images gratuites par mois. Si vous souhaitez compresser plus de 500 images, vous devez les payer. Alternativement, les utilisateurs peuvent choisir un service gratuit de reSmush.it pour la compression d’images. Au moment de la rédaction de cet article, reSmush.it compresse plus de 7 milliards d’images. Cela suffit à dire sur la popularité de ce service.

Alors, écrivez le code ci-dessous qui compresse les images en utilisant reSmush.it dans 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);

J’ai passé la valeur de qualité à 80 ?qlty=80dans le code ci-dessus. Vous pouvez jouer en passant différentes valeurs de qualité.

J’espère que vous comprenez comment télécharger et compresser des images dans Laravel. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net