Réduire la taille d’un fichier PDF : images, polices et flux de contenu en JavaScript (React)

Un PDF est rarement simplement « trop volumineux ». Il est trop volumineux pour une porte précise — une limite de pièce jointe, un formulaire d'envoi, un quota de stockage — et ce qui l'a poussé au-delà de cette limite relève généralement de l'une de trois causes. Compresser sans savoir laquelle revient à deviner, et deviner coûte soit de la qualité, soit un nouvel échec d'envoi.

Spire.PDF for JavaScript vous fournit un compresseur avec une option pour chacun de ces trois endroits. Elles peuvent être appliquées séparément ou ensemble, et les compromis sont suffisamment différents pour qu'il vaille la peine de comprendre chacune avant de décider. Tout s'exécute dans le navigateur via WebAssembly, les fichiers circulant dans un système de fichiers virtuel (VFS), de sorte qu'un document n'a pas besoin d'être téléversé vers un service tiers pour être réduit.

Pour la configuration du projet, consultez Intégrer Spire.PDF for JavaScript dans un projet React. Les exemples ci-dessous supposent que le paquet est installé et que le module WebAssembly a été initialisé.

Ce qui rend réellement un PDF volumineux

La taille d'un fichier PDF provient de trois endroits différents, et ils se comportent de manière totalement dissemblable :

Deux documents de même longueur peuvent différer d'un ordre de grandeur pour cette raison : un contrat numérisé de cinq pages peut peser 20 Mo tandis qu'un rapport textuel de cinquante pages reste sous 1 Mo. C'est pourquoi « combien puis-je compresser ceci ? » n'a pas de réponse unique — un fichier riche en numérisations a beaucoup à rendre, et un document déjà composé principalement de texte et d'art vectoriel est proche de son plancher.

Le diagnostic vient donc en premier. Compresser un document essentiellement textuel avec des paramètres d'image ne fait presque rien, et écraser les images d'un document dont le poids réside en réalité dans ses polices sacrifie de la qualité sans aucun gain.

Les trois leviers de compression

PdfCompressor expose sa stratégie via Options, et chaque groupe de paramètres correspond à l'une des trois sources ci-dessus :

Les trois sections suivantes les abordent une par une afin que l'effet de chacune soit visible isolément. La section qui suit les combine, ce que vous voudrez généralement en production.

Compresser les images

Les images bitmap à haute résolution sont la cause unique la plus fréquente d'un PDF surdimensionné, et c'est aussi là que les gains sont les plus importants. Options.ImageCompressionOptions contrôle la mise à l'échelle et le réencodage via trois propriétés :

// Compress images in the document: resize, re-compress, and lower the quality
compressor.Options.ImageCompressionOptions.ResizeImages = true;
compressor.Options.ImageCompressionOptions.CompressImage = true;
compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.Low;

ImageQuality ne fait rien à elle seule — elle décrit seulement comment sont encodées les images passant par les deux premières propriétés, donc la définir seule vous rend le même fichier. Et comme c'est le seul levier avec perte, testez d'abord au niveau High si le PDF doit être imprimé plutôt que lu à l'écran.

Polices : compresser ou désincorporer

Pour que le texte s'affiche à l'identique sur des machines qui ne possèdent pas les polices d'origine, un PDF transporte dans le fichier les programmes de police utilisés dans son texte. Ils peuvent être sous-ensembles, mais ils ne sont jamais absents — et plusieurs familles à plusieurs graisses finissent par peser. Options.TextCompressionOptions offre deux manières très différentes de gérer cela :

// Compress font data; UnembedFonts goes further and removes the embedded fonts
compressor.Options.TextCompressionOptions.CompressFonts = true;
compressor.Options.TextCompressionOptions.UnembedFonts = true;

La combinaison ci-dessus est la plus agressive, et elle n'est sûre qu'à une seule condition : que vous sachiez ce qui affichera le document. Un lien de téléchargement ou un e-mail à un destinataire inconnu ne remplit pas cette condition — dans ce cas, gardez les polices incorporées et laissez CompressFonts faire le travail. Ne désincorporez que là où l'ensemble de polices est fixe, comme une visionneuse interne à configuration connue.

Recompresser les flux de contenu

Le texte et les commandes de dessin vectoriel d'une page résident dans des flux de contenu. Ils sont compressés lorsque le PDF est écrit, mais un document qui a été modifié à plusieurs reprises, ou qui est passé entre différents outils, peut y accumuler de la redondance. Options.CompressContents réencode ces flux :

// Re-compress the document content streams
compressor.Options.CompressContents = true;

Pris isolément, c'est le moins spectaculaire des trois — ne comptez pas sur lui pour sauver un document riche en photos. Il gagne sa place dans les documents denses en texte à mise en page complexe, et c'est le levier le plus sûr à laisser activé, puisque réencoder un flux ne change pas ce qu'il dessine.

Les trois en une seule passe

Les trois dimensions ne correspondent pas à trois exécutions distinctes. Vous pointez un seul PdfCompressor vers un fichier, définissez autant d'options que nécessaire, et écrivez le résultat une seule fois avec CompressToFile.

L'exemple ci-dessous active le redimensionnement et la recompression des images au niveau High, la compression des polices avec désincorporation, et la recompression des flux de contenu — sur un document qui contient à la fois des images haute résolution et du corps de texte :

