SlideShare a Scribd company logo
1 of 26
Download to read offline
COME
OTTIMIZZARE
LE FOTO PER I
VOSTRI SITI
WEB
docente Simone Baldassin
I MIGLIORI
SOFTWARE
OPEN SOURCE
PER MAC OS E
WINDOWS PER
COMPRIMERE I
FILE IMAGE
Il web odierno non può prescindere dall’uso
di immagini di elevata qualità, se il sito è la
vetrina della nostra attività allora proprio
non ci possiamo permettere di mettere in
mostra delle foto scadenti; oltre a questo
subentrano anche una serie di fattori tecnici
dipesi dalla tipologia stessa di siti e dispositivi
di cui usufruiamo ai giorni nostri e,
solamente, rispetto a 3-4 anni fa.
Il primo tra tutti è il concetto di sito web
responsive, ovvero il sito che si adatta alla
risoluzione del display dal dispositivo da cui lo
stiamo visualizzando; le immagini, per
mantenere buona qualità in tutte le
risoluzioni, molto spesso vengono caricate
decisamente più grandi di quanto non
appaiano e, di conseguenza, vanno ottimizzate.
In secondo luogo i display retina di casa Apple
che vogliono che le immagini caricate siano
ben al doppio della risoluzione con cui
verranno visualizzate; esistono dei plug-in
jQuery che permettono di intercettare i display
e caricare l’immagine ottimizzata per retina
oppure no a seconda del caso, ma di questo
parleremo in un prossimo articolo.
Attenzione che ottimizzare un’immagine non
vuol dire perdere qualità ma comprimere al
massimo (difficilmente si riesce ad andare oltre
il 70-80%) tutti quei fattori/proprietà che la
rendono pesante. I software a disposizione
cambiano a seconda che si usi Mac o PC
Windows, vediamo le due casistiche
separatamente.
COMPRIMERE LE IMMAGINI CON MAC
ImageOptim è quasi certamente il miglior
software gratuito attualmente a disposizione
degli sviluppatori che utilizzano device della
casa di Cupertino e permette il supporto a tutti
i file siano questi JPG, PNG o GIF.
Per scaricare ImageOptim ci basta andare sul
sito ufficiale all’indirizzo:
imageoptim.com/mac
e selezionare la voce Download for Free
A questo punto possiamo spostare l’ App nella
sezione Applicazioni del nostro computer.
Una volta lanciata l’app ci viene proposto di
default di mantenere la compressione al 100%,
situazione che possiamo mantenere in caso
decidessimo di non forzare troppo
l’ottimizzazione
oppure possiamo scegliere di apportare una
maggiore compressione ai nostri file
Per fare una prova andiamo ora a scaricare da
Google immagini il poster di un film che, come
vediamo in figura, ha una dimensione di
2000×1000 pixel per un peso di oltre 500KB.
Trasciniamo il file con il drag&drop all’interno
di ImageOptim e in un batter d’occhio il gioco è
fatto.
Vediamo infatti come in pochissimi istanti e
mantenendo la sua qualità visiva il file sia
stato compresso ottimizzandone ben un 15%
rispetto al peso originale.
Se avessimo ottimizzato un PNG e non un JPG
avremmo avuto un risparmio anche da 1,2 MB
a 500KB
A onor di cronaca va detto che, se le immagini
JPG vengono gestite in maniera piuttosto
rapida e indolore senza particolari
problematiche anche in numero elevato
contemporaneamente, ben diversa è la
questione PNG; questi file infatti hanno molte
più proprietà rispetto al JPG e di conseguenza
consiglio caldamente di gestirne poche alla
volta a meno che non vogliate sentire la
ventola del vostro Mac girare come se stesse
correndo a Indianapolis con possibilità di
surriscaldamenti pericolosi per il dispositivo
stesso.
Altro accorgimento importante: ImageOptim
sovrascrive il file originale quindi attenzione a
farne sempre una copia di back-up prima di
ottimizzarlo.
COMPRIMERE LE IMMAGINI CON WINDOWS
La prima alternativa consigliata per chi invece
utilizza un PC Windows risponde al nome di
Caesium e possiamo scaricarla gratuitamente
all’indirizzo
saerasoft.com/caesium/#five
Clicchiamo quindi sulla voce download dal
menù principale e verremo ancorati al punto
della pagina dove possiamo scegliere la
versione che desideriamo.
Scaricato l’archivio zip andiamo a
decomprimerlo e lanciamo il programma di
installazione Caesium.exe.
Anche questo software supporta e gestisce i
maggiori formati grafici come JPG, PNG e BMP
e ha un opzione molto vantaggiosa che
permette di utilizzarlo anche in versione
portatile da qualsiasi Hard Disk o chiavetta
USB che sia, senza doverlo per forza installare
in ogni computer.
Per gestire le immagini ci basta quindi
selezionare dal pulsante aggiungi del
programma tutte quelle che dobbiamo
modificare. Prima di comprimere è possibile
impostare il livello di qualità e definire il
formato dell’input in uscita oppure lasciare
abbia lo stesso formato del file originale.
Esistono, ovviamente, anche una miriade di
soluzioni di compressione direttamente online.
Adesso siete pronti a sfidare la compressione
delle immagini che vi chiede pageSpeed
insights di Google.
continua la tua formazione su
www.venetoformazione.it/blog

