Le format de fichier WebP (Web Picture), est une création de Google qui a réussi l’exploit de bousculer dans le monde web les éternels JPEG et PNG, ce dernier est plus léger qu’eux, sans perte d’image et possède des particularités nouvelles.
On va s’intéresser aujourd’hui à l’une d’elles, le fait d’animer une image à l’instar d’un GIF, mais un super-GIF avec une meilleure résolution et sans forcément un fond !
|
Les avantages |
Les inconvénients |
|---|---|
Cela fait quelque temps que j’ai eu vent que ce format pouvait être encodé pour l’animation, étant séduit à l’idée d’un « super-GIF », je me suis lancé à l’aventure. Mais bon, loin de moi les compétences de faire des encodages obscurs sous Linux et compagnies.
J’ai réussi à trouver une solution en me perdant sur le web anglophone : des scripts et extensions Photoshop ! Je vais ainsi vous montrer ma technique « simplifiée » de création d’animation WebP qui compile plusieurs tutos que j’ai suivis.
1. Créer votre visuel
Il est important d’avoir déjà votre visuel d’animation et que vous ayez définis où l’intégrer, s’il a un fond ou non et quel framerate vous avez besoin. À savoir pour rappel que si vous intégrez une vidéo avec un fond, d’autres alternatives sont bien plus avantageuses ( Ex : les formats WEBM, GIF, MP4, etc. ).
Que vous fassiez votre animation en 3D via Blender, en trait par trait sur Clip Studio Paint ou Photoshop, ou en motion design via After Effect, retenez qu’il faut exporter votre travail en séquence PNG sans fonds (PNG + Alpha). Vous trouverez de nombreux tutos vidéos sur Internet pour vous expliquez comment, et ce, quel que soit votre logiciel. Je vous conseille fortement d’enregistrer dans un dossier à part.
Prenons ici mon exemple sur After Effect, où j’ai exporté mes éléments en qualité optimale sans chercher à les compresser (vous le ferez plus tard sur Photoshop).
2. Préparer le fichier Photoshop
Première étape, créer votre fichier Photoshop, définissez maintenant la taille du fichier qui sera le mieux pour votre intégration web (éviter de dépasser les 120 Pixels/Pouces). Importer ensuite votre séquence PNG sur votre PSD fraîchement créer en faisant de préférence un cliquer glisser de vos fichiers dans Photoshop.
Pour être conforme au plug-in, il va falloir « renommer un par un vos calques »… Et si on en a 120 ?! Pas de problème :
nous allons installer ce merveilleux script écrit par Kamil Khadeyev qui permet de le faire en une fois : KAM_Layers_Renamer-APR (30ko)
Dézippez-le et insérer le dans vos fichiers sources Photoshop/Presets/Scripts/.
Cette astuce m’a été révélée dans un article de PUShAUNE, un graphiste freelance basé à Marseille.
Après installation, redémarrez Photoshop, rouvrez votre fichier et allez dans :
Fichier > Scripts > KAM_Layers_Renamer-APR
Sélectionnez tous les calques avant de le lancer.
Insérez dans « Text » : Frame%n (*la valeur que vous voulez*ms)
J’ai sur mon exemple ci-contre mis 50ms qui est relatif à un ratio 20img/sec.
Respectez de préférence le framerate dont vous avez travaillé dans votre séquence, je vous conseille de ne pas dépasser cette valeur pour des visuels riches.
La variable %n va numéroter chacun des calques (ce qui aurait été bien laborieux manuellement).
Appuyer enfin sur « Replace » et « OK » pour remplacer les anciens noms de calques.
Dernier couac (promis) du processus, il peut arriver que le script nous a mis la Frame1 en bas de vos calques et la FrameX (la dernière) en haut, or nous voulons l’inverse :
Exemple conforme : « Frame1 (66ms) » est le calque le plus haut et « Frame119 (66ms) » est le dernier calques le plus bas.
« Y a-t-il une solution pour inverser l’ordre des calques dans Photoshop ? » me direz-vous ? Oui et elle est native, sélectionnez tous vos calques et ensuite cliquez dans :
Calque > Disposition > Inverser
Ignorez cette étape bien entendu si vous avez directement le bon ordre.
Vos calques sont maintenant correctement empilés pour le rendus en WebP.
3. Exporter l’animation avec WebP Shop
WebPShop, le plug-in permettant initialement d’ouvrir et d’enregistrer des images WebP directement à partir d’Adobe Photoshop, est pour le moment encore la seule alternative pour exporter en animation notre format WebP (on peut cependant depuis 2023 exporter nativement le WebP sur Photoshop).
Lien de téléchargement : https://github.com/webmproject/WebPShop/releases
Lien direct pour MacOS (extraire ensuite l’archive ZIP) : https://github.com/webmproject/WebPShop/releases/download/v0.4.2/WebPShop_0_4_2_Mac_Universal.zip
Déplacez ensuite le plug-in (le binaire .8bi pour Windows ou le dossier .plugin pour MacOS) dans le répertoire des plug-ins de Photoshop (C:\Program Files\Common Files\Adobe\Plug-Ins\CC pour Windows, /Library/Application Support/Adobe/Plug-Ins/CC pour Mac). Relancez ensuite Photoshop.
Tous nos paramétrages de la partie 2 nous permet maintenant d’être prêts pour l’export.
Allez dans Fichier > Enregistrer une copie (Alt+Ctrl+S) puis choisissez comme ci-contre le second format Webp nommé WebPShhop :
Retrouvez une classique fenêtre de paramètres de rendus avec les classiques paramètres de la qualité d’image, de la compression, avec même le réglage des data ; celle qui nous intéresse ici est le choix de boucler l’animation ou non avec « Loop Forever ».
Pour la prévisualisation, vous pouvez surveiller le rendu, je déconseille cependant de le faire, cela ralentis bêtement votre machine (ça me le fait et j’ai pourtant une bête de compétition).
Vous pouvez tout simplement vérifier votre travail en le lançant dans vos fichiers sur votre navigateur.
Cela peut sembler fatigant comme technique, mais j’insiste pour dire que c’est la meilleure méthode que j’ai pu dénicher sur le net daté de 2025. Vous irez de plus en plus vite avec un peu de pratique.
Pour les infos techniques et les avancées techniques (pour les nerds) :
https://developers.google.com/speed/webp/faq?hl=fr#which_web_browsers_natively_support_webp
Si de votre côté vous avez trouvé une autre façon de faire plus simple je reste tout ouïe 🙂