function App() {
  const compressPdfDocument = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check that the module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF to be compressed into the VFS
    const inputFileName = 'ImageDocument.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfCompressor and point it at the PDF to compress
    let compressor = new pdfModule.PdfCompressor({ filePath: inputFileName });

    // 1. Image compression: resize and re-compress images, with a higher quality tier
    compressor.Options.ImageCompressionOptions.ResizeImages = true;
    compressor.Options.ImageCompressionOptions.CompressImage = true;
    compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.High;

    // 2. Font compression: compress font data and remove embedded fonts
    compressor.Options.TextCompressionOptions.CompressFonts = true;
    compressor.Options.TextCompressionOptions.UnembedFonts = true;

    // 3. Content compression: re-compress the document content streams
    compressor.Options.CompressContents = true;

    // Define the output file name and compress to it
    const outputFileName = 'CompressedDocument.pdf';
    compressor.CompressToFile(outputFileName);

    // Read the generated file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Compress PDF Document</h1>
      <button onClick={compressPdfDocument}>
        Generate
      </button>
    </div>
  );
}

export default App;

Document PDF compressé en combinant les trois approches

Deux remarques sur la forme de ce code. L'original reste intact dans le VFS — CompressToFile écrit un nouveau document, ce qui laisse le choix entre avant et après. Et comme le compresseur agit sur les ressources du document plutôt que sur des pages rendues, le texte reste du vrai texte : toujours sélectionnable, toujours recherchable. Seules les images sont réencodées.

Vérifier ce qui a changé

Les deux fichiers se trouvent dans le VFS, vous pouvez donc les comparer avant de remettre le résultat à l'utilisateur plutôt que de deviner si les paramètres ont produit un effet :

// Both the original and the compressed copy are in the VFS
const originalBytes = window.dotnetRuntime.Module.FS.readFile(inputFileName).length;
const compressedBytes = window.dotnetRuntime.Module.FS.readFile(outputFileName).length;

Indiquez la différence en pourcentage à côté du téléchargement plutôt que de proposer un simple bouton — cela dit immédiatement à l'utilisateur si le fichier est désormais assez petit pour sa destination. Si les deux nombres sont presque identiques, le poids ne se trouvait pas là où vous compressiez.

Adapter les paramètres au document

Problèmes courants

Le fichier a à peine diminué, et le PDF ne contient presque aucune image. La taille provient des polices ou des flux de contenu. Activez TextCompressionOptions — avec UnembedFonts uniquement si l'environnement de visualisation est connu — et ajoutez CompressContents. Les documents denses en texte réagissent à ces deux-là et à rien d'autre.

Le texte s'affiche différemment après la compression. C'est UnembedFonts qui fait exactement ce qu'il annonce. Remettez-le à false et gardez CompressFonts = true ; les données de police restent compressées, mais les glyphes demeurent dans le fichier.

Les images paraissent floues ou pixelisées dans le résultat. Soit le niveau ImageQuality est trop bas, soit ResizeImages a réduit une image qui avait besoin de sa résolution pour l'impression. Pour tout ce qui sera imprimé, commencez à High.

Le fichier compressé a la même taille que l'original. Certains documents sont déjà optimisés et n'ont plus rien d'utile à rendre. Vérifiez avec la comparaison d'octets ci-dessus plutôt que de supposer que les paramètres ont échoué.

Rien ne se passe au premier clic. Le module WebAssembly se charge de manière asynchrone. C'est à cela que sert la garde if (!pdfModule) return; — dans une véritable application, désactivez le bouton jusqu'à ce que le module signale qu'il est prêt au lieu d'afficher une alerte.

FAQ

Vers quel levier dois-je me tourner en premier ?

Les images, en supposant qu'elles soient le coupable — mais confirmez-le. Si le document est riche en texte et disproportionné par rapport à son nombre de pages, commencez par les polices et les flux de contenu et laissez les paramètres d'image de côté.

Compresser un PDF rend-il son texte illisible ou non sélectionnable ?

Non, et c'est là qu'un compresseur basé sur une API diffère des outils en ligne qui transforment chaque page en JPEG. Le texte reste du texte, l'art vectoriel reste vectoriel, et seules les images bitmap sont touchées — la copie compressée reste donc sélectionnable, recherchable et imprimable.

Puis-je compresser seulement une partie d'un document ?

Le compresseur agit sur le document dans son ensemble. Si vous avez besoin de réduire une partie d'un fichier et d'en laisser une autre intacte, fractionnez d'abord le document, compressez la partie qui en a besoin, puis fusionnez à nouveau.

Puis-je conserver l'original et proposer la copie compressée comme choix ?

Oui. CompressToFile écrit vers un nouveau nom de fichier et laisse l'entrée dans le VFS, les deux versions sont donc disponibles dans la même session — utile lorsque l'utilisateur décide de la quantité de qualité à échanger.

Cela nécessite-t-il un serveur, ou est-ce entièrement exécutable dans le navigateur ?

Entièrement. Le moteur PDF est compilé en WebAssembly et les fichiers circulent dans le VFS, le document ne quitte donc jamais l'appareil. Cela importe surtout pour précisément les documents que les gens veulent habituellement réduire — contrats, relevés, dossiers.

Voir aussi

• Intégrer Spire.PDF for JavaScript dans un projet React
• Comment ajouter des images à un PDF en JavaScript (React)
• Convertir des images en PDF en JavaScript (React)
• Comment convertir des pages PDF en images en JavaScript (React)
• Page produit de Spire.PDF for JavaScript