Sfortunatamente, molti proprietari di siti web ancora non capiscono quali tipi di file immagine scegliere per i diversi casi d’uso. Il risultato? Finiscono per rallentarela velocit\u00e0 di caricamento del sito<\/a> perch\u00e9 le loro immagini non sono nel miglior formato disponibile, n\u00e9 sono ottimizzate.<\/p>\n In questo articolo, parleremo di tutte le pi\u00f9 importanti estensioni di file di immagini e quando dovreste usarle per fornire la migliore esperienza utente possibile ai vostri visitatori.<\/p>\n I tipi e i formati di file immagine sono suddivisi in due categorie principali: file immagine raster e file immagine vettoriali.<\/p>\n Diamo un’occhiata pi\u00f9 da vicino alle due categorie.<\/p>\n I formati immagine pi\u00f9 comuni per il web (JPEG, GIF e PNG<\/a>) entrano tutti nella categoria raster.<\/p>\n I tipi di file di immagini raster mostrano immagini statiche in cui ogni pixel ha un colore, una posizione e una proporzione definiti in base alla loro risoluzione (ad esempio 1280×720).<\/p>\n Poich\u00e9 sono statiche, non \u00e8 possibile ridimensionare le immagini in modo efficiente: il design originale e i pixel si allungheranno semplicemente per riempire lo spazio extra. Questo finisce per creare un’immagine sfocata, pixelata o comunque distorta.<\/p>\n La stragrande maggioranza delle fotografie o delle immagini che vedete su Internet usa un formato immagine raster.<\/p>\n SVG<\/a>, EPS, AI e PDF<\/a> sono esempi di formati di file immagine vettoriali.<\/p>\n A differenza dei formati di file immagine raster statici, dove ogni forma e colore del disegno \u00e8 legato a un pixel, questi formati sono pi\u00f9 flessibili.<\/p>\n La grafica vettoriale usa invece un sistema di linee e curve su un piano cartesiano, scalato rispetto all’area totale, non un singolo pixel.<\/p>\n Ci\u00f2 significa che \u00e8 possibile ingrandire all’infinito la risoluzione dell’immagine originale senza alcuna perdita di qualit\u00e0 o distorsione.<\/p>\n Come si pu\u00f2 vedere, la differenza tra la qualit\u00e0 delle immagini quando vengono ingrandite di 7 volte \u00e8 assolutamente incomparabile.<\/p>\n Poich\u00e9 la SVG calcola le posizioni in base a una percentuale dell’area totale e non ai pixel, non si nota alcuna pixelatura.<\/p>\n\n Qui di seguito, copriamo tutti i principali formati di file grafici, dalle immagini web raster, ai vettori, ai file di software per l’editing delle immagini.<\/p>\n Facciamo un approfondimento dettagliato per coprire i pro e i contro, il supporto del browser e del sistema operativo e i casi d’uso ideali per ogni formato.<\/p>\n JPEG (o JPG)<\/a> \u00e8 un formato di file immagine raster con compressione lossy<\/a> che lo rende adatto alla condivisione di immagini. I JPEG sono “lossy” (che significa perdita) nel senso che riducono le dimensioni del file ma anche la qualit\u00e0 delle immagini quando si utilizza il formato.<\/p>\n Il JPEG \u00e8 ancora uno dei tipi di file immagine pi\u00f9 usati che vedrete su internet grazie alla sua compressione e al supporto praticamente universale da parte di browser e sistemi operativi.<\/p>\n La maggior parte delle piattaforme di social media<\/a> (come Facebook e Instagram) trasformano automaticamente i file di immagini caricati in JPEG. Inoltre, usano dimensioni uniche per le immagini dei social<\/a> in modo da controllare la risoluzione delle vostre foto.<\/p>\n PNG \u00e8 un formato grafico raster che supporta la compressione senza perdita di dati, mantenendo il dettaglio e il contrasto tra i colori.<\/p>\n In particolare, il PNG offre una leggibilit\u00e0 del testo molto migliore rispetto al JPEG.<\/p>\n Questo rende il PNG una scelta pi\u00f9 popolare per le infografiche, i banner<\/a>, gli screenshot e altre grafiche che includono sia immagini che testo.<\/p>\n Il GIF \u00e8 un altro tipo di file immagine che rientra nel formato raster. Usa la compressione senza perdita di dati (lossless) ma “vincola” l’immagine a 8 bit per pixel e una tavolozza limitata di 256 colori.<\/p>\n Il formato GIF<\/a> \u00e8 il pi\u00f9 famoso (e il pi\u00f9 usato) per le immagini animate perch\u00e9 la sua limitazione a 8 bit mantiene le dimensioni dei file delle animazioni piccole e adatte a internet.<\/p>\n WebP \u00e8 un formato immagine sviluppato appositamente per fornire una migliore compressione di immagini sia lossy che lossless.<\/p>\n Il passaggio da JPEG e PNG a WebP pu\u00f2 aiutare a risparmiare spazio su disco del server<\/a> e una notevole larghezza di banda, con file immagine fino al 35% pi\u00f9 piccoli per una qualit\u00e0 identica.<\/p>\n Un formato che non dovrebbe mancare in questa guida ai tipi di formato immagine \u00e8 il TIFF.<\/p>\n TIFF, che \u00e8 l’abbreviazione di Tagged Image File Format, \u00e8 il formato immagine raster pi\u00f9 comunemente usato per la memorizzazione e la modifica delle immagini che verranno poi usate per la stampa.<\/p>\n Anche se supporta la compressione lossy, \u00e8 tipicamente usato come un formato di immagine lossless. Inoltre, la maggior parte delle applicazioni grafiche professionali che supportano TIFF (Photoshop, Illustrator, ecc.) non usano la compressione. Quindi, \u00e8 comune che le immagini TIFF siano di grandi dimensioni.<\/p>\n Bitmap (BMP) \u00e8 un formato di file immagine per lo pi\u00f9 obsoleto che mappa i singoli pixel con poca o nessuna compressione. Ci\u00f2 significa che i file BMP possono diventare estremamente grandi e non sono pratici da memorizzare o gestire.<\/p>\n HEIF, abbreviazione di High Efficiency Image File Format, \u00e8 un formato immagine sviluppato dal team dietro il formato video MPEG<\/a> per essere un diretto concorrente di JPEG.<\/p>\n In teoria, la compressione \u00e8 quasi due volte pi\u00f9 efficiente del JPEG, il che porta a immagini di qualit\u00e0 fino al doppio con file di dimensioni identiche.<\/p>\n \u00c8 un formato immagine raster, basato sulla mappatura dei pixel, il che significa che non \u00e8 possibile scalare le immagini senza perdere qualit\u00e0.<\/p>\n Il formato di file Scalable Vector Graphics, solitamente denominato SVG, \u00e8 stato sviluppato dal W3C come linguaggio di markup per rendere immagini bidimensionali direttamente all’interno del browser.<\/p>\n Non si basa su pixel come un formato raster, ma utilizza il testo XML per delineare forme e linee nello stesso modo in cui le equazioni matematiche creano i grafici.<\/p>\n Ci\u00f2 significa che \u00e8 possibile scalare all’infinito le immagini SVG senza alcuna perdita di qualit\u00e0.<\/p>\n In sostanza, un file EPS (Encapsulated PostScript) \u00e8 un file di immagine vettoriale usato per memorizzare le illustrazioni in Adobe Illustrator e altri software di illustrazione come CorelDraw.<\/p>\n Come i file SVG, l’EPS \u00e8 in realt\u00e0 un documento basato sul testo che delinea forme e linee con codice, piuttosto che mappare pixel e colori. Di conseguenza, i file EPS supportano anche la scalatura senza perdita di dati.<\/p>\n Probabilmente associate il PDF all’archiviazione, al salvataggio e alla lettura di documenti per lo pi\u00f9 basati sul testo. Questo \u00e8 perfettamente comprensibile: la parola documento \u00e8 proprio l\u00ec nel nome, dopo tutto.<\/p>\n Ma i file PDF sono in realt\u00e0 basati sullo stesso linguaggio PostScript che alimenta i file di immagini vettoriali EPS e possono essere usati anche per salvare immagini e illustrazioni.<\/p>\n \u00c8 il formato di immagine preferito per la memorizzazione di illustrazioni, copertine di riviste e altri file che dovranno essere successivamente stampati. \u00c8 anche la scelta preferita per i nostri ebook Kinsta<\/a>.<\/p>\n Come suggerisce il nome, il formato di file PSD \u00e8 un formato immagine utilizzato per il salvataggio dei documenti immagine e dei lavori in corso con Adobe Photoshop.<\/p>\n Non \u00e8 un formato immagine sicuro per il web<\/strong>, quindi non \u00e8 supportato da alcun browser o da visualizzatori o editor di immagini standard.<\/p>\n L’IA \u00e8 un altro formato di immagine sviluppato specificamente da Adobe per salvare non solo l’immagine, ma anche lo stato del progetto.<\/p>\n Come PSD, non \u00e8 destinato all’uso sul web<\/strong> e non \u00e8 supportato da alcun browser, n\u00e9 dalla maggior parte dei visualizzatori di immagini di default.<\/p>\n A differenza dei file PSD, \u00e8 possibile scalare liberamente i file AI senza alcuna perdita di qualit\u00e0.<\/p>\n XCF, che sta per eXperimental Computing Facility, \u00e8 un tipo di file immagine nativo dell’editor di immagini open source GIMP<\/a>. \u00c8 l’equivalente dei file PSD e salva percorsi, trasparenza, filtri e altro ancora.<\/p>\n Ancora una volta, questo \u00e8 un tipo di file nativo per l’archiviazione dei progetti e non \u00e8 supportato da alcun browser<\/strong> o visualizzatore di immagini predefinito.<\/p>\n L’INDD \u00e8 un tipo di file nativo per gli utenti di Adobe InDesign in cui \u00e8 possibile salvare i file di progetto, tra cui il contenuto della pagina, gli stili, i campioni e altro ancora.<\/p>\n Anche se a volte viene indicato come formato di file immagine, tende a collegarsi ad elementi visivi al di l\u00e0 del testo.<\/p>\n Non \u00e8 supportato da alcun browser o visualizzatore di immagini predefinito, in quanto non \u00e8 un formato sicuro per il web<\/strong>.<\/p>\n I formati immagine raw (letteralmente \u201cgrezzi\u201d) sono i tipi di file che una fotocamera digitale usa per memorizzare immagini di qualit\u00e0 completa per la successiva post-produzione e l’editing.<\/p>\n I principali formati di file di immagini raw per marca di fotocamera:<\/p>\n Invece delle 256 sfumature per canale di colore (8 bit) disponibili in un file JPEG, i file RAW offrono fino a 16.384 sfumature per canale di colore (14 bit) in una singola immagine. Questo vi d\u00e0 pi\u00f9 flessibilit\u00e0 quando modificate i colori e il contrasto in post-produzione.<\/p>\n Le immagini grezze non sono destinate al web<\/strong> o alla condivisione e non sono supportate dai principali browser o visualizzatori di immagini.<\/p>\n Sulla base dei dati relativi all\u2019uso del web, i tre formati di file immagine pi\u00f9 comuni sono PNG, JPEG e SVG.<\/p>\n Qui di seguito vediamo ci\u00f2 che li rende cos\u00ec popolari.<\/p>\n Poich\u00e9 il formato PNG si presta meglio all\u2019inserimento di testo all’interno dell’immagine, \u00e8 pi\u00f9 spesso usato per screenshot, banner (a seconda della dimensione del banner<\/a>) e altro ancora.<\/p>\n Poich\u00e9 usa la compressione senza perdita di dati, viene ad esempio impiegato anche da designer e fotografi per mostrare immagini di alta qualit\u00e0 sulle pagine web del loro portfolio<\/a>.<\/p>\n Questi due fattori, insieme al suo browser universale e al supporto del sistema operativo, ne fanno il tipo di file immagine pi\u00f9 popolare sul web. I file PNG sono presenti su un enorme 77% dei siti web.<\/p>\n La compressione lossy (con perdita di dati) implica che il JPEG sia l\u2019opzione migliore da usare per mostrare le immagini in tutto il contenuto. La perdita di qualit\u00e0 \u00e8 appena visibile all’utente medio di Internet e si pu\u00f2 risparmiare molto spazio su disco e larghezza di banda.<\/p>\n Ecco perch\u00e9 \u00e8 il secondo formato pi\u00f9 diffuso su internet, usato da quasi il 72% dei siti web. La maggior parte dei siti usa sia PNG che JPEG per scopi diversi.<\/p>\n Come promemoria: Non c’\u00e8 differenza tra JPG e JPEG<\/a>, sono due sigle diverse per indicare l\u2019estensione del file ma il formato \u00e8 lo stesso.<\/p>\n I file SVG sono file vettoriali scalabili, perfetti per icone, loghi, grafici e semplici illustrazioni. L’immagine pu\u00f2 anche essere inserita direttamente nella pagina come codice CSS<\/a>.<\/p>\n Ecco perch\u00e9 i file SVG sono al terzo posto, usati dal 27% dei siti web.<\/p>\n Anche se questo \u00e8 raramente il formato scelto per le immagini statiche, il GIF \u00e8 tornato ad essere la scelta numero uno per la condivisione di animazioni.<\/p>\n Di conseguenza, circa il 22% dei siti web usa le GIF sulle proprie pagine, anche se probabilmente usano anche PNG e JPEG come formati standard.<\/p>\n I formati immagine raw sono di altissima qualit\u00e0, ma hanno dimensioni di file irragionevolmente grandi che raggiungono le centinaia di megabyte.<\/p>\n Per le immagini web, il formato di file WebP offre file di dimensioni inferiori del 25-35%<\/a> rispetto al JPEG per foto della stessa qualit\u00e0: questo significa che \u00e8 possibile caricare immagini di qualit\u00e0 superiore per lo stesso spazio su disco e velocizzare il sito<\/a>.<\/p>\n HEIF \u00e8 un’altra alternativa a JPEG con una compressione pi\u00f9 efficiente ma non \u00e8 attualmente supportata dai principali browser.<\/p>\n I file PNG offrono una compressione senza perdita di dati, ma ci\u00f2 significa che le dimensioni dei file saranno estremamente grandi e lenti da caricare. Un singolo file PNG pu\u00f2 spesso essere di centinaia di KB o anche superare 1MB. Tuttavia, se approfittate di alcune tecniche come il lazy loading (disponibile nel core di WordPress a partire dalla versione 5.5)<\/a> e un CDN<\/a>, potreste comunque avere un sito veloce.<\/p>\n I tipi di file immagine pi\u00f9 comuni per il web che supportano la trasparenza sono PNG, WebP, GIF e persino SVG.<\/p>\n Anche la maggior parte dei formati di file immagine di progetto nativi come PSD, XCF e AI supportano la trasparenza.<\/p>\n D’altra parte, il popolare formato immagine JPEG non supporta<\/strong> la trasparenza.<\/p>\n La differenza principale tra PNG e JPEG \u00e8 che PNG \u00e8 un formato di immagine senza perdita di dati, mentre JPEG \u00e8 un formato con perdita di dati. Ci\u00f2 significa fondamentalmente che PNG usa tecniche di compressione senza sacrificare la qualit\u00e0 o il dettaglio originale dell’immagine.<\/p>\n Per il testo in immagini, screenshot di tutorial, e quando desiderate che simboli o altri elementi fini siano visibili al 100% in una foto, il PNG \u00e8 il formato giusto.<\/p>\n Come potete vedere da questa divertente immagine qui sopra, il PNG, che \u00e8 raffigurato a sinistra, \u00e8 molto pi\u00f9 bravo a visualizzare chiaramente il testo e le forme semplici se paragonato al JPEG, quello a destra.<\/p>\n Questo significa che il JPEG \u00e8 un tipo di file di immagine scadente? Niente affatto!<\/p>\nQuali Sono i Diversi Formati di File Immagine?<\/h2>\n
Formati di File Immagine Raster<\/h3>\n
![\"Immagine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Formati di File Immagini Vettoriale<\/h3>\n
![\"Ingrandimento](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
I 15 Formati di File Immagine Pi\u00f9 Popolari<\/h2>\n
1.JPEG (e JPG) – Joint Photographic Experts Group<\/h3>\n
![\"Immagine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto per il Sistema Operativo<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
2. PNG – Portable Network Graphics<\/h3>\n
![\"File](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto per il Sistema Operativo<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
3. GIF – Graphics Interchange Format<\/h3>\n
![\"Esempio](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto per il Sistema Operativo<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
4. WebP<\/h3>\n
![\"Esempio](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto per il Sistema Operativo<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"Icona](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"Bitmap](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
7. HEIF – High Efficiency Image File Format<\/h3>\n
![\"Formato](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
8. SVG – Scalable Vector Graphics<\/h3>\n
![\"Logo](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
9. EPS – Encapsulated Postscript<\/h3>\n
![\"Icona](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
10. PDF – Portable Document Format<\/h3>\n
![\"Esempio](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Vantaggi e Svantaggi<\/h4>\n
\n
Browser e Supporto OS<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
11. PSD – Photoshop Document<\/h3>\n
![\"Logo](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Vantaggi e Svantaggi<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
12. AI – Adobe Illustrator Artwork<\/h3>\n
![\"Icona](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Vantaggi e Svantaggi<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
13. XCF – eXperimental Computing Facility<\/h3>\n
![\"Icona](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Vantaggi e Svantaggi<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
14. INDD – Adobe InDesign Document<\/h3>\n
![\"Icona](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Vantaggi e Svantaggi<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
15. Formati di File per Immagini Raw<\/h3>\n
\n
Vantaggi e Svantaggi<\/h4>\n
\n
Casi d’Uso<\/h4>\n
\n
Domande Frequenti sui Formati di File Immagine<\/h2>\n
Quali sono i 3 formati di file pi\u00f9 comuni per un file immagine?<\/h3>\n
![\"Statistiche](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: Screenshot, Banner, Infografica, Immagini<\/h4>\n
2. JPEG: Immagini<\/h4>\n
3. SVG: Loghi, icone e illustrazioni<\/h4>\n
Menzione d’Onore: Immagini GIF Animate<\/h4>\n
![\"Esempio](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
Quale Formato Immagine Offre la Qualit\u00e0 Pi\u00f9 Alta?<\/h3>\n
Quali Formati di File Supportano la Trasparenza?<\/h3>\n
PNG \u00c8 Meglio di JPEG?<\/h3>\n
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/09\/png-vs-jpeg.png\")