Ottimizzare immagini per il web

Come ottimizzare le immagini per il web

Print Friendly, PDF & Email

Ultima modifica 25/09/2017 13:29


Oggi daremo istruzioni dettagliate su come ottimizzare le immagini che devono essere pubblicate sul web, siano da pubblicare nel vostro blog personale, oppure sul vostro sito di offerte immobiliari (magari creato da noi), oppure nel vostro email marketing.
Pubblicare immagini sul web richiede una competenza su pochi semplici aspetti, ma molto importanti.
E' necessario ricorrere a software adatti, in questo caso ci riferiremo ad uno solo, Irfan View, perché gestisce tutti gli aspetti richiesti e perché è gratuito. Le stesse operazioni potete farle anche con programmi a pagamento, tipo Photoshop o altri. Anche i concetti sono gli stessi. Certo che i possessori di Photoshop, probabilmente conosceranno già a sufficienza la materia. Potete scaricare Irfan View qui:  http://www.irfanview.com , dove troverete anche il file per la lingua italiana e il plugin per il salvataggio per il Web.

Il primo aspetto da considerare, quando si opera sul web, è la dimensione di memoria dell'immagine: l'immagine deve occupare la minor memoria possibile, in modo da permettere un caricamento rapido, specie da dispositivi con connessione lenta come quelli mobili, cioè smartphone e tablet. Il secondo aspetto è l'adattamento della visualizzazione ai piccoli schermi.
Ricorreremo dunque:

1) Alla compressione dell'immagine (non vi spaventate, non è una cosa complicata!), che ridurrà i dati che descrivono l'immagine.

2) Alla riduzione di risoluzione (altezza e larghezza) dell'immagine, siccome gli schermi degli smartphone sono piccoli, ma sopratutto hanno una connessione lenta.

Poniamo che abbiate un'immagine molto grande, ad esempio una foto scattata con una macchina fotografica. Questo produce di solito immagini ad alta definizione, quindi piuttosto "pesanti". Se avete installato Irfan View, come prima cosa dovete diminuire le dimensioni dell'immagine. Dopo aver caricato l'immagine con Irfan View (menù "File" > "Apri"), potete conoscere le sue dimensioni semplicemente guardando la parte in basso a sinistra della barra della finestra, come si vede nell'immagine seguente.

Come conoscere le dimensioni di altezza e larghezza di un'immagine
Fig.1: Come conoscere le dimensioni di altezza e larghezza di un'immagine



Le misure di altezza e larghezza delle immagini destinate alla pubblicazione sul web solitamente variano da 800 x 600 pixels a 1024 x 768 pixels. Se invece ci sono particolari esigenze grafiche, le dimensioni possono essere anche maggiori, come per le immagini destinate alla visualizzazione su computer desktop, che possono avere schermi molto grandi.

Nel nostro esempio, come si vede nella figura precedente, le misure dell'immagine sono molto grandi, anche per un computer desktop, ovvero sono di 3000 x 2005. E' quindi richiesto di scalare la foto a risoluzione inferiore.
In Irfan View, andate nel menu "Immagine", e poi in "Ridimensiona/ricampiona", come vedete nella figura seguente.

Come rimpicciolire un'immagine per il web
Fig.2: Come rimpicciolire un'immagine per il web



Vi apparirà il seguente pannello, che riporta altezza e larghezza dell'immagine in questione.

Come scalare un'immagine con Irfan View
Fig.3: Come scalare un'immagine con Irfan View.



Spuntiamo la casella indicata dalla freccia, in modo che le proporzioni dell'immagine, cioè il rapporto fra altezza e larghezza, siano preservate. In caso contrario potremmo avere un'immagine schiacciata in senso verticale od orizzontale.
Fatto questo selezioniamo una delle dimensioni dell'immagine. Per convenienza selezioneremo la dimensione più grande, in questo caso la larghezza (3000 pixels contro 2005), e la imposteremo alla misura preferita, ad esempio 800 pixels, che ridurrà molto la memoria occupata.

Nella parte bassa del pannello, troviamo scritto "DPI: 72": questo parametro è molto importante, ma a noi interessa solo che vada bene per gli schermi. Quindi, se non c'è già scritto, scrivete "72" in questo campo.
Premiamo "OK" e vedremo che ora l'immagine è larga solo 800 punti (pixels), mentre l'altezza sarà calcolata in automatico al giusto valore, siccome avevamo messo la spunta su "Mantieni le proporzioni".

Ora resta solo la compressione. Le foto in formato JPG consentono di eliminare i dettagli non percepibili o in eccesso, ottenendo un'immagine più compatta. Invece gli altri due formati usati sul web, ovvero quello GIF e quello PNG, consentono unicamente di diminuire i colori, sempre per risparmiare memoria. In ogni caso tutte queste riduzioni diminuiscono la qualità generale dell'immagine, ma entro certi limiti, la perdita di qualità apparente è minima, specie se si usa il JPG.

Andiamo nel menù "File" e selezioniamo "Salva per il Web". Come abbiamo già detto, questa opzione richiede una facile installazione di un plugin che si trova sullo stesso sito da cui avete scaricato Irfan View.
Apparirà una finestra divisa in due parti: a sinistra la foto originale e a destra la risultante della compressione.
Come si vede dalla figura seguente, la dimensione è ancora eccessiva, ovvero 400 kilobyte.

Compre comprimere un'immagine JPG per il web
Fig.4: Come comprimere un'immagine JPG per il web



Per il web si richiedono immagini molto più compatte, massimo 100-200 KB, e di solito anche meno, tranne se ovviamente non dovete mostrare delle opere di grafica o fotografia.
Scegliamo come formato di immagine il JPG, poiché per le foto è il più adatto. La qualità delle immagini JPG è compresa fra 0, la peggiore ma con la minore dimensione del file, e 100, la migliore e con la massima dimensione. Un livello accettabile, di solito è compreso fra 50 e 70.
Spostiamo il cursore della qualità dell'immagine verso destra o sinistra, fino a raggiungere un buon compromesso fra lo spazio di memoria in Kilobyte occupato dall'immagine e la qualità dell'immagine risultante.
A questo punto possiamo salvare l'immagine: il lavoro è finito!
Le foto delle pubblicità che vedete su Internet sono molto compresse, ma la perdita di qualità è irrilevante.
Prossimamente vedremo come proteggere un'immagine con il diritto d'autore per la copia e la diffusione dell'immagine.

Copyright ©2017 operedigitali.com - All right reserved.

Print Friendly, PDF & Email