Images et liens

Les images et les liens sont des éléments fondamentaux de la plupart des templates PDFMonkey. Cette page vous guide à travers chaque méthode pour inclure des éléments visuels et des liens cliquables dans vos PDF.

Inclure des images

Il existe trois façons d’inclure des images dans vos templates. Voici un comparatif rapide pour vous aider à choisir :

Images par URL

L’approche la plus courante consiste à référencer les images par URL. Si vos images sont déjà hébergées quelque part (un CDN, votre propre serveur, un bucket de stockage cloud), il suffit de pointer vers elles : simple et efficace.

Image statique : codez l’URL en dur dans votre template :

<img src="https://placekitten.com/200/300" />

Image dynamique : passez l’URL dans votre payload et référencez-la dans le template.

Payload :

{
  "imageUrl": "http://placekitten.com/200/300"
}

Template :

<img src="{{imageUrl}}" />

Image de fond : définissez une image de fond dans l’onglet CSS :

.some-class {
  background-image: url("https://placekitten.com/200/300");
}

Puis appliquez-la à n’importe quel élément dans votre onglet HTML :

<div class="some-class">
  ...
</div>

Image de fond dynamique : vous ne pouvez pas utiliser de données dynamiques depuis l’onglet CSS comme vous le faites dans l’onglet HTML, mais vous avez deux options.

Vous pouvez utiliser le style inline :

<div style="background-image: url('{{imageUrl}}');">
  ...
</div>

Ou vous pouvez utiliser un bloc <style> intégré dans votre onglet HTML :

<style>
  .some-class {
    background-image: url('{{imageUrl}}');
  }
</style>

<div class="some-class">
  ...
</div>

Vous pouvez également utiliser la technique des propriétés personnalisées CSS si vous souhaitez garder tout votre CSS dans l’onglet CSS.

Images intégrées

Si vos images ne sont pas hébergées en ligne, ou si vous êtes sur un plan gratuit, vous pouvez intégrer les données de l’image directement dans votre template ou votre payload API. L’image est autonome : rien n’est chargé depuis internet au moment de la génération.

Comment ça marche : vous fournissez l’image sous forme d’une chaîne de texte contenant l’intégralité de ses données (techniquement appelée « data URI »). Cela ressemble à une longue chaîne data:image/png;base64,R0lGODlhE.... Pas besoin de comprendre le format : il suffit de produire la chaîne et de l’utiliser comme source de l’image.

Image statique : pour une image qui ne change jamais (un logo d’entreprise, un élément décoratif), collez-la directement dans votre template :

<img src="data:image/png;base64,R0lGODlhE...UjIQA7" />

Image dynamique : si l’image provient de votre application (une photo d’utilisateur, une signature), envoyez-la dans votre payload et référencez-la dans le template.

Payload :

{
  "imageUrl": "data:image/png;base64,R0lGODlhE...UjIQA7"
}

Template :

<img src="{{imageUrl}}" />

SVG inline

Pour les icônes, les formes simples ou les graphiques que vous contrôlez au niveau du code, vous pouvez insérer du balisage SVG directement dans votre HTML :

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="purple" stroke-width="3" fill="pink" />
</svg>

Puisque le SVG inline fait partie du template lui-même, il fonctionne sur tous les plans et se charge instantanément.

Conseils de performance

Si la vitesse de génération vous préoccupe, utiliser des images plus petites est l’amélioration la plus significative. Des images plus légères se chargent plus vite, ce qui signifie une génération de documents plus rapide.

Privilégiez les formats modernes qui produisent des fichiers légers. PDFMonkey prend en charge WebP et AVIF. Des convertisseurs gratuits en ligne peuvent vous aider à réduire la taille de vos images sans perte de qualité visible.

Les images intégrées et le SVG inline évitent les requêtes réseau, ce qui aide également. Mais même dans ces cas, optimiser les données de l’image reste bénéfique.

Si vous préférez les formats classiques comme JPEG ou PNG, utilisez un outil comme ImageOptim pour réduire la taille des fichiers.

Utiliser des liens dans les PDF

Vous pouvez utiliser des liens internes et externes dans vos documents.

Liens internes

Si vous souhaitez créer un lien vers des sections spécifiques de votre PDF, cela fonctionne exactement comme dans une page web classique. Commencez par définir une ancre vers laquelle vous voulez créer un lien :

<div id="some-section">
  <!-- votre contenu ici -->
</div>

Puis créez un lien depuis un autre endroit du contenu :

<a href="#some-section">Aller à la section</a>

Liens externes

Vous pouvez créer un lien vers n’importe quelle page web sur internet en définissant un lien :

<a href="https://www.pdfmonkey.io">Visitez notre site</a>

Questions fréquentes

Comment ajouter des images a un modele PDFMonkey ?

Trois methodes : les images par URL (referencer des images hebergees sur un CDN ou un serveur — forfaits payants uniquement), les images embarquees en URI de donnees Base64 (fonctionne sur tous les forfaits, ideal pour les petits elements comme les logos), et le SVG en ligne pour les icones et graphiques simples.

Peut-on utiliser des images avec le forfait gratuit PDFMonkey ?

Oui, mais uniquement des images embarquees en Base64 ou du SVG en ligne. Les images par URL necessitent un forfait payant car elles reposent sur des ressources externes. Consultez la page Ressources externes pour plus de details.

Comment ajouter une image dynamique depuis mon payload API dans PDFMonkey ?

Transmettez l’URL de l’image dans votre payload JSON (par exemple {"imageUrl": "https://example.com/photo.jpg"}) et referencez-la dans votre modele avec une balise img : <img src="{{imageUrl}}" />.