Convertire HTML in PNG

Q: Il PNG può avere lo sfondo trasparente invece che bianco?

Sì. Attiva **Sfondo trasparente**. La trasparenza si vede solo dove la pagina non imposta un colore di sfondo, quindi un sito con il body bianco resterà bianco. Funziona meglio per un singolo componente o badge creato come file HTML a sé.

Q: Come si crea un'immagine solo della parte superiore di una pagina lunga?

Imposta **Immagini** su una per pagina e **Pagine** su Prima pagina. Otterrai la prima sezione grande quanto una pagina invece dell'intera lunghezza. Per rifilarla poi su un riquadro preciso, usa lo strumento per [ritagliare immagine](/crop-image).

Una pagina web salvata, l'esportazione di una dashboard o il mockup di un componente diventano un PNG in cui ogni lettera e ogni linea sottile restano esattamente come le ha disegnate il browser. Si sceglie la larghezza della finestra e l'impaginazione si adatta.

oppure trascina qui File DOC, DOCX, DOCM … ·

Max 95 MB per file· Fino a 20 file· Eliminati dopo 30 minuti

Output

Converti in

Risoluzione

Immagini

I file vengono elaborati sui nostri server ed eliminati dopo 30 minuti.

Come usare questo strumento

1
Aggiungere il file HTML
Carica file .html, .htm o .mhtml, fino a 20 per volta e 95 MB ciascuno. Una pagina salvata come singolo file MHTML contiene al suo interno immagini e stili.
2
Impostare la larghezza della finestra
Larghezza della pagina HTML parte da 1280 px. Usa 390 px per il layout da smartphone o 1920 px per una dashboard ampia. Converti in è già impostato su PNG e Immagini su un'unica immagine lunga.
3
Convertire in PNG
Premi Converti in PNG. Attiva Sfondo trasparente in Impostazioni avanzate se la pagina non ha un colore di sfondo proprio e l'immagine verrà posta sopra altre grafiche.

Risposta

Come convertire HTML in PNG?

Carica il file .html o .mhtml, imposta Larghezza della pagina HTML sullo schermo che vuoi simulare e premi Converti in PNG. L'intera pagina renderizzata torna come un'unica immagine senza perdita.

Convertire HTML in PNG quando testo e linee devono restare nitidi

Il PNG è una Raccomandazione W3C dal 1996 e usa una compressione senza perdita, quindi i bordi con antialiasing di un testo da 14 px, i bordi di tabella da un pixel e il codice con colori di sintassi restano intatti. Per questo gli sviluppatori allegano PNG alle segnalazioni di bug e i designer li condividono nelle revisioni: nessuno deve chiedersi se un bordo sfocato sia un problema di CSS o un artefatto di compressione.

Il prezzo è il peso. Una pagina di testo e colori uniformi si comprime bene; una piena di foto no. Se l'acquisizione va in una chat o in un'email dove conta più il peso della nitidezza, il JPG è il file più piccolo. Per documentazione, note di rilascio, dashboard e style guide, il PNG è l'impostazione più sicura.

La larghezza determina il layout. L'HTML non ha una pagina fissa: lo stesso file mostra un design a tre colonne a 1280 px e una sola colonna impilata a 390 px. Il convertitore impagina la pagina sulla Larghezza della pagina HTML che inserisci, da 320 a 3840 px, e poi la cattura dalla prima riga al footer.

Larghezze per convertire HTML in PNG sugli schermi più comuni

195:422

390 × 844 px

Smartphone

Viewport CSS di molti iPhone recenti; mostra il layout mobile

41:59

820 × 1180 px

Tablet

iPad Air in verticale; molti siti cambiano breakpoint intorno a questo valore

8:5

1280 × 800 px

Portatile

La larghezza predefinita di questo convertitore

16:9

1920 × 1080 px

Monitor Full HD

Dashboard ampie e pannelli di amministrazione

HTML

HyperText Markup Language

HTML è il linguaggio di markup del web, descritto per la prima volta da Tim Berners-Lee all'inizio degli anni 1990 e oggi gestito da WHATWG come standard in continua evoluzione. Un file HTML descrive titoli, paragrafi, link, tabelle, immagini e moduli, mentre lo stile deriva di solito dai CSS. Ogni browser lo visualizza, ed è usato anche per i modelli di email e le pagine web salvate. Un singolo file HTML spesso dipende da immagini e fogli di stile esterni, quindi può apparire danneggiato se spostato da solo.

