La conversion de pages PDF en images pour un site Web nécessite des dimensions de pixels spécifiques, et non un paramètre DPI générique. Une page PDF convertie à 300 DPI produit une image de plusieurs milliers de pixels de large, bien plus grande que ce que n'importe quelle mise en page de site Web peut afficher. Le téléchargement de cette image sur un site Web gaspille de la bande passante et ralentit le chargement des pages. La conversion aux dimensions exactes en pixels nécessaires à la mise en page du site Web produit des images qui se chargent rapidement et s'affichent avec netteté. La conversion PDF en Image pour une utilisation sur le Web consiste à faire correspondre les dimensions de sortie à la place spécifique que l'image occupera sur la page.
Points clés à retenir
Les dimensions des images de sites Web sont mesurées en pixels et non en pouces. Pour convertir une page PDF à la taille de pixel correcte, déterminez la largeur d'affichage maximale de l'image sur le site Web, puis définissez la sortie de conversion sur cette largeur tout en conservant les proportions de la page. Les largeurs standard du contenu d’un site Web vont de 720 pixels pour les mises en page optimisées pour les mobiles à 1 920 pixels pour les mises en page de bureau pleine largeur. La conversion à ces dimensions spécifiques produit des images qui ne sont ni inutilement grandes ni trop floues.
Déterminez les dimensions exactes en pixels dont votre site Web a besoin
Pour les sites Web qui utilisent un système de gestion de contenu avec redimensionnement automatique de l'image, convertissez à une résolution supérieure à la taille d'affichage et laissez le CMS gérer le redimensionnement. Un CMS qui génère plusieurs tailles à partir d'un seul téléchargement nécessite une image source suffisamment grande pour prendre en charge la plus grande taille générée. La conversion à deux fois la plus grande taille générée par le CMS garantit que toutes les variantes générées sont nettes.
Pour les sites Web réactifs, la largeur d’affichage de l’image change selon la taille de l’écran. Convertissez à la plus grande largeur à laquelle l'image apparaîtra, ce qui correspond généralement au point d'arrêt du bureau de 1 200 à 1 400 pixels pour les images de contenu. Le navigateur réduit efficacement les images pour les écrans plus petits. La taille de fichier supplémentaire résultant de la conversion plus importante est servie à tous les utilisateurs, y compris les utilisateurs mobiles qui verront une version réduite. Pour les implémentations sensibles à la bande passante, utilisez un balisage d'image réactif pour servir différentes tailles d'image à différents points d'arrêt.
Mesurez la largeur de la zone de contenu de votre site Web en pixels. Ouvrez le site Web dans un navigateur, cliquez avec le bouton droit sur la zone de contenu et sélectionnez Inspecter pour ouvrir les outils de développement. La largeur calculée du conteneur de contenu est affichée dans le diagramme du modèle de boîte. Il s'agit de la largeur maximale de vos images. Si votre site Web est réactif et s'adapte à différentes tailles d'écran, choisissez le point d'arrêt le plus large, généralement la disposition du bureau entre 1 200 et 1 400 pixels de large. Les images de cette largeur seront nettes sur un ordinateur de bureau et seront réduites proportionnellement sur les tablettes et les téléphones.
Pour les galeries d'images et les lightbox, convertissez à une résolution plus élevée pour prendre en charge l'affichage en plein écran. Une image de galerie qui s'affiche sur une largeur de 400 pixels dans une disposition en grille peut devoir s'étendre jusqu'à une largeur de 1 600 pixels lorsque vous cliquez dessus pour une visualisation en plein écran. La conversion à la taille d’affichage plein écran garantit que l’image agrandie est nette. La vue grille charge une version réduite, que les navigateurs gèrent bien. La conversion à la taille d'affichage de la galerie et la diffusion de la même image pour une visualisation en plein écran entraînent un agrandissement flou. Tenez compte du scénario d'affichage maximum de votre site Web, et pas seulement de la vue par défaut.
Essayez PDF en image
Aucune installation nécessaire. Fonctionne directement dans votre navigateur.
Convertir des pages PDF aux dimensions exactes en pixels
Pour les pages PDF contenant à la fois du texte et des images, la conversion à 2x la largeur d'affichage préserve la netteté du texte sur les écrans haute résolution. Le texte rendu avec une largeur d'affichage de 1x peut paraître légèrement doux sur les écrans Retina, car les traits fins des lettres bénéficient de la densité de pixels supplémentaire. La conversion 2x double environ la taille du fichier, ce qui constitue un compromis intéressant pour les pages de documents où la lisibilité du texte est la priorité. Pour les pages constituées principalement de photographies, la conversion 1x est suffisante car l'œil est moins sensible aux différences de résolution du contenu photographique.
Ouvrez votre outil de conversion PDF en image et recherchez les paramètres de taille de sortie. Certains outils utilisent des dimensions en pixels, par exemple 1 200 pixels de large. D'autres utilisent le DPI combiné à la taille physique de la page. Si l'outil utilise le DPI, calculez le DPI requis en divisant la largeur du pixel cible par la largeur de la page en pouces. Une page au format Lettre mesure 8,5 pouces de large. Pour produire une image de 1 200 pixels de large, réglez le DPI sur 1 200 divisé par 8,5, ce qui équivaut à environ 141 DPI. La saisie de 141 DPI produit la largeur exacte de 1 200 pixels nécessaire pour le site Web.
Pour Digital Publishing où les images sont intégrées dans des articles ou des billets de blog, convertissez à 2x la largeur d'affichage pour prendre en charge les écrans Retina haute résolution et similaires. Une zone de contenu qui affiche des images de 800 pixels de large nécessite des images source de 1 600 pixels de large. Le navigateur diffuse l'image 2x sur des écrans haute résolution et la réduit à la zone d'affichage de 800 pixels, produisant un texte et des graphiques plus nets qu'une image source de 800 pixels. La conversion 2x double la taille du fichier mais produit une qualité visiblement meilleure sur les écrans modernes. Le convertisseur PDF en image du WukongPDF accepte la largeur des pixels comme entrée directe, vous entrez donc la largeur cible et l'outil calcule automatiquement le DPI correspondant.
Choisissez le bon format d'image pour la diffusion sur le site Web
| Format | Meilleur pour | Compression | Remarques |
|---|---|---|---|
| PNG | Texte, graphiques, dessins au trait | Sans perte | Fichiers plus volumineux, texte net, prend en charge la transparence |
| JPEG | Photographies, pages numérisées | Avec perte | Fichiers plus petits, photoréalistes, pas de transparence |
| WebP | Sites Web modernes, tout le contenu | Les deux | Meilleure compression, non prise en charge par les très anciens navigateurs |
| AVIF | Des performances Web de pointe | Les deux | Fichiers les plus petits, prise en charge limitée des outils pour la conversion PDF |
Pour la plupart des conversions PDF vers site Web, WebP offre le meilleur équilibre entre qualité et taille de fichier. Une image WebP de 1 200 pixels de large d'une page de document typique est 40 à 60 % plus petite que l'équivalent PNG tout en conservant une qualité visuellement identique. Si votre site Web ne prend pas en charge WebP, PNG est le deuxième meilleur choix pour les pages de document contenant du texte, et JPEG, avec une qualité de 85 à 90 %, est le deuxième meilleur choix pour les pages contenant des photographies.
Conversion par lots de PDF multipages pour les galeries de sites Web
Pour les très gros PDF comportant des centaines de pages, divisez la conversion par lots en groupes de 50 pages. Certains outils de conversion ont des limites de mémoire qui provoquent des échecs sur de très gros lots. Le traitement en groupes plus petits prend le même temps total mais évite la frustration d'un échec de conversion à la page 347 sur 400 qui nécessite le redémarrage de l'intégralité du lot.
Pour un PDF de plusieurs pages qui deviendra une galerie d'images de site Web, convertissez toutes les pages en une seule opération par lots avec les mêmes dimensions en pixels. Le lot produit des images de taille constante qui s’affichent uniformément dans la présentation de la galerie. Nommez les fichiers de sortie avec une convention de dénomination cohérente qui inclut le numéro de page, telle que document-page-01.webp, document-page-02.webp, etc. Cette convention de dénomination s'intègre facilement aux plugins de galerie et au JavaScript personnalisé qui attend des fichiers image numérotés séquentiellement.
Après la conversion, exécutez les images via un outil d'optimisation d'image pour réduire davantage la taille du fichier sans perte de qualité visible. Des outils tels que ImageOptim, TinyPNG et Squoosh appliquent une compression supplémentaire que le convertisseur PDF n'a peut-être pas appliquée. Le deuxième passage de compression peut réduire la taille du fichier de 20 à 40 % supplémentaires sur les fichiers PNG et JPEG. Pour une galerie de 50 pages de document, les économies cumulées de bande passante sont significatives à la fois pour les coûts d'hébergement du site Web et pour le temps de chargement des pages du visiteur.
Foire aux questions
Dois-je convertir des pages PDF en images dans l’espace colorimétrique sRGB pour une utilisation sur le Web ? Oui. La plupart des images de sites Web doivent être dans l’espace colorimétrique sRVB, car il s’agit de l’espace colorimétrique standard pour les navigateurs Web. La conversion en sRGB garantit une apparence cohérente des couleurs sur différents navigateurs et systèmes d'exploitation. Si le PDF utilise un espace colorimétrique CMJN ou Adobe RVB, la conversion en sRVB peut entraîner de légers changements de couleur. Prévisualisez l'image convertie dans un navigateur avant de la publier pour confirmer que les couleurs sont acceptables.
Que faire si mon site web est responsive et que la largeur d'affichage de l'image change avec la taille de l'écran ?
Convertissez à la plus grande largeur d'affichage à laquelle l'image apparaîtra, généralement le point d'arrêt du bureau. Le navigateur réduit automatiquement l'image pour les écrans plus petits. Une image de 1 200 pixels de large affichée à 400 pixels sur un téléphone semble nette car elle est réduite et non augmentée. La taille de fichier supplémentaire résultant de la conversion optimisée pour le bureau est servie à tous les utilisateurs, ce qui constitue un compromis pour prendre en charge la plage de résolution complète. Pour les implémentations sensibles à la bande passante, utilisez un balisage d'image réactif qui sert différentes tailles d'image à différents points d'arrêt.
Puis-je convertir une page PDF en image avec fond transparent ?
Uniquement si la page PDF elle-même n'a pas d'arrière-plan. La plupart des pages PDF ont un arrière-plan blanc explicite, qui se transforme en arrière-plan blanc dans l'image. Pour produire une image avec un arrière-plan transparent, supprimez l'arrière-plan de la page du PDF avant la conversion. Cela nécessite un éditeur PDF capable de supprimer l'objet d'arrière-plan du flux de contenu de la page. La page PDF résultante aura un arrière-plan transparent et sa conversion en PNG préservera la transparence.
Dois-je convertir des pages PDF en images à 72 DPI pour une utilisation sur le Web comme cela est généralement recommandé ?
La recommandation de 72 DPI est obsolète. Cela est né lorsque la plupart des écrans d’ordinateur avaient une densité physique de pixels d’environ 72 pixels par pouce. Les moniteurs modernes ont des densités de pixels de 100 à 200 pixels par pouce ou plus. La conversion d'une page PDF à 72 DPI et son affichage avec un zoom de 100 % sur un moniteur moderne produisent une image visiblement douce. Utilisez la méthode de dimension en pixels décrite ci-dessus au lieu d'un DPI fixe. Le DPI correct est celui qui produit les bonnes dimensions en pixels pour la mise en page spécifique de votre site Web.
Essayez PDF en image
Aucune installation nécessaire. Fonctionne directement dans votre navigateur.