Ottimizzare immagini per il web


Una delle tante cose che le persone sottovalutano quando devono inserire una foto nel web è l’ottimizzazione di quella o quelle foto. [Ottimizzare un'immagine]

Caricare un’immagine così come l’abbiamo presa dalla macchinetta fotografica, dallo smartphone, dal web o da qualunque fonte sia si può rivelare in futuro un problema principalmente quando si tratta di siti internet e/o applicazioni.

In questo tutorial vorrei spiegarti un po’ di cose che dovresti sapere quando avrai a che vedere con un’immagine di grandi dimensioni.


1- Analizziamo l’immagine che vogliamo ottimizzare.


Dobbiamo tenere presente tre cose fondamentali quando abbiamo a che vedere con un’immagine.

Le dimensioni | L’estensione | Il nome dell’immagine

Questo non è un tutorial per i professionisti dell’immagine ma solo per quelli che vogliono aggiornare i loro siti e applicazioni nel miglior modo possibile. C’è un mondo dietro l’immagine.

Una volta che abbiamo l’immagine sotto mano nella nostra cartella ci sono due modi per sapere con chi abbiamo a che fare. Guarda l'img 1



Seconda opzione: Img 2
Click destro del mouse sopra l’immagine » Proprietà
Otterrai altre informazioni ma principalmente potresti avere le stesse dell’operazione anteriore.

Avendo questi dati possiamo iniziare a ottimizzare la nostra immagine.
Secondo l’esempio abbiamo un’immagine con:
Dimensioni: 3645x2734 pixels (px) = 128,59x96,45 cm [(Larghezza x Altezza)]
Dimensioni: 1,89 Mb
A noi serve un’immagine più piccola con meno px e sotto il Mb (megabyte), forse in Kb (Kilobyte)

2- Ottimizziamo ...!


Per ottimizzare le immagini ci sono tantissime opzioni. Partiamo dai programmi su internet dove basta inserire l’immagine da ottimizzare e il resto lo fanno loro.

Abbiamo anche i programmi che si installano sul nostro pc come Photoshop (per i professionisti), il concorrente open source di Photoshop, GIMP (programma gratuito e molto potente. Download qui).



Per il nostro tutorial e per i meno esperti useremo un programmino che abbiamo nel nostro pc (Windows) e per il lavoro che dovremo fare è più che sufficiente. Vi parlo di Paint. Cominciamo?

1- Apriamo Paint nel nostro pc.
2- Trasciniamo la nostra immagine dentro del programma tenendo premuto il tasto sinistro del mouse. Guardando in basso vedremo le dimensioni della nostra immagine.





1- Nel menu di Paint troverai la voce “Ridimensiona
2- Click e si aprirà la finestra di lavoro “Ridimensiona e inclina
3- Attiva il box “Pixel“ dove vedrai le dimensioni che hai anche nella barra in basso
4- Tiene attivato anche il box “Mantieni Proporzioni” (questo permetterà il cambio automatico delle dimensioni)
5- A questo punto ridimensioniamo la nostra immagine: Es. Orizzontalmente = 1024 (vedrai che Verticalmente cambierà a 768)
6- Premi “OK” per salvare le modifiche e vedrai come si ridimensiona l’immagine. (click sul bottone)




3- Salvare l'immagine


Ancora manca un passaggio per concludere il nostro lavoro. “Salvare
Anche se abbiamo ridimensionato la nostra immagine non ancora è ottimizzata per il web. Come dicevamo prima dovremo portare la nostra immagine al di sotto del valore che trovate nelle dimensioni, in questo caso (1.9 Mb) e non solo, rinominarla.



1-2 In alto a sinistra click sulla voce File » Salva con Nome » Immagine JPEG (leggi bene la didascalia di questa estensione)
3- Click sulla voce “Immagine JPEG”
4-5 Aperta la finestra “Salva con Nome” » Scegliamo dove posizionarla » Nome del file (come vedete ho scelto un nome separato dai trattini, così il navigatore lo vede meglio e anche il motore di ricerca nel web)
6- Clic su “Salva

Come vedrai adesso la nostra immagine ha queste dimensioni: 1024x768px / 147Kb ed è ottimizzata per essere inserita nel sito web oppure nell’applicazione. Questo permetterà al navigatore vederla molto più veloce.

Buon lavoro.