Convertisseur HTML en GIF
Transformez des animations HTML et CSS en GIF animé téléchargeable. Collez du balisage avec une animation ou une transition CSS, prévisualisez-le en direct, capturez une séquence d'images et exportez un GIF en boucle, le tout dans votre navigateur.
100% Traitement côté client
Votre HTML est rendu et converti entièrement dans votre navigateur. Rien n'est envoyé à un serveur.
Cela capturera 20 images de votre animation. Plus d'images et une résolution plus élevée prennent plus de temps à encoder.
Aperçu
Par sécurité, les balises <script> sont désactivées dans l'aperçu et l'export. Les styles (CSS), les animations CSS et les images s'affichent normalement.
Table des matières
Qu'est-ce qu'un convertisseur HTML en GIF ?
Un convertisseur HTML en GIF prend du balisage HTML et CSS, y compris des animations CSS, des transitions et des effets de keyframes, et l'enregistre sous forme d'une séquence d'images assemblées en un seul GIF animé en boucle, prêt à être téléchargé ou partagé n'importe où.
Contrairement à un outil de capture statique, il enregistre votre contenu changeant au fil du temps, donc un loader qui rebondit, un effet de frappe, une carte qui s'estompe ou une icône qui tourne réalisée en CSS pur peut devenir une image animée partageable sans aucun logiciel d'enregistrement d'écran.
Comment ça fonctionne
- Ajoutez votre HTML animé : Collez du HTML/CSS avec une animation ou une transition CSS, ou importez un fichier .html.
- Prévisualisez-le en direct : L'outil rend votre balisage dans un aperçu isolé à la largeur de capture choisie, en jouant l'animation en temps réel.
- Choisissez les paramètres de capture : Sélectionnez la durée, la fréquence d'images, la résolution, l'arrière-plan et la qualité du GIF.
- Capturez et encodez : L'outil prend un instantané de l'aperçu à chaque intervalle d'image pendant la durée choisie, puis encode toutes les images en un seul GIF animé.
- Téléchargez : Le GIF terminé se télécharge automatiquement, prêt à boucler où que vous le placiez.
Fonctionnalités
- Collez du HTML ou importez un fichier .html
- Aperçu en direct qui joue votre animation CSS avant la conversion
- Durée de capture ajustable (1 à 5 secondes) et fréquence d'images (5/10/15 fps)
- Largeur de capture ajustable en pixels, avec résolution 1x ou 2x
- Arrière-plan blanc ou de couleur personnalisée
- Qualité GIF basse, moyenne ou haute pour équilibrer netteté et taille de fichier
- Boucle infinie optionnelle
- Retour de progression en temps réel pendant la capture et l'encodage
- Traitement 100% côté client pour la confidentialité
Bonnes pratiques
- Utilisez des animations CSS à keyframes : Définissez votre mouvement avec @keyframes ou des transitions dans une balise <style> pour que l'aperçu et la capture le jouent automatiquement.
- Adaptez la durée à un cycle d'animation : Réglez la durée de capture proche d'un multiple de la durée de votre animation pour que le GIF boucle sans à-coups.
- Gardez la zone de capture petite : De petits widgets comme des loaders, badges ou bannières courtes se capturent plus vite et produisent des fichiers GIF plus légers et plus propres que des pages entières.
- Utilisez une fréquence d'images plus élevée pour un mouvement fluide : 10-15 fps paraît nettement plus fluide pour un mouvement rapide, tandis que 5 fps suffit pour des fondus lents.
- Équilibrez qualité et taille de fichier : Utilisez Haute pour des dégradés détaillés ou des photos, et Basse pour une interface simple en aplats de couleur afin de garder un fichier léger.
- Testez d'abord avec l'exemple : Chargez l'exemple des points qui rebondissent pour voir une animation en boucle fonctionnelle avant de coller votre propre balisage.
Dépannage
Le GIF ne semble pas animé
Assurez-vous que votre HTML contient bien une animation, une transition ou un effet de keyframes CSS ; une page statique sans mouvement produira un GIF où chaque image se ressemble.
La boucle présente un saut ou un à-coup visible
Ajustez la durée pour qu'elle corresponde à un multiple complet de la durée de votre animation CSS, ou réglez l'animation CSS sur infinite pour qu'elle boucle déjà au démarrage de la capture.
La conversion est lente
Capturer et encoder de nombreuses images à haute résolution prend du temps réel dans le navigateur. Réduisez la durée, la fréquence d'images, la résolution ou la qualité du GIF pour un résultat plus rapide.
Des images manquent dans le GIF
Les images externes hébergées sur d'autres domaines sans en-têtes CORS appropriés ne peuvent pas être capturées. Utilisez des images de même origine ou convertissez-les en data URIs base64.
Les couleurs semblent striées ou tramées
Le GIF prend en charge un maximum de 256 couleurs par image, donc les dégradés doux ou les photos peuvent montrer des bandes visibles. C'est une limite du format GIF, pas du convertisseur ; essayez le réglage de qualité supérieure pour l'atténuer.
Cas d'utilisation courants
- Loaders et indicateurs d'état : Transformez un loader ou une animation de progression en CSS pur en GIF pour l'utiliser là où le CSS en direct n'est pas possible, comme dans la documentation ou des captures pour les stores d'applications.
- Démos produit et aperçus d'interface : Capturez un petit effet d'apparence interactive (état hover, interrupteur, transition) sous forme de GIF partageable pour un README, un article de blog ou une présentation.
- Chat et partage sur les réseaux sociaux : Exportez une courte animation de marque en GIF à coller dans Slack, Discord ou les réseaux sociaux là où l'upload de vidéo est peu pratique.
- Graphiques pour e-mails et newsletters : Ajoutez un badge ou une icône animée subtile à un e-mail avec un GIF léger, car la plupart des clients de messagerie n'exécutent pas les animations CSS intégrées.
- Transmission au design et QA : Enregistrez le comportement réel d'une animation CSS et joignez le GIF à un ticket ou une revue de design plutôt que de décrire le mouvement avec des mots.
Questions fréquentes
Oui. Votre HTML est rendu, capturé et encodé entièrement dans votre navigateur et n'est jamais envoyé à un serveur.
Non. Les balises script sont désactivées dans l'aperçu et l'export par sécurité, donc les scripts interactifs ne s'exécuteront pas, mais les animations et transitions CSS fonctionnent normalement.
Cet outil garde l'export GIF simple en rendant sur un arrière-plan uni, car la transparence GIF est un découpage binaire tout-ou-rien plutôt que le mélange alpha en douceur offert par le PNG. Si vous avez besoin d'une image transparente, utilisez plutôt le Convertisseur HTML en PNG de Tooladex.
La durée est limitée à 5 secondes pour garder la capture et l'encodage côté navigateur rapides et fiables. Pour des animations plus longues, envisagez de capturer plusieurs clips plus courts.
L'outil capture une véritable capture d'écran pour chaque image puis les encode ensemble, donc plus d'images, une résolution plus élevée ou une qualité supérieure augmentent tous le temps de traitement.
Oui. Désactivez « Boucle infinie » avant de convertir et le GIF exporté se lira une seule fois au lieu de se répéter indéfiniment.
Les images chargées depuis d'autres domaines sans support CORS ne peuvent pas être capturées pour des raisons de sécurité du navigateur. Utilisez des images de même origine ou des data URIs base64.
Non. Tout se passe localement dans votre navigateur et le GIF est téléchargé directement sur votre appareil.