More Related Content

What's hot

Creare un sito web con Wordpress
Creare un sito web con WordpressCreare un sito web con Wordpress
Creare un sito web con WordpressAndrea Giavara
 
Modificare i temi di WordPress
Modificare i temi di WordPressModificare i temi di WordPress
Modificare i temi di WordPressMarco Chizzali
 
Attivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprileAttivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprilelorenzoaresi
 
Corso Pratico di WordPress
Corso Pratico di WordPressCorso Pratico di WordPress
Corso Pratico di WordPressNicola Strumia
 
WordPress: creare e gestire un sito gratuitamente e senza essere un esperto
WordPress: creare e gestire un sito gratuitamente e senza essere un espertoWordPress: creare e gestire un sito gratuitamente e senza essere un esperto
WordPress: creare e gestire un sito gratuitamente e senza essere un espertoBoris Amico
 
Creare un sito con WordPress
Creare un sito con WordPressCreare un sito con WordPress
Creare un sito con WordPressEugenio Molinario
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaTiziano Fogliata
 
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo? parsimoniousmad9
 
I Temi in WordPress
I Temi in WordPress I Temi in WordPress
I Temi in WordPress Thomas Vitale
 
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG sampsonrhapfvuvdf
 
WordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicWordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicRenato Gelforte
 
Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande Register.it
 
Blogger vs wordpress
Blogger vs wordpressBlogger vs wordpress
Blogger vs wordpressvalentina446
 
Tutto Quello Che C'È Da Sapere Su Wordpress
Tutto Quello Che C'È Da Sapere Su WordpressTutto Quello Che C'È Da Sapere Su Wordpress
Tutto Quello Che C'È Da Sapere Su Wordpressambitiousgem7429
 
Elementor: esploriamo le possibilità del page builder più scaricato al mondo
Elementor: esploriamo le possibilità del page builder più scaricato al mondoElementor: esploriamo le possibilità del page builder più scaricato al mondo
Elementor: esploriamo le possibilità del page builder più scaricato al mondoSiteGround.com
 

What's hot (20)

WordPress Facilissimo: guida base
WordPress Facilissimo: guida base WordPress Facilissimo: guida base
WordPress Facilissimo: guida base
 
Creare un sito web con Wordpress
Creare un sito web con WordpressCreare un sito web con Wordpress
Creare un sito web con Wordpress
 
Modificare i temi di WordPress
Modificare i temi di WordPressModificare i temi di WordPress
Modificare i temi di WordPress
 
Attivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprileAttivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprile
 
Corso Pratico di WordPress
Corso Pratico di WordPressCorso Pratico di WordPress
Corso Pratico di WordPress
 
WordPress: creare e gestire un sito gratuitamente e senza essere un esperto
WordPress: creare e gestire un sito gratuitamente e senza essere un espertoWordPress: creare e gestire un sito gratuitamente e senza essere un esperto
WordPress: creare e gestire un sito gratuitamente e senza essere un esperto
 
Corso base wordpress
Corso base wordpressCorso base wordpress
Corso base wordpress
 
Creare un sito con WordPress
Creare un sito con WordPressCreare un sito con WordPress
Creare un sito con WordPress
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricerca
 
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
 
I Temi in WordPress
I Temi in WordPress I Temi in WordPress
I Temi in WordPress
 
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
 
WordPress 4.6 Corso Bacic
WordPress 4.6 Corso BacicWordPress 4.6 Corso Bacic
WordPress 4.6 Corso Bacic
 
Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande
 
Blogger vs wordpress
Blogger vs wordpressBlogger vs wordpress
Blogger vs wordpress
 
Weebly
WeeblyWeebly
Weebly
 
Wordpress: Guida all'uso (avanzato)
Wordpress: Guida all'uso (avanzato)Wordpress: Guida all'uso (avanzato)
Wordpress: Guida all'uso (avanzato)
 
Wordpress corso base 2013
Wordpress corso base 2013Wordpress corso base 2013
Wordpress corso base 2013
 
Tutto Quello Che C'È Da Sapere Su Wordpress
Tutto Quello Che C'È Da Sapere Su WordpressTutto Quello Che C'È Da Sapere Su Wordpress
Tutto Quello Che C'È Da Sapere Su Wordpress
 
Elementor: esploriamo le possibilità del page builder più scaricato al mondo
Elementor: esploriamo le possibilità del page builder più scaricato al mondoElementor: esploriamo le possibilità del page builder più scaricato al mondo
Elementor: esploriamo le possibilità del page builder più scaricato al mondo
 

Similar to Come ottimizzare le foto per i vostri siti web

Galileo Smart, primi passi – Stampante 3D – Kentstrapper
Galileo Smart, primi passi – Stampante 3D – KentstrapperGalileo Smart, primi passi – Stampante 3D – Kentstrapper
Galileo Smart, primi passi – Stampante 3D – KentstrapperGinestra_
 
Tell_Your_Resume_Meeting_3
Tell_Your_Resume_Meeting_3Tell_Your_Resume_Meeting_3
Tell_Your_Resume_Meeting_3Links-up
 
Estensioni di google chrome per sviluppatori
Estensioni di google chrome per sviluppatoriEstensioni di google chrome per sviluppatori
Estensioni di google chrome per sviluppatoriVenetoformazione
 
Come sovrapporre due foto - guidetecnologia.com
Come sovrapporre due foto - guidetecnologia.comCome sovrapporre due foto - guidetecnologia.com
Come sovrapporre due foto - guidetecnologia.comguidetecnologia
 
Food camp 5 marzo 2016
Food camp 5 marzo 2016Food camp 5 marzo 2016
Food camp 5 marzo 2016Paolo Valenti
 
Produzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeProduzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeIsabella Bruni
 
Produzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeProduzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeIsabella Bruni
 
Guida al Computer - Lezione 79 - Gli Aggiornamenti
Guida al Computer - Lezione 79 - Gli AggiornamentiGuida al Computer - Lezione 79 - Gli Aggiornamenti
Guida al Computer - Lezione 79 - Gli Aggiornamenticaioturtle
 
Guida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointGuida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointDaniele Cogo
 
Hosting: installare app su Hosting Linux con gli installer automatici #TipOf...
Hosting: installare app su Hosting Linux con gli installer automatici  #TipOf...Hosting: installare app su Hosting Linux con gli installer automatici  #TipOf...
Hosting: installare app su Hosting Linux con gli installer automatici #TipOf...Aruba S.p.A.
 
Leggimi di adobe audition cs5.5
Leggimi di adobe audition cs5.5Leggimi di adobe audition cs5.5
Leggimi di adobe audition cs5.5Cesar Hernandez
 
Soluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeSoluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeGianluca Vaglio
 
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Matteo Stefan
 
Photoshop- Strumenti per il giornalismo
Photoshop- Strumenti per il giornalismoPhotoshop- Strumenti per il giornalismo
Photoshop- Strumenti per il giornalismoLaura Pusceddu
 
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...caioturtle
 
Guida al computer - Lezione 85 - Il Riprisino
Guida al computer - Lezione 85 - Il RiprisinoGuida al computer - Lezione 85 - Il Riprisino
Guida al computer - Lezione 85 - Il Riprisinocaioturtle
 
Magix video easy_terratec_edition_manual_it
Magix video easy_terratec_edition_manual_itMagix video easy_terratec_edition_manual_it
Magix video easy_terratec_edition_manual_itTania Bozhova
 
2018 april 16 steps before start process english /italiano
2018 april 16 steps before start process english /italiano2018 april 16 steps before start process english /italiano
2018 april 16 steps before start process english /italianoDaniel Rueda H
 

Similar to Come ottimizzare le foto per i vostri siti web (20)

Galileo Smart, primi passi – Stampante 3D – Kentstrapper
Galileo Smart, primi passi – Stampante 3D – KentstrapperGalileo Smart, primi passi – Stampante 3D – Kentstrapper
Galileo Smart, primi passi – Stampante 3D – Kentstrapper
 
Tell_Your_Resume_Meeting_3
Tell_Your_Resume_Meeting_3Tell_Your_Resume_Meeting_3
Tell_Your_Resume_Meeting_3
 
Estensioni di google chrome per sviluppatori
Estensioni di google chrome per sviluppatoriEstensioni di google chrome per sviluppatori
Estensioni di google chrome per sviluppatori
 
Radiologia Digitale
Radiologia DigitaleRadiologia Digitale
Radiologia Digitale
 
Come sovrapporre due foto - guidetecnologia.com
Come sovrapporre due foto - guidetecnologia.comCome sovrapporre due foto - guidetecnologia.com
Come sovrapporre due foto - guidetecnologia.com
 
Food camp 5 marzo 2016
Food camp 5 marzo 2016Food camp 5 marzo 2016
Food camp 5 marzo 2016
 
Google Chrome OS
Google Chrome OSGoogle Chrome OS
Google Chrome OS
 
Produzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeProduzione e diffusione cv_multimediale
Produzione e diffusione cv_multimediale
 
Produzione e diffusione cv_multimediale
Produzione e diffusione cv_multimedialeProduzione e diffusione cv_multimediale
Produzione e diffusione cv_multimediale
 
Guida al Computer - Lezione 79 - Gli Aggiornamenti
Guida al Computer - Lezione 79 - Gli AggiornamentiGuida al Computer - Lezione 79 - Gli Aggiornamenti
Guida al Computer - Lezione 79 - Gli Aggiornamenti
 
Guida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPointGuida all'utilizzo di PowerPoint
Guida all'utilizzo di PowerPoint
 
Hosting: installare app su Hosting Linux con gli installer automatici #TipOf...
Hosting: installare app su Hosting Linux con gli installer automatici  #TipOf...Hosting: installare app su Hosting Linux con gli installer automatici  #TipOf...
Hosting: installare app su Hosting Linux con gli installer automatici #TipOf...
 
Leggimi di adobe audition cs5.5
Leggimi di adobe audition cs5.5Leggimi di adobe audition cs5.5
Leggimi di adobe audition cs5.5
 
Soluzioni per la produzione multimediale
Soluzioni per la produzione multimedialeSoluzioni per la produzione multimediale
Soluzioni per la produzione multimediale
 
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
 
Photoshop- Strumenti per il giornalismo
Photoshop- Strumenti per il giornalismoPhotoshop- Strumenti per il giornalismo
Photoshop- Strumenti per il giornalismo
 
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...
Guida al computer - Lezione 71 - Il Sistema Operativo: L'Installazione dei pr...
 
Guida al computer - Lezione 85 - Il Riprisino
Guida al computer - Lezione 85 - Il RiprisinoGuida al computer - Lezione 85 - Il Riprisino
Guida al computer - Lezione 85 - Il Riprisino
 
Magix video easy_terratec_edition_manual_it
Magix video easy_terratec_edition_manual_itMagix video easy_terratec_edition_manual_it
Magix video easy_terratec_edition_manual_it
 
2018 april 16 steps before start process english /italiano
2018 april 16 steps before start process english /italiano2018 april 16 steps before start process english /italiano
2018 april 16 steps before start process english /italiano
 

More from Venetoformazione

I Social network: citizen journalism e storytelling aziendale
I Social network: citizen journalism e storytelling aziendaleI Social network: citizen journalism e storytelling aziendale
I Social network: citizen journalism e storytelling aziendaleVenetoformazione
 
Volevo un grigio ardesia, ma sembra un topo morto
Volevo un grigio ardesia, ma sembra un topo mortoVolevo un grigio ardesia, ma sembra un topo morto
Volevo un grigio ardesia, ma sembra un topo mortoVenetoformazione
 
Illustrator, il colore mezzetinte e lo stile swinging london
Illustrator, il colore mezzetinte e lo stile swinging londonIllustrator, il colore mezzetinte e lo stile swinging london
Illustrator, il colore mezzetinte e lo stile swinging londonVenetoformazione
 
In grafica dire “nero” non basta
In grafica dire “nero” non bastaIn grafica dire “nero” non basta
In grafica dire “nero” non bastaVenetoformazione
 
5 regole d’oro di photoshop che devi conoscere
5 regole d’oro di photoshop che devi conoscere5 regole d’oro di photoshop che devi conoscere
5 regole d’oro di photoshop che devi conoscereVenetoformazione
 
5 passi per non sbagliare esecutivo di stampa con i programmi Adobe
5 passi per non sbagliare esecutivo di stampa con i programmi Adobe5 passi per non sbagliare esecutivo di stampa con i programmi Adobe
5 passi per non sbagliare esecutivo di stampa con i programmi AdobeVenetoformazione
 
Come scrivere un riepilogo efficace su Linkedin
Come scrivere un riepilogo efficace su LinkedinCome scrivere un riepilogo efficace su Linkedin
Come scrivere un riepilogo efficace su LinkedinVenetoformazione
 

More from Venetoformazione (7)

I Social network: citizen journalism e storytelling aziendale
I Social network: citizen journalism e storytelling aziendaleI Social network: citizen journalism e storytelling aziendale
I Social network: citizen journalism e storytelling aziendale
 
Volevo un grigio ardesia, ma sembra un topo morto
Volevo un grigio ardesia, ma sembra un topo mortoVolevo un grigio ardesia, ma sembra un topo morto
Volevo un grigio ardesia, ma sembra un topo morto
 
Illustrator, il colore mezzetinte e lo stile swinging london
Illustrator, il colore mezzetinte e lo stile swinging londonIllustrator, il colore mezzetinte e lo stile swinging london
Illustrator, il colore mezzetinte e lo stile swinging london
 
In grafica dire “nero” non basta
In grafica dire “nero” non bastaIn grafica dire “nero” non basta
In grafica dire “nero” non basta
 
5 regole d’oro di photoshop che devi conoscere
5 regole d’oro di photoshop che devi conoscere5 regole d’oro di photoshop che devi conoscere
5 regole d’oro di photoshop che devi conoscere
 
5 passi per non sbagliare esecutivo di stampa con i programmi Adobe
5 passi per non sbagliare esecutivo di stampa con i programmi Adobe5 passi per non sbagliare esecutivo di stampa con i programmi Adobe
5 passi per non sbagliare esecutivo di stampa con i programmi Adobe
 
Come scrivere un riepilogo efficace su Linkedin
Come scrivere un riepilogo efficace su LinkedinCome scrivere un riepilogo efficace su Linkedin
Come scrivere un riepilogo efficace su Linkedin
 

Come ottimizzare le foto per i vostri siti web

  • 1. COME OTTIMIZZARE LE FOTO PER I VOSTRI SITI WEB docente Simone Baldassin
  • 2. I MIGLIORI SOFTWARE OPEN SOURCE PER MAC OS E WINDOWS PER COMPRIMERE I FILE IMAGE
  • 3. Il web odierno non può prescindere dall’uso di immagini di elevata qualità, se il sito è la vetrina della nostra attività allora proprio non ci possiamo permettere di mettere in mostra delle foto scadenti; oltre a questo subentrano anche una serie di fattori tecnici dipesi dalla tipologia stessa di siti e dispositivi di cui usufruiamo ai giorni nostri e, solamente, rispetto a 3-4 anni fa.
  • 4. Il primo tra tutti è il concetto di sito web responsive, ovvero il sito che si adatta alla risoluzione del display dal dispositivo da cui lo stiamo visualizzando; le immagini, per mantenere buona qualità in tutte le risoluzioni, molto spesso vengono caricate decisamente più grandi di quanto non appaiano e, di conseguenza, vanno ottimizzate.
  • 5. In secondo luogo i display retina di casa Apple che vogliono che le immagini caricate siano ben al doppio della risoluzione con cui verranno visualizzate; esistono dei plug-in jQuery che permettono di intercettare i display e caricare l’immagine ottimizzata per retina oppure no a seconda del caso, ma di questo parleremo in un prossimo articolo.
  • 6. Attenzione che ottimizzare un’immagine non vuol dire perdere qualità ma comprimere al massimo (difficilmente si riesce ad andare oltre il 70-80%) tutti quei fattori/proprietà che la rendono pesante. I software a disposizione cambiano a seconda che si usi Mac o PC Windows, vediamo le due casistiche separatamente.
  • 8. ImageOptim è quasi certamente il miglior software gratuito attualmente a disposizione degli sviluppatori che utilizzano device della casa di Cupertino e permette il supporto a tutti i file siano questi JPG, PNG o GIF.
  • 9. Per scaricare ImageOptim ci basta andare sul sito ufficiale all’indirizzo: imageoptim.com/mac e selezionare la voce Download for Free
  • 10.
  • 11. A questo punto possiamo spostare l’ App nella sezione Applicazioni del nostro computer.
  • 12. Una volta lanciata l’app ci viene proposto di default di mantenere la compressione al 100%, situazione che possiamo mantenere in caso decidessimo di non forzare troppo l’ottimizzazione
  • 13. oppure possiamo scegliere di apportare una maggiore compressione ai nostri file
  • 14. Per fare una prova andiamo ora a scaricare da Google immagini il poster di un film che, come vediamo in figura, ha una dimensione di 2000×1000 pixel per un peso di oltre 500KB.
  • 15. Trasciniamo il file con il drag&drop all’interno di ImageOptim e in un batter d’occhio il gioco è fatto. Vediamo infatti come in pochissimi istanti e mantenendo la sua qualità visiva il file sia stato compresso ottimizzandone ben un 15% rispetto al peso originale.
  • 16. Se avessimo ottimizzato un PNG e non un JPG avremmo avuto un risparmio anche da 1,2 MB a 500KB
  • 17. A onor di cronaca va detto che, se le immagini JPG vengono gestite in maniera piuttosto rapida e indolore senza particolari problematiche anche in numero elevato contemporaneamente, ben diversa è la questione PNG; questi file infatti hanno molte più proprietà rispetto al JPG e di conseguenza consiglio caldamente di gestirne poche alla volta a meno che non vogliate sentire la ventola del vostro Mac girare come se stesse correndo a Indianapolis con possibilità di surriscaldamenti pericolosi per il dispositivo stesso.
  • 18. Altro accorgimento importante: ImageOptim sovrascrive il file originale quindi attenzione a farne sempre una copia di back-up prima di ottimizzarlo.
  • 19. COMPRIMERE LE IMMAGINI CON WINDOWS
  • 20. La prima alternativa consigliata per chi invece utilizza un PC Windows risponde al nome di Caesium e possiamo scaricarla gratuitamente all’indirizzo saerasoft.com/caesium/#five
  • 21.
  • 22. Clicchiamo quindi sulla voce download dal menù principale e verremo ancorati al punto della pagina dove possiamo scegliere la versione che desideriamo. Scaricato l’archivio zip andiamo a decomprimerlo e lanciamo il programma di installazione Caesium.exe.
  • 23. Anche questo software supporta e gestisce i maggiori formati grafici come JPG, PNG e BMP e ha un opzione molto vantaggiosa che permette di utilizzarlo anche in versione portatile da qualsiasi Hard Disk o chiavetta USB che sia, senza doverlo per forza installare in ogni computer.
  • 24. Per gestire le immagini ci basta quindi selezionare dal pulsante aggiungi del programma tutte quelle che dobbiamo modificare. Prima di comprimere è possibile impostare il livello di qualità e definire il formato dell’input in uscita oppure lasciare abbia lo stesso formato del file originale.
  • 25. Esistono, ovviamente, anche una miriade di soluzioni di compressione direttamente online. Adesso siete pronti a sfidare la compressione delle immagini che vi chiede pageSpeed insights di Google.
  • 26. continua la tua formazione su www.venetoformazione.it/blog