L'intégration d'une image place ses octets dans HTML, CSS ou dans un autre document. Il peut rendre un petit artefact autonome, mais il associe également l'image à la livraison et à la mise en cache de ce document. Décidez en fonction du flux de travail complet plutôt que de supposer que moins d'URL signifie toujours une page plus rapide.
Construire le bon wrapper
Une donnée d'image PNG URI commence par data:image/png;base64,, suivi de la représentation Base64 du fichier d'origine. Un JPEG a besoin image/jpeg; WebP besoins image/webp. Renommer un type MIME ne convertit pas les octets. Si le récepteur nécessite un JPEG, ré-encodez l'image avant de créer ses données URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">L'espace réservé ci-dessus n'est pas une image de travail ; remplacez-le par la sortie complète de l'encodeur. Si la sortie contient déjà le data: préfixe, n’en ajoutez pas un autre. Gardez les guillemets environnants équilibrés et évitez les sauts de ligne introduits par les éditeurs de texte enrichi.
Calculer la taille réelle
La partie codée nécessite quatre caractères pour trois octets d'entrée, arrondis pour compléter les groupes. Le préfixe Data URI ajoute un peu plus. Pour un fichier de 30 000 octets, la charge utile à elle seule est de 40 000 caractères. La compression HTML peut modifier la taille transférée, mais le navigateur doit toujours analyser le document et décoder l'image. Mesurez la page réelle, pas seulement le fichier source.
Une image servie séparément peut être mise en cache et réutilisée indépendamment sur plusieurs pages. Une image intégrée est liée à chaque document la contenant. Les grandes illustrations répétées sont donc de mauvais candidats à l’inlining automatique. De petites icônes ponctuelles dans un rapport autonome peuvent constituer un compromis raisonnable.
Vérifiez la destination
La politique de sécurité du contenu peut restreindre data: images. Les clients de messagerie peuvent supprimer ou refuser le contenu intégré. Un fichier prévisualisé dans votre navigateur ne prouve pas que l'application d'un destinataire l'affichera. Testez exactement l'exportation, le client de messagerie ou le système en aval que vous devez prendre en charge.
Pour les aperçus locaux temporaires, un Blob URL évite souvent de créer une grande chaîne Base64. Révoquez le URL lorsque sa vue est supprimée. Pour le HTML autonome exporté, une donnée URI peut être appropriée. Conservez le texte alternatif et les dimensions dans les deux cas. Les considérations relatives à la syntaxe et au navigateur sont abordées dans MDN : URL de données.