Comment optimiser les images de votre application Laravel

L’un des aspects majeur de l’optimisation de votre application ou site internet pour les moteurs de recherche et l’utilisation d’images de taille appropriées par rapport à leur utilisation pratique.

Par exemple, si votre blog affiche des images au format 300×200 et l’article seul affiche lui l’image au format 1200×500, les moteurs de recherche s’attendent à ce que les images physiques soient dans ces formats-là, c’est en partie ainsi que ces images sont considérées comme optimisées (le poids par rapport au format de fichier influe également).

Cependant lorsque votre application affiche des images fournies par les utilisateurs il peut être compliqué de créer des processus de redimensionnement et d’optimisation de ces fichiers, c’est pour cela qu’il peut être judicieux de faire appel à une service externe de traitement de fichiers.

En 2020, nous avons créé un service en ligne de traitement des fichiers images qui peut vous permettre d’effectuer des opérations normalement complexes de manière simplifiée, nous allons analyser comment intégrer ce service dans votre application Laravel.

ZMD est un service en ligne de traitement d’images à la demande, en intégrant quelques instructions à votre code HTML vous pourrez effectuer des opérations telles que :

Redimensionnement
Rotation
Recadrage
Correction contraste
+ de 18 opérations disponibles

Voir la liste des opérations disponible : https://zmd.io.

Créer un compte

Commencez par créer un compte gratuit pendant 10 jours sans carte de crédit et sans engagement : https://app.zmd.io/register

Ajouter un domaine

Pour utiliser le service ZMD vous devez renseigner depuis quel nom de domaine vous allez travailler, ce domaine doit être accessible physiquement pour pouvoir fonctionner, enregistrez vos domaines ici : https://app.zmd.io/domains

Package composer

Nous avons créé un package composer pour simplifier l’utilisation du service zmd.io, pour cela installez simplement le package avec la commande suivante :

composer require superlatif/zmd-laravel

L’installation de ce package vous donne accès à une directive blade vous permettant d’intégrer les éléments javascript nécessaire au bon fonctionnement du service ZMD, ainsi qu’à la configuration de votre clé de domaine.

Intégration HTML / Blade

Dans votre template HTML / Blade, insérez le code ci-dessous juste avant la fermeture de la balise </body>.

<html>
    <body>
    
        ...
    
        @zmdInit
    </body>
</html>

Configuration de la clé de domaine

Lorsque vous avez ajouté votre nom de domaine, un code spécial vous est fourni, ce code va faire la liaison entre votre site et ZMD, pour ajouter votre clé de domaine, ajoutez simplement la clé suivante dans votre fichier de configuration .env :

ZMD_DOMAIN_KEY=your_domain_key

Optimisation de vos images

Il ne reste plus qu’à adapter le code des images que vous souhaitez optimiser, vous pouvez enregistrer les opérations à effectuer directement dans le code HTML, par exemple un fichier img ressemble en générale à cela :

...
<img src="https://example.com/myimage.jpg" alt="My image description"/>
...

Maintenant, remplacez l’attribut src de votre balise et ajoutez l’attribut contenant les opérations, votre code ressemblera à cela :

...
<img src="" data-zmd-src="https://example.com/myimage.jpg" data-zmd-op="w:800;h:550" alt="My image description"/>
...

Notez que l’attribut src n’est plus nécessaire, celui-ci sera rajouté automatiquement par le script de ZMD pour rester valide pour le navigateur.

La liste complète des opérations disponibles est accessible ici :

https://zmd.io/documentation/operations/

Et voilà, vos images sont désormais automatiquement optimisées pour correspondre aux besoins de votre application.

Créer un compte ZMD gratuit maintenant