Pourquoi mon PDF PDFMonkey est-il si volumineux ?

Des images source surdimensionnées en sont presque toujours la cause. Le moteur de rendu embarque tous les pixels source dans le PDF quelle que soit la taille d’affichage. Redimensionnez vos images à 1,5–2× leur taille d’affichage CSS pour réduire drastiquement le poids du fichier.

Quelle résolution d’image utiliser pour les PDF PDFMonkey ?

Pour les documents imprimés, 150 PPP (environ 1,5× la taille d’affichage CSS) est une bonne valeur par défaut. Pour un affichage écran uniquement, 96 PPP (1× la taille CSS) suffit. Au-delà de 200 PPP, les gains sont minimes tandis que la taille du fichier augmente significativement.

Résolution des images et poids des fichiers

Si vos documents générés sont plus volumineux que prévu, les images en sont presque certainement la cause. Cette page explique comment les images se retrouvent dans vos fichiers, pourquoi elles gonflent le poids du fichier, et ce que vous pouvez faire pour y remédier.

Comment les images se retrouvent dans votre document

PDFMonkey utilise un moteur basé sur Chromium pour générer les documents. Le processus fonctionne ainsi :

Votre HTML et CSS sont chargés dans le moteur de rendu.
Le moteur rend la page : il télécharge les images, applique les styles et peint chaque pixel.
Ce n’est qu’ensuite qu’il génère le PDF à partir du résultat rendu.

C’est important parce que le PDF n’est pas un simple assemblage de vos fichiers originaux. Le moteur ré-encode chaque image dans le cadre du processus de rendu. Le format de fichier original (JPEG, WebP, PNG) est abandonné ; ce qui se retrouve dans le PDF, ce sont les données pixel du rendu.

Pourquoi les images gonflent le poids du fichier

Deux choses se produisent pendant le rendu qui peuvent augmenter considérablement la taille du fichier.

Tous les pixels source sont conservés

Si votre image source fait 3000 x 3000 pixels mais que vous l’affichez à 500 x 500 pixels CSS, le moteur embarque quand même les 9 millions de pixels source dans le PDF. La taille d’affichage dans votre template n’a aucun effet sur ce qui est stocké.

Cela surprend souvent, car sur le web, le navigateur décode l’image en mémoire mais ne la sérialise jamais dans un fichier. Dans un PDF, l’intégralité des données pixel est écrite dans le fichier de sortie.

La croissance des pixels est quadratique

Doubler la largeur et la hauteur d’une image signifie 4 fois plus de pixels, pas 2 fois. Passer de 1000 x 1000 à 3000 x 3000, c’est 9 fois plus de pixels.

La compression JPEG est perdue

C’est le principal responsable du gonflement inattendu des fichiers.

La compression JPEG ne se retrouve pas dans le PDF

Le moteur PDF de Chromium utilise une compression sans perte (similaire au PNG) pour toutes les images matricielles. Il n’utilise pas la compression JPEG. Quand vous incluez une image JPEG, le moteur la décode d’abord en pixels bruts, puis recompresse ces pixels sans perte. Un JPEG web de 100 Ko peut devenir plusieurs mégaoctets dans le PDF final.

Cela affecte tous les formats d’images matricielles de la même manière : JPEG, PNG, WebP et AVIF sont tous décodés en pixels puis ré-encodés de façon identique. Le format source n’a quasiment aucun impact sur la taille finale du PDF. Ce qui compte, c’est le nombre de pixels.

Dimensionner les images pour l’impression

Quand votre document sera imprimé, vous voulez des images suffisamment nettes pour un bon rendu sur papier. Le concept clé est le PPP (pixels par pouce, ou PPI en anglais) : combien de pixels de données image correspondent à un pouce de sortie imprimée.

Notre moteur de rendu fonctionne à 72 DPI, tandis que le CSS utilise 96 pixels par pouce comme référence. Pour calculer le PPP effectif d’une image dans votre document :

PPP effectif = (largeur en pixels de l’image x 72) / (largeur d’affichage CSS x 0,75)

En pratique, une façon plus simple d’y penser : multipliez la taille d’affichage CSS par le facteur de ce tableau pour obtenir la taille d’image source dont vous avez besoin.

Qualité d’impression	PPP cible	Taille de l’image source	Exemple
Écran ou affichage numérique uniquement	96	1x la taille CSS	400 px CSS → 400 px source
Bonne qualité d’impression	150	1,5x la taille CSS	400 px CSS → 600 px source
Haute qualité d’impression	200	2x la taille CSS	400 px CSS → 800 px source
Maximale (rarement nécessaire)	300	3x la taille CSS	400 px CSS → 1200 px source

Pour la plupart des documents imprimés (factures, rapports, certificats), 150 PPP suffit amplement. Au-delà de 200 PPP, les gains sont imperceptibles pour la plupart des gens, alors que la taille du fichier augmente significativement.

Si votre document est uniquement consulté à l’écran (pièces jointes ouvertes dans un lecteur PDF, par exemple), 96 PPP (1x la taille CSS) suffit. Il n’y a aucun bénéfice à inclure des pixels supplémentaires qui ne seront jamais imprimés.

Ce qui alourdit le fichier (et quoi faire)

Facteur	Impact	Que faire
Images source surdimensionnées	Tous les pixels sont stockés dans le PDF, même ceux non affichés	Redimensionner à 1,5-2x la taille d’affichage CSS
Grandes dimensions d’image	2x la largeur = 4x le poids du fichier (croissance quadratique)	Garder les images aussi petites que vos besoins de qualité le permettent
Nombreuses images par document	Effet cumulatif sur la taille totale	Compresser et redimensionner chaque image avant l’envoi
Filtres CSS et modes de fusion	Peuvent forcer une charge de rastérisation supplémentaire	Éviter `filter`, `mix-blend-mode` et les `clip-path` complexes sur les grandes images
Copies multiples de la même image	Dédupliquées automatiquement par le moteur de rendu	Aucune action nécessaire

CSS pour contraindre la taille d’affichage des images

Utilisez max-width et max-height pour contrôler l’affichage des images dans votre template. N’oubliez pas que cela ne change que la taille d’affichage ; vous avez toujours besoin d’images source de taille appropriée.

.product-image {
  max-width: 400px;
  height: auto;
}

<!-- L'image source devrait faire ~600-800px de large pour une bonne qualité d'impression -->
<img class="product-image" src="{{product.imageUrl}}" />

Checklist pratique

Avant de générer

Redimensionnez les images source à 1,5-2x leur taille d’affichage CSS. Pas plus.
Vérifiez les dimensions des images avant de les envoyer. Une photo de 4000 x 3000 affichée à 300 x 225 pixels CSS gaspille plus de 95 % de ses données pixel.
Utilisez le SVG pour les icônes, logos et graphiques simples. Le SVG reste vectoriel dans le PDF et n’ajoute quasiment aucun poids.
Évitez les filtres CSS sur les grandes images. filter: blur(), filter: drop-shadow() et les effets similaires peuvent forcer une rastérisation supplémentaire.
Testez avec des données réalistes. Générez un document avec les images réelles que vous prévoyez d’utiliser, pas des placeholders, pour détecter les problèmes de taille en amont.

Questions fréquentes

Quelle résolution utiliser pour mes images ?

Pour les documents destinés à l’impression, 150 PPP est un bon choix par défaut. Cela signifie que votre image source doit faire environ 1,5x la taille d’affichage CSS. Pour un affichage écran uniquement, 1x (96 PPP) suffit.

Mon document fait 20 Mo. Comment le réduire ?

Vérifiez les dimensions en pixels de vos images source. C’est presque toujours la cause. Redimensionnez-les à 1,5-2x leur taille d’affichage dans le template. Une photo de 4000 px de large affichée à 500 px CSS stocke 64 fois plus de données pixel que nécessaire à 1x.

Le format d’image a-t-il une importance (PNG, JPEG, WebP) ?

Le format source a très peu d’impact sur la taille du PDF car le moteur de rendu ré-encode tout avec une compression sans perte. Un JPEG de 100 Ko et un PNG de 500 Ko de la même image produiront des tailles de PDF quasi identiques. Concentrez-vous sur les dimensions en pixels, pas sur le format de fichier.

Les images SVG réduisent-elles le poids du document ?

Oui. Les SVG restent des données vectorielles dans le PDF et occupent très peu d’espace quelle que soit la taille d’affichage. Utilisez-les pour tout ce qui n’a pas besoin d’être une photographie : icônes, logos, graphiques, éléments décoratifs.

Utiliser la même image plusieurs fois augmente-t-il la taille du fichier ?

Non. Le moteur de rendu déduplique les sources d’images identiques. Si vous référencez la même URL ou le même data URI dix fois, une seule copie est stockée. En revanche, des recadrages ou transformations CSS différents de la même source peuvent ne pas être dédupliqués.

Les images en background-image CSS suivent-elles les mêmes règles ?

Oui. Les images de fond suivent les mêmes règles que les éléments <img>. Les pixels source sont embarqués en intégralité, et les mêmes recommandations de dimensionnement s’appliquent.

Pages associées

Images et liens : comment inclure des images dans vos templates (par URL, intégrées, SVG inline)
Mise en page : tailles de page, marges et arrière-plans pleine page
Générer des images au lieu de PDF : produire des fichiers WebP, PNG ou JPG
Nos moteurs : versions des moteurs de rendu et fonctionnalités

Questions fréquentes

Pourquoi mon PDF PDFMonkey est-il si volumineux ?: Des images source surdimensionnées en sont presque toujours la cause. Le moteur de rendu embarque tous les pixels source dans le PDF quelle que soit la taille d’affichage. Redimensionnez vos images à 1,5–2× leur taille d’affichage CSS pour réduire drastiquement le poids du fichier.
Quelle résolution d’image utiliser pour les PDF PDFMonkey ?: Pour les documents imprimés, 150 PPP (environ 1,5× la taille d’affichage CSS) est une bonne valeur par défaut. Pour un affichage écran uniquement, 96 PPP (1× la taille CSS) suffit. Au-delà de 200 PPP, les gains sont minimes tandis que la taille du fichier augmente significativement.
Le format JPEG ou PNG a-t-il un impact sur le poids du PDF dans PDFMonkey ?: Non. Le format source a très peu d’impact, car le moteur de rendu de PDFMonkey ré-encode toutes les images matricielles avec une compression sans perte. Un JPEG de 100 Ko et un PNG de 500 Ko de la même image produisent des PDF de tailles quasi identiques. Concentrez-vous sur les dimensions en pixels.