La conversione di pagine PDF in immagini per un sito Web richiede dimensioni in pixel specifiche, non un'impostazione DPI generica. Una pagina PDF convertita a 300 DPI produce un'immagine larga migliaia di pixel, molto più grande di quanto possa essere visualizzata dal layout di qualsiasi sito web. Il caricamento di quell'immagine su un sito Web spreca larghezza di banda e rallenta il caricamento della pagina. La conversione alle esatte dimensioni in pixel necessarie per il layout del sito Web produce immagini che si caricano rapidamente e vengono visualizzate in modo nitido. La conversione da PDF a immagine per l'uso sul Web riguarda la corrispondenza delle dimensioni di output con la posizione specifica che l'immagine occuperà sulla pagina.
Concetti chiave
Le dimensioni delle immagini del sito web sono misurate in pixel, non in pollici. Per convertire una pagina PDF nella dimensione in pixel corretta, determina la larghezza massima di visualizzazione dell'immagine sul sito Web, quindi imposta l'output della conversione su tale larghezza mantenendo le proporzioni della pagina. Le larghezze standard dei contenuti del sito Web vanno da 720 pixel per layout ottimizzati per dispositivi mobili a 1920 pixel per layout desktop a larghezza intera. La conversione a queste dimensioni specifiche produce immagini che non sono né inutilmente grandi né deludentemente sfocate.
Determina le dimensioni esatte in pixel di cui ha bisogno il tuo sito web
Per i siti Web che utilizzano un sistema di gestione dei contenuti con ridimensionamento automatico delle immagini, convertire a una risoluzione superiore alla dimensione di visualizzazione e lasciare che sia il CMS a gestire il ridimensionamento. Un CMS che genera più dimensioni da un singolo caricamento necessita di un'immagine di origine sufficientemente grande da supportare la dimensione generata più grande. La conversione al doppio della dimensione più grande generata dal CMS garantisce che tutte le varianti generate siano nitide.
Per i siti Web reattivi, la larghezza di visualizzazione dell'immagine cambia a seconda delle dimensioni dello schermo. Converti alla larghezza massima in cui verrà visualizzata l'immagine, che in genere è il punto di interruzione del desktop compreso tra 1200 e 1400 pixel per le immagini di contenuto. Il browser ridimensiona le immagini in modo efficiente per schermi più piccoli. La dimensione extra del file derivante dalla conversione più grande viene offerta a tutti gli utenti, inclusi gli utenti mobili che vedranno una versione ridotta. Per le implementazioni sensibili alla larghezza di banda, utilizza il markup dell'immagine reattivo per offrire immagini di dimensioni diverse in punti di interruzione diversi.
Misura la larghezza dell'area contenuto del tuo sito web in pixel. Apri il sito Web in un browser, fai clic con il pulsante destro del mouse sull'area del contenuto e seleziona Ispeziona per aprire gli strumenti per sviluppatori. La larghezza calcolata del contenitore del contenuto viene visualizzata nel diagramma del modello box. Questa è la larghezza massima che dovrebbero avere le tue immagini. Se il tuo sito web è reattivo e si adatta a diverse dimensioni dello schermo, scegli il punto di interruzione più ampio, in genere il layout del desktop con una larghezza compresa tra 1200 e 1400 pixel. Le immagini con questa larghezza appariranno nitide sul desktop e verranno ridotte proporzionalmente su tablet e telefoni.
Per gallerie di immagini e lightbox, converti a una risoluzione più elevata per supportare la visualizzazione a schermo intero. Un'immagine della galleria visualizzata a 400 pixel di larghezza in un layout a griglia potrebbe dover espandersi fino a 1600 pixel di larghezza quando si fa clic per la visualizzazione a schermo intero. La conversione alla dimensione di visualizzazione a schermo intero garantisce che l'immagine ingrandita sia nitida. La visualizzazione a griglia carica una versione ridotta, che i browser gestiscono bene. La conversione alle dimensioni di visualizzazione della galleria e l'offerta della stessa immagine per la visualizzazione a schermo intero determinano un ingrandimento sfocato. Considera lo scenario di visualizzazione massimo del tuo sito web, non solo la visualizzazione predefinita.
Prova PDF in immagine
Nessuna installazione necessaria. Funziona direttamente nel tuo browser.
Converti pagine PDF alle dimensioni esatte in pixel
Per le pagine PDF che contengono sia testo che immagini, la conversione a 2 volte la larghezza di visualizzazione preserva la nitidezza del testo sugli schermi ad alta DPI. Il testo reso con larghezza di visualizzazione 1x può apparire leggermente morbido sui display Retina perché i tratti sottili delle lettere beneficiano della densità di pixel extra. La conversione 2x raddoppia all'incirca la dimensione del file, il che è un compromesso utile per le pagine di documenti in cui la leggibilità del testo è la priorità. Per le pagine costituite principalmente da fotografie, la conversione 1x è sufficiente perché l'occhio è meno sensibile alle differenze di risoluzione nel contenuto fotografico.
Apri lo strumento di conversione da PDF a immagine e cerca le impostazioni delle dimensioni di output. Alcuni strumenti utilizzano dimensioni in pixel, ad esempio 1200 pixel di larghezza. Altri utilizzano DPI combinati con le dimensioni della pagina fisica. Se lo strumento utilizza DPI, calcola il DPI richiesto dividendo la larghezza in pixel di destinazione per la larghezza della pagina in pollici. Una pagina in formato Lettera è larga 8,5 pollici. Per produrre un'immagine larga 1200 pixel, impostare il DPI su 1200 diviso 8,5, che equivale a circa 141 DPI. L'immissione di 141 DPI produce l'esatta larghezza di 1200 pixel necessaria per il sito Web.
Per Pubblicazione digitale in cui le immagini sono incorporate in articoli o post di blog, converti a 2x la larghezza del display per supportare display Retina ad alta DPI e display simili. Un'area di contenuto che visualizza immagini con una larghezza di 800 pixel necessita di immagini di origine con una larghezza di 1600 pixel. Il browser trasmette l'immagine 2x a schermi ad alto DPI e la ridimensiona fino all'area di visualizzazione di 800 pixel, producendo testo e grafica più nitidi rispetto a un'immagine sorgente da 800 pixel. La conversione 2x raddoppia la dimensione del file ma produce una qualità visibilmente migliore sugli schermi moderni. Il convertitore da PDF a immagine di WukongPDF accetta la larghezza dei pixel come input diretto, quindi inserisci la larghezza target e lo strumento calcola automaticamente il DPI corrispondente.
Scegli il formato immagine giusto per la pubblicazione sul sito web
| Formato | Ideale per | Compressione | Note |
|---|---|---|---|
| PNG | Testo, grafici, disegni al tratto | Senza perdite | File più grandi, testo nitido, supporta la trasparenza |
| JPEG | Fotografie, pagine scannerizzate | Con perdita | File più piccoli, fotorealistici, senza trasparenza |
| WebP | Siti web moderni, tutti i contenuti | Entrambi | Migliore compressione, non supportata da browser molto vecchi |
| AVIF | Prestazioni web all'avanguardia | Entrambi | File più piccoli, supporto limitato degli strumenti per la conversione PDF |
Per la maggior parte delle conversioni da PDF a sito Web, WebP offre il miglior equilibrio tra qualità e dimensioni del file. Un'immagine WebP da 1200 pixel di una tipica pagina di un documento è più piccola del 40-60% rispetto all'equivalente PNG, pur mantenendo una qualità visivamente identica. Se il tuo sito web non supporta WebP, PNG è la scelta migliore per le pagine di documenti contenenti testo e JPEG con una qualità compresa tra l'85 e il 90% è la scelta migliore per le pagine contenenti fotografie.
Conversione in batch di PDF multipagina per gallerie di siti Web
Per PDF molto grandi con centinaia di pagine, suddividi la conversione batch in gruppi di 50 pagine. Alcuni strumenti di conversione hanno limiti di memoria che causano errori su batch molto grandi. L'elaborazione in gruppi più piccoli richiede lo stesso tempo totale ma evita la frustrazione di una conversione non riuscita alla pagina 347 di 400 che richiede il riavvio dell'intero batch.
Per un PDF multipagina che diventerà una galleria di immagini di un sito Web, converti tutte le pagine in un'unica operazione batch con le stesse dimensioni in pixel. Il batch produce immagini di dimensioni coerenti che vengono visualizzate in modo uniforme nel layout della galleria. Assegnare un nome ai file di output con una convenzione di denominazione coerente che includa il numero di pagina, ad esempio pagina-documento-01.webp, pagina-documento-02.webp e così via. Questa convenzione di denominazione si integra facilmente con i plugin della galleria e JavaScript personalizzato che prevede file di immagine numerati in sequenza.
Dopo la conversione, esegui le immagini attraverso uno strumento di ottimizzazione delle immagini per ridurre ulteriormente le dimensioni del file senza perdita visibile di qualità. Strumenti come ImageOptim, TinyPNG e Squoosh applicano una compressione aggiuntiva che il convertitore PDF potrebbe non aver applicato. Il secondo passaggio di compressione può ridurre le dimensioni del file di un ulteriore 20-40% sui file PNG e JPEG. Per una galleria di 50 pagine di documenti, il risparmio cumulativo di larghezza di banda è significativo sia per i costi di hosting del sito Web che per il tempo di caricamento della pagina del visitatore.
Domande frequenti
Devo convertire le pagine PDF in immagini nello spazio colore sRGB per l'utilizzo sul Web? SÌ. La maggior parte delle immagini dei siti Web dovrebbe essere nello spazio colore sRGB perché è lo spazio colore standard per i browser web. La conversione in sRGB garantisce un aspetto dei colori coerente tra diversi browser e sistemi operativi. Se il PDF utilizza uno spazio colore CMYK o Adobe RGB, la conversione in sRGB potrebbe causare lievi variazioni di colore. Visualizza l'anteprima dell'immagine convertita in un browser prima della pubblicazione per verificare che i colori siano accettabili.
Cosa succede se il mio sito web è responsivo e la larghezza di visualizzazione dell'immagine cambia con le dimensioni dello schermo?
Converti alla larghezza di visualizzazione massima in cui verrà visualizzata l'immagine, in genere il punto di interruzione del desktop. Il browser ridimensiona automaticamente l'immagine per schermi più piccoli. Un'immagine di 1200 pixel di larghezza visualizzata a 400 pixel su un telefono appare nitida perché viene ridimensionata, non ingrandita. La dimensione extra del file derivante dalla conversione ottimizzata per desktop viene offerta a tutti gli utenti, che rappresenta il compromesso per supportare l'intera gamma di risoluzioni. Per le implementazioni sensibili alla larghezza di banda, utilizza il markup dell'immagine reattivo che offre immagini di dimensioni diverse in punti di interruzione diversi.
Posso convertire una pagina PDF in un'immagine con sfondo trasparente?
Solo se la pagina PDF stessa non ha sfondo. La maggior parte delle pagine PDF hanno uno sfondo bianco esplicito, che viene convertito come sfondo bianco nell'immagine. Per produrre un'immagine con uno sfondo trasparente, rimuovi lo sfondo della pagina dal PDF prima della conversione. Ciò richiede un editor PDF in grado di eliminare l'oggetto di sfondo dal flusso di contenuto della pagina. La pagina PDF risultante avrà uno sfondo trasparente e la conversione in PNG ne manterrà la trasparenza.
Devo convertire le pagine PDF in immagini a 72 DPI per l'uso sul web come comunemente raccomandato?
La raccomandazione dei 72 DPI è superata. Ha avuto origine quando la maggior parte dei monitor dei computer aveva una densità fisica di pixel di circa 72 pixel per pollice. I monitor moderni hanno densità di pixel da 100 a 200 o più pixel per pollice. La conversione di una pagina PDF a 72 DPI e la visualizzazione con uno zoom del 100% su un monitor moderno produce un'immagine visibilmente morbida. Utilizza il metodo della dimensione in pixel sopra descritto invece di un DPI fisso. Il DPI corretto è ciò che produce le giuste dimensioni in pixel per il layout specifico del tuo sito web.
Prova PDF in immagine
Nessuna installazione necessaria. Funziona direttamente nel tuo browser.