Compressione: –
Trasparenza: –
Animazione: –
Introdotto: 1993 · Tim Berners-Lee; maintained by WHATWG

Convertitore HTML

PNG

Portable Network Graphics

PNG è un formato raster senza perdita pubblicato nel 1996 dal PNG Development Group e poi standardizzato da W3C e ISO. Conserva ogni pixel esattamente, supporta la trasparenza alfa completa e gestisce testo, bordi netti e colori piatti senza artefatti. Questa precisione lo rende ideale per screenshot, loghi, icone e grafica di interfaccia. Il compromesso è la dimensione: le fotografie salvate in PNG sono spesso diverse volte più grandi della stessa foto in JPEG o WebP. Tutti i browser, i sistemi operativi e gli editor aprono i file PNG.

Compressione: Senza perdita
Trasparenza: Sì
Animazione: No
Introdotto: 1996 · PNG Development Group

Convertitore PNG

Si sceglie il PNG quando la pagina è fatta soprattutto di testo, codice, tabelle o elementi di interfaccia: i pixel senza perdita mantengono nitidi linee sottili e caratteri piccoli in documentazione, segnalazioni di bug e revisioni di design, dove gli artefatti del JPG si noterebbero.

Convertire HTML in PNG senza perdere stili o font

Un semplice file .html dipende spesso da risorse conservate altrove: un foglio di stile in una cartella css, immagini sul server originale, font di un servizio di font. Quando mancano, la pagina ricade su testo senza stile in un carattere predefinito. Salvando la pagina in Chrome o Edge come Pagina web, file singolo si ottiene un file .mhtml che tiene insieme stili e immagini, ed è la cosa più affidabile da caricare.

I web font seguono la stessa regola. Un font dichiarato con @font-face si carica solo se il suo file è raggiungibile; un font presente solo sul tuo computer viene sostituito con uno simile. Se la tipografia esatta è importante, incorpora il font o controlla il risultato prima di inviarlo.

Una larghezza fissa rende inoltre confrontabili fianco a fianco le acquisizioni settimanali di un report. Se il risultato deve restare testo selezionabile per la stampa, il formato da usare è invece da HTML a PDF.

Domande su HTML in PNG

Convertire HTML in PNG è meglio di uno screenshot dal proprio browser?

Lo screenshot del browser cattura solo ciò che entra nello schermo, a meno di usare uno strumento di acquisizione a pagina intera, e la larghezza dipende dalla finestra aperta. Qui la larghezza è un valore che imposti tu, quindi due acquisizioni fatte a settimane di distanza si sovrappongono perfettamente e l'intera pagina è inclusa, dalla prima riga al footer.

Perché il PNG pesa molte volte più della stessa pagina in JPG?

Il PNG memorizza ogni pixel senza perdita. Testo e colori uniformi si comprimono bene, mentre foto, sfumature e poster video no, quindi una landing page ricca di foto può produrre un PNG pesante. Per queste pagine da HTML a JPG è la scelta più leggera; per esempi di codice, grafici e interfacce di solito non vale la pena accettare la sfocatura.

Il PNG può avere lo sfondo trasparente invece che bianco?

Sì. Attiva Sfondo trasparente. La trasparenza si vede solo dove la pagina non imposta un colore di sfondo, quindi un sito con il body bianco resterà bianco. Funziona meglio per un singolo componente o badge creato come file HTML a sé.

Il convertitore esegue il JavaScript della pagina?

Il contenuto generato da uno script all'apertura della pagina può comparire, ma ciò che richiede un clic, uno scorrimento o un login no. Se un grafico o una tabella esiste solo dopo l'interazione, apri la pagina nel browser, attendi che finisca di caricarsi e salvala come file singolo prima di caricarla.

Come si crea un'immagine solo della parte superiore di una pagina lunga?

Imposta Immagini su una per pagina e Pagine su Prima pagina. Otterrai la prima sezione grande quanto una pagina invece dell'intera lunghezza. Per rifilarla poi su un riquadro preciso, usa lo strumento per ritagliare immagine.