Inclure des images

Temps de génération

Les image influencent le temps de chargement d’une page web. Il en va de même pour la génération des documents ; ajouter de nombreuses images ou des images lourdes peut ralentir le temps de génération.

Pour obtenir les meilleures performances, restez attentif aux images que vous utilisez.

Lorsque vous avez la main sur le fichiers vous pouvez tirer parti d’outils gratuits comme ImageOptim pour les images bitmap et svgo pour les fichiers SVG.

Utiliser une URL

PDFMonkey n’heberge pas les images. Il vous faudra donc rendre les images que vous souhaitez utiliser accessibles grâce à une URL spécifique et utiliser cette URL soit dans le HTML ou dans les CSS.

Mettons que vous ayez une image accessible à l’URL https://exemple.fr/mon-image.jpg.

Dans le HTML

Pour insérer votre image directement dans le contenu vous pouvez utiliser la balise suivante :

<img src="https://exemple.fr/mon-image.jpg">

Vous pouvez également stocker cette URL dans les données dynamiques :

<img src="{{urlImage}}">

Dans les CSS

Pour utiliser votre image comme fond, vous pouvez la définir en tant que tel :

.maClass {
  background-image: url('https://exemple.fr/mon-image.jpg');
}

SVG inséré

Pour de petites images vectorielles, vous pouvez décider d’insérer directement le code XML dans le contenu HMTL.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="160" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="150,75 112.5,140 37.5,140 0,75 37.5,10 112.5,10" fill="#006791"></polygon>
</svg>

Utiliser les URI data:

Si vous ne pouvez pas héberger une image, vous pouvez choisir de l’insérer directement au format datauri.

Dans le HTML

Vous pouvez insérer une image en utilisant son URI data: comme source :

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">

Dans les CSS

De la même manière vous pouvez insérer votre image dans les CSS :

.maClass {
  background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
}