Base64.im Encodage et décodage Base64 en ligne(Meilleur outil en ligne pour Base64)
Tutoriel d'utilisation de Base64.im
1. Pourquoi utiliser l'encodage Base64 ?
L'encodage Base64 est un moyen de convertir des données binaires (telles que des fichiers image) au format texte et est idéal pour les scénarios suivants :
- Chargement rapide de petites images : Intégrez des images Base64 dans des fichiers HTML ou CSS pour éviter les requêtes HTTP supplémentaires et augmenter la vitesse de chargement.
- Signature d'e-mail HTML : intégrez des images via l'encodage Base64 pour éviter de déclencher l'avertissement "Afficher l'image" dans votre client de messagerie.
- Démos à fichier unique : créez des maquettes à fichier unique ou des pages de démonstration pour les clients qui ne nécessitent aucune ressource externe.
2. Formats d'images pris en charge
Cet outil prend en charge l'encodage des formats d'image courants suivants : .jpeg, .png, .gif, .webp, .svg, .BMP et .bmp.
3. Comment utiliser base64.im pour convertir des images
Télécharger une image : Sélectionnez l'image que vous souhaitez encoder en faisant glisser le fichier image dans la fenêtre du navigateur ou en en cliquant sur le bouton Télécharger.
Afficher les résultats : une fois le fichier téléchargé, vous pouvez voir la chaîne Base64 ci-dessous.
Limite de téléchargement : vous pouvez télécharger jusqu'à 20 fichiers à la fois.
4. Utiliser des images codées en Base64 comme sources d'images HTML
Les chaînes Base64 peuvent être utilisées comme valeur d'attribut « src » de la balise « img » en HTML. Voici un exemple :
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
Étapes d'utilisation :
①. Cliquez sur le bouton Copier fourni par l'outil pour copier la chaîne Base64 dans le presse-papiers.
② Si votre navigateur ne prend pas en charge la copie directe, vous pouvez copier manuellement la chaîne à partir de la boîte de dialogue.
③. Collez la chaîne dans l'attribut `src` du fichier HTML.
Vous pouvez consulter la démo d'image base64 sur CodePen.
5. Utiliser l'image encodée en Base64 comme arrière-plan CSS
Les chaînes Base64 peuvent également être utilisées comme valeur de la propriété CSS `background` pour définir une image d'arrière-plan. Voici un exemple :
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
Étapes d'utilisation :
①. Cliquez sur le bouton Copier de l'outil pour copier la chaîne Base64 dans le presse-papiers.
②. Si le bouton Copier n'est pas disponible, vous pouvez copier manuellement la chaîne à partir de la boîte de dialogue.
③. Collez la chaîne dans le paramètre `url()` du fichier CSS.
Vous pouvez consulter la démo CSS base64 sur CodePen.
6. Remarques
L'encodage Base64 convient aux petites images. Les fichiers volumineux peuvent augmenter la taille du fichier. Il n'est pas recommandé pour les images volumineuses ou les ressources nécessitant un chargement fréquent.
Veuillez vous assurer que la chaîne codée répond aux exigences du projet et s'affiche correctement sur différents appareils.
Grâce aux étapes ci-dessus, vous pouvez facilement utiliser les outils Base64 pour effectuer des tâches d'encodage d'images et améliorer l'efficacité du développement !