Le immagini compresse si ri­per­cuo­to­no po­si­ti­va­men­te sui tempi di ca­ri­ca­men­to delle pagine web. Ma come si com­pri­mo­no le immagini senza grandi perdite di qualità? E quali strumenti hai a di­spo­si­zio­ne? Qui di seguito ti forniamo dei consigli su come com­pri­me­re le immagini.

Perché dovrei com­pri­me­re le mie immagini?

Le foto e le immagini ad alta ri­so­lu­zio­ne non sono più una rarità. Il numero di pixel delle fo­to­gra­fie digitali aumenta sempre più e così anche la di­men­sio­ne dei file. In­di­pen­den­te­men­te da questo, se utilizzi immagini per il tuo sito o desideri inviarle per e-mail, dovresti prestare at­ten­zio­ne alle di­men­sio­ni del file. Infatti, più piccoli sono i file uti­liz­za­ti, più veloce sarà la loro tra­smis­sio­ne. Ciò comporta in par­ti­co­la­re due vantaggi:

  • tempi di ca­ri­ca­men­to più veloci aumentano la sod­di­sfa­zio­ne dei vi­si­ta­to­ri e delle vi­si­ta­tri­ci (spe­cial­men­te di quelli che si collegano a internet dai di­spo­si­ti­vi mobili);
  • tempi di ca­ri­ca­men­to più veloci si ri­flet­to­no po­si­ti­va­men­te sul ranking sui motori di ricerca.

Il formato giusto dei file per le immagini sul web

Prima di inserire delle immagini su un sito, dovresti ve­ri­fi­car­ne il formato, in quanto non tutti sono adatti per l’utilizzo su internet. Tuttavia, questi cinque formati di file si prestano par­ti­co­lar­men­te bene per essere usati sulle pagine web:

  • JPG/JPEG: il formato JPG è tra i formati digitali più uti­liz­za­ti. Può vi­sua­liz­za­re fino a 16,7 milioni di colori e può essere ridotto con­si­de­re­vol­men­te (seppur con perdita di qualità). I file JPG sono adatti prin­ci­pal­men­te per me­mo­riz­za­re foto o grafiche simili a foto, so­prat­tut­to quelle con colori diversi e contrasti forti.
  • PNG: il formato PNG può vi­sua­liz­za­re da 256 (PNG8) fino a 16,7 milioni (PNG24) di colori e viene uti­liz­za­to molto spesso su internet. Rispetto al JPG può essere compresso quasi senza alcuna perdita di qualità. I file PNG sono adatti alla me­mo­riz­za­zio­ne di grafiche, loghi e testi. È possibile com­pri­me­re in formato PNG, con una piccola riduzione delle di­men­sio­ni originali, so­prat­tut­to le il­lu­stra­zio­ni con pochi colori.
  • WebP: WebP è un moderno formato di immagine svi­lup­pa­to da Google per con­sen­ti­re una migliore com­pres­sio­ne con un’elevata qualità dell’immagine. Supporta la com­pres­sio­ne sia lossy che lossless, con con­se­guen­te riduzione delle di­men­sio­ni dei file rispetto a JPEG e PNG. Grazie ad algoritmi ef­fi­cien­ti come la codifica pre­dit­ti­va, WebP è in grado di com­pri­me­re le immagini fino al 30% in meno rispetto a JPEG con una qualità pa­ra­go­na­bi­le. Il formato supporta anche la tra­spa­ren­za (canale alfa) e le ani­ma­zio­ni, ri­sul­tan­do così un’al­ter­na­ti­va versatile a PNG e GIF.
  • SVG: SVG (Scalable Vector Graphics) è un formato di immagine basato su XML, uti­liz­za­to per la grafica vet­to­ria­le. Essendo basato su de­scri­zio­ni ma­te­ma­ti­che di forme e linee, la qualità dell’immagine viene mantenuta in­di­pen­den­te­men­te dal ri­di­men­sio­na­men­to. A dif­fe­ren­za dei formati basati sui pixel, SVG può essere no­te­vol­men­te ridotto con semplici ot­ti­miz­za­zio­ni del codice e con la com­pres­sio­ne gzip senza com­pro­met­te­re la qualità visiva. Questo formato è par­ti­co­lar­men­te adatto per loghi, icone e il­lu­stra­zio­ni sul web.
  • GIF: anche i file GIF (sebbene siano in grado di ri­pro­dur­re solo 256 colori) sono uti­liz­za­ti fre­quen­te­men­te in rete. Ciò dipende so­prat­tut­to dal fatto che con il formato GIF è possibile vi­sua­liz­za­re piccole ani­ma­zio­ni, derivate dalla ri­pro­du­zio­ne di immagini una dietro l’altra, par­ti­co­lar­men­te amate sui social media e non solo.
Consiglio

La com­pres­sio­ne delle foto e delle immagini rientra tra i passaggi più im­por­tan­ti per mi­glio­ra­re la per­for­man­ce del proprio progetto web. Ci sono però altre vie per ot­ti­miz­za­re le immagini uti­liz­za­te: per questo motivo è sempre meglio indicare le di­men­sio­ni di un’immagine nel codice sorgente, di modo che il browser non debba cal­co­lar­le da solo. Anche la rimozione dei metadati (meta tag, in­for­ma­zio­ni EXIF, ecc.) si riflette po­si­ti­va­men­te sul tempo di ca­ri­ca­men­to. Se la tua ap­pli­ca­zio­ne web contiene molte immagini, si consiglia inoltre di uti­liz­za­re una Content Delivery Network (CDN).

Opzione 1: com­pri­me­re le immagini online

Se desideri com­pri­me­re le foto senza dover in­stal­la­re un software specifico, puoi ot­ti­miz­zar­le in modo facile di­ret­ta­men­te online. Per questo motivo esistono diverse offerte sul web che ti con­sen­to­no la com­pres­sio­ne gratuita. Gli strumenti si dif­fe­ren­zia­no di solito per i formati messi a di­spo­si­zio­ne, per i possibili gradi di com­pres­sio­ne e hanno spesso delle li­mi­ta­zio­ni per quanto riguarda il numero delle eventuali com­pres­sio­ni. Nei paragrafi seguenti ti pre­sen­tia­mo alcune delle migliori soluzioni.

Op­ti­mi­zil­la

Lo strumento online Op­ti­mi­zil­la di Mediafox Marketing consente di caricare fino a 20 immagini con­tem­po­ra­nea­men­te per poi com­pri­mer­le. Il pre­re­qui­si­to è che le immagini siano in formato JPEG o PNG. L’ap­pli­ca­zio­ne web ricorre per questo motivo a una com­bi­na­zio­ne di diversi algoritmi di com­pres­sio­ne che si con­trad­di­stin­guo­no per un buon rapporto di com­pres­sio­ne e per la qualità delle immagini. Tramite il cursore puoi stabilire il grado di com­pres­sio­ne, prima di scaricare i risultati sin­go­lar­men­te o tutti insieme in un file ZIP.

Immagine: Comprimere le foto con Optimizilla
Dopo che è stato in­di­vi­dua­to il grado di com­pres­sio­ne de­si­de­ra­to, con­fer­ma­lo su Op­ti­mi­zil­la con un clic su “OK”. Qui nell’esempio l’originale viene compresso del 22%.

Per trovare le migliori im­po­sta­zio­ni possibili, Op­ti­mi­zil­la ti supporta tramite vi­sua­liz­za­zio­ni in miniatura dell’immagine originale e compressa. Inoltre, lo strumento indica le ri­spet­ti­ve di­men­sio­ni del file. Tutte le immagini caricate vengono eliminate au­to­ma­ti­ca­men­te dopo un’ora dai server del servizio.

Vantaggi Svantaggi
Pos­si­bi­li­tà di adattare il grado di com­pres­sio­ne Limite di 20 com­pres­sio­ni con­tem­po­ra­nea­men­te
Vi­sua­liz­za­zio­ne in miniatura dell’originale e del risultato

TinyPNG

A dif­fe­ren­za di quanto lasci presagire il nome, TinyPNG consente la com­pres­sio­ne di file PNG, JPEG e WebP. Nella versione standard gratuita puoi ot­ti­miz­za­re con­tem­po­ra­nea­men­te fino a 20 immagini in questi tre formati, anche se le di­men­sio­ni massime per file sono limitate a 5 MB.

Immagine: Schermata del sito TinyPNG
Dopo la com­pres­sio­ne, TinyPNG indica le nuove di­men­sio­ni del file, così come le di­men­sio­ni ridotte dell’immagine (in per­cen­tua­le).

Lo strumento di Voormedia ha un grado di com­pres­sio­ne pre­de­fi­ni­to, che non si può adattare, ma riduce le di­men­sio­ni delle immagini fino all’80 percento. Sposta le foto de­si­de­ra­te tramite drag and drop nell’area messa a di­spo­si­zio­ne e suc­ces­si­va­men­te scarica i risultati nel formato JPEG o PNG o anche in un file ZIP. In al­ter­na­ti­va, è possibile caricare i file di­ret­ta­men­te sul servizio di ar­chi­via­zio­ne cloud Dropbox.

Vantaggi Svantaggi
Si possono caricare i file compressi su Dropbox Limite di 20 com­pres­sio­ni con­tem­po­ra­nea­men­te e di file di 5 MB nella versione standard)
Grado di com­pres­sio­ne non re­go­la­bi­le

iLoveIMG

iLoveIMG è una suite online completa composta da utili strumenti per l’ela­bo­ra­zio­ne di immagini. Il team di svi­lup­pa­to­ri con sede a Bar­cel­lo­na mette anche a di­spo­si­zio­ne ap­pli­ca­zio­ni con le quali si possono ri­ta­glia­re, ri­di­men­sio­na­re, con­ver­ti­re e appunto com­pri­me­re le immagini. Per quest’ultima opzione scegli il pulsante “Comprimi immagine” e inserisci infine le immagini de­si­de­ra­te tramite drag and drop o tramite la funzione di ricerca file. I possibili formati sono JPEG, PNG, SVG e GIF.

Immagine: Schermata della compressione con iLoveIMG
Al termine della com­pres­sio­ne puoi scaricare le immagini con un clic.

Anche se iLoveIMG ha un unico grado di com­pres­sio­ne, fornisce subito diverse pos­si­bi­li­tà di espor­ta­zio­ne: così non è solo possibile il download sul disco fisso locale, ma è con­sen­ti­to anche l’upload su Google Drive e Dropbox nonché la con­di­vi­sio­ne di link per il download dei file compressi. Se non ritieni sod­di­sfa­cen­te il risultato ottenuto dalla com­pres­sio­ne, puoi anche sem­pli­ce­men­te eliminare l’immagine con un clic sul simbolo del cestino.

Vantaggi Svantaggi
Upload dei file compressi su Google Drive e Dropbox Solo una modalità di com­pres­sio­ne
Di­spo­ni­bi­li altri strumenti per ri­di­men­sio­na­re, ri­ta­glia­re e con­ver­ti­re &cross Nessuna funzione di anteprima

Opzione 2: com­pri­me­re le immagini con Photoshop

Ov­via­men­te puoi com­pri­me­re le tue immagini anche con programmi di ela­bo­ra­zio­ne di immagini pro­fes­sio­na­li. Qui il primo da nominare è il leader del settore Photoshop: oltre alle sue funzioni per progetti creativi e all’ot­ti­miz­za­zio­ne delle foto, lo strumento di Adobe offre anche diverse pos­si­bi­li­tà per mo­di­fi­ca­re il formato e adattare le di­men­sio­ni dell’immagine.

Per chi gestisce i siti è par­ti­co­lar­men­te pratica l’opzione “Salva per Web”, che Adobe ha im­ple­men­ta­to spe­ci­fi­ca­ta­men­te per le foto e le immagini ot­ti­miz­za­te per i siti e gli altri progetti sul web. In questa modalità non solo sono a di­spo­si­zio­ne per la com­pres­sio­ne i prin­ci­pa­li formati per il web GIF, PNG, WebP e JPEG, ma è di­spo­ni­bi­le anche il formato di grafica raster WBMP (Wireless Bitmap) specifico per i di­spo­si­ti­vi mobili.

8siiyNVjZYQ.jpg Per vi­sua­liz­za­re questo video, sono necessari i cookie di terze parti. Puoi accedere e mo­di­fi­ca­re le im­po­sta­zio­ni dei cookie qui.

Non appena elabori un’immagine nella modalità di ot­ti­miz­za­zio­ne web di Photoshop, si apre una nuova finestra, in cui non solo puoi impostare i formati di output indicati, ma anche ot­ti­miz­za­re la foto de­si­de­ra­ta per il tuo sito, regolando il contrasto e le di­men­sio­ni. Nella finestra di anteprima lo strumento di Adobe mostra l’immagine originale e quella compressa (com­pren­si­va di valori assoluti in merito alle di­men­sio­ni), rendendo im­me­dia­ta­men­te visibili gli effetti dei singoli passaggi di com­pres­sio­ne sulla qualità.

Vantaggi Svantaggi
Anteprima live per diversi gradi di com­pres­sio­ne Richiede un PC con elevata potenza di calcolo
Di­spo­ni­bi­li diverse funzioni per l’ela­bo­ra­zio­ne di immagini Costi elevati

Opzione 3: com­pri­me­re immagini con programmi gratuiti e open source

Photoshop mostra quanto sia comoda la com­pres­sio­ne delle foto con le ap­pli­ca­zio­ni desktop. Queste so­li­ta­men­te non solo offrono più funzioni, ma a dif­fe­ren­za degli strumenti online possono essere uti­liz­za­te anche senza con­net­ter­si a internet. Per com­pri­me­re le di­men­sio­ni delle immagini sui tuoi siti non devi per forza affidarti a una soluzione premium (come la fa­mo­sis­si­ma di Adobe) o ad altre al­ter­na­ti­ve a pagamento. Se hai un budget limitato o non ti in­te­res­sa­no le funzioni di ela­bo­ra­zio­ne più complesse, raggiungi già con un programma gratuito o open source dei risultati di ot­ti­miz­za­zio­ne di prima qualità per quanto riguarda foto, immagini e simili. Ma quali degli in­nu­me­re­vo­li strumenti gratuiti a di­spo­si­zio­ne sono davvero da con­si­glia­re?

IrfanView

A partire dal 1996 il programma di ela­bo­ra­zio­ne di immagini IrfanView rientra tra le soluzioni freeware più amate per i PC Windows, dato che secondo il pro­dut­to­re le cifre dei download mensili si attestano in media a un milione. Ciò dipende so­prat­tut­to dall’al­let­tan­te modello di licenza offerto dallo strumento: mentre l’uso privato è in­te­ra­men­te gratuito, per l’uso com­mer­cia­le devi ac­qui­sta­re una licenza con un importo basso a due cifre (da pagare una volta sola).

Immagine: Schermata di IrfanView
Se salvi l’immagine come JPEG nella versione standard di IrfanView senza plugin, ti basta regolare la qualità con un cursore.

Di solito il vi­sua­liz­za­to­re di immagini supporta in­nu­me­re­vo­li formati di immagine come PNG, JPEG, GIF, BMP, WebP e tanti altri. Se è inserita un’immagine, può essere con­ver­ti­ta in ogni momento in questi formati. Se si tratta di com­pri­me­re in modo mirato immagini per il web, è però con­si­glia­bi­le la funzione da ag­giun­ge­re tramite plugin “Salva per il web”. Grazie a questa esten­sio­ne ottimizzi per livelli le immagini e le foto, dove imposti tramite un re­go­la­to­re in che misura mantenere la qualità dell’immagine originale. Un’immagine di anteprima e le di­men­sio­ni di un file compresso ti danno un’idea del risultato finale che puoi aspet­tar­ti.

Vantaggi Svantaggi
Ela­bo­ra­zio­ne per livelli Il plugin di com­pres­sio­ne dispone solo di un’in­ter­fac­cia in inglese
Funzione di anteprima e grado di com­pres­sio­ne re­go­la­bi­le

GIMP

Ri­cer­can­do tra le al­ter­na­ti­ve a Photoshop nell’ambito open source ci si imbatte im­man­ca­bil­men­te in GIMP (GNU Image Mani­pu­la­tion Program). Il programma di grafica ri­la­scia­to nel 1998 per Linux, macOS e Windows convince da anni per la sua varietà di funzioni, che ricorda molto la versione com­mer­cia­le di Adobe. Al momento supporta più di 30 formati di file, tra cui anche i formati per il web GIF, WebP, JPEG e PNG. Puoi con­ver­ti­re i tuoi file di immagine con il software GIMP in uno di questi formati web.

Immagine: Schermata di GIMP
Con GIMP puoi anche esportare l’immagine come WebP.

Con GIMP non converti però solo immagini in un formato dati più piccolo, ma hai anche a di­spo­si­zio­ne opzioni di espor­ta­zio­ne avanzate, con cui puoi com­pri­me­re un’immagine. Grazie al cursore imposti il grado di com­pres­sio­ne. Sono inoltre pratiche le opzioni avanzate: se attivi ad esempio la proprietà “Pro­gres­si­va”, la qualità dell’immagine ottenuta è leg­ger­men­te maggiore, però le singole aree vengono caricate in una sequenza precisa, di modo che poco dopo possa essere pre­sen­ta­ta una vi­sua­liz­za­zio­ne di massima dell’intera immagine.

Vantaggi Svantaggi
Open source L’anteprima mostra solo le di­men­sio­ni del file compresso
Grado di com­pres­sio­ne re­go­la­bi­le

PNG­Gaun­tlet

Il programma freeware PNG­Gaun­tlet fornisce un’in­ter­fac­cia grafica (in inglese) per i tre strumenti open source PNGOUT, OptiPNG e DeflOpt, che sono stati svi­lup­pa­ti per l’ot­ti­miz­za­zio­ne e la com­pres­sio­ne di immagini in formato PNG. L’ap­pli­ca­zio­ne, di­spo­ni­bi­le solo per Windows, è per questo motivo la soluzione perfetta per la creazione in par­ti­co­la­re di piccoli loghi, grafiche e scritte in formato PNG da inserire nel tuo progetto web. Come formati di output per il processo di com­pres­sio­ne o con­ver­sio­ne sono possibili anche JPEG, GIF, TIFF e BMP, oltre na­tu­ral­men­te a PNG.

Immagine: Schermata dell’interfaccia utente di PNGGauntlet
Se metti un segno di spunta su “Overwrite Original Files”, PNG­Gaun­tlet so­sti­tui­sce l’immagine originale au­to­ma­ti­ca­men­te con il nuovo file generato.

Hai due pos­si­bi­li­tà per com­pri­me­re le tue foto con PNG­Gaun­tlet: ricorrere al setup standard, ag­giun­gen­do una o più immagini e cliccare dopo di­ret­ta­men­te su “Optimize!”, o scegliere per prima cosa un setup per­so­na­liz­za­to, adattando le im­po­sta­zio­ni dei tre strumenti im­ple­men­ta­ti tramite l’omonimo pulsante. In­di­pen­den­te­men­te dalla via scelta, lo strumento freeware ti mostra le nuove di­men­sio­ni del file, dopo che la com­pres­sio­ne è andata a buon fine, e la riduzione delle di­men­sio­ni in per­cen­tua­le rispetto all’originale.

Vantaggi Svantaggi
Ela­bo­ra­zio­ne a livelli facile Nessuna modalità di anteprima
Per­so­na­liz­za­zio­ne del grado di com­pres­sio­ne Solo PNG come file di output
L’ultima versione risale al 2012

Ima­geOp­tim

Se desideri com­pri­me­re immagini e foto del tuo progetto web e hai bisogno di uno strumento open source per macOS, si consiglia Ima­geOp­tim, svi­lup­pa­to da Kornel Lesinski. Il programma con licenza GPL combina una manciata di strumenti per l’ot­ti­miz­za­zio­ne delle immagini, ad esempio MozJPEG, pngquant e SVGO, con­sen­ten­do in questo modo non solo la rimozione dei metadati EXIF superflui, ma anche la com­pres­sio­ne generale di immagini e foto di diverso tipo (JPEG, SVG, GIF, PNG).

Immagine: Schermata di ImageOptim
Dopo aver tra­sci­na­to il file nello strumento, viene eseguita la com­pres­sio­ne. Il segno di spunta verde indica che l’ope­ra­zio­ne è andata a buon fine. Fonte: https://ima­geop­tim.com/mac

Tramite drag and drop puoi ag­giun­ge­re i file di immagine de­si­de­ra­ti su Ima­geOp­tim, motivo per cui il programma comincia subito con la com­pres­sio­ne. Puoi però apportare modifiche alle im­po­sta­zio­ni in ogni momento e adattare i punti di forza della com­pres­sio­ne, oltre che ag­giun­ge­re o se­le­zio­na­re opzioni. Infine, basta un clic su “Ripeti” per eseguire di nuovo la con­ver­sio­ne.

Vantaggi Svantaggi
Diverse funzioni di com­pres­sio­ne Nessuna modalità di anteprima
Open source
Vai al menu prin­ci­pa­le