Select Page

Come ottimizzare le immagini per il web in 3 passi

Come ottimizzare le immagini per il web in 3 passi
Shares

L’intervento più rapido ed efficace per massimizzare la velocità di caricamento di una pagina web è ottimizzare le immagini. Un sito web lento è poco apprezzato dagli utenti e può generare penalizzazioni da parte di Google. Ciò si vede molto spesso in rete: immagini troppo grandi, troppo pesanti, che richiedono troppo tempo a caricarsi.

Eppure hai bisogno di 3 semplici passaggi per ottimizzare le immagini per il web.

Ricorda di ottimizzare le immagini giuste…

Prima di ottimizzare le immagini per il tuo blog, ricordati di scegliere sempre immagini libere da ogni vincolo di utilizzo. Non basta andare su Google Immagini o altri motori di ricerca e utilizzare la foto che vuoi. Per articoli eccezionali servono le immagini giuste.

Le immagini sono coperte spesso da diritti d’autore e di utilizzo. Utilizzarle senza il consenso del titolare consiste nel violare la legge.

Dove puoi trovare le immagini giuste?

  • su motori di ricerca di immagini libere (come Pixabay)
  • apposite raccolte messe a disposizione sul web (come quelle di Riccardo Esposito)
  • siti di immagini stock, che con un piccolo costo mensile possono offrire grandi quantità di immagini ad alta qualità. Il più economico è sicuramente GraphicStock. il più ricco è ShutterStock.

Trovata l’immagine? Ora iniziamo a sporcarci le mani…

Passo 1: ridimensionamento

Il primo passaggio lo devi svolgere in locale. Usa Photoshop o un’altra alternativa gratuita (es. Gimp). Bene o male le funzioni richieste le hanno tutti i programmi di editing fotografico.

Per prima cosa ridimensiona l’immagine. Se ti occorre una foto di 750×320 pixel non ha senso lasciarla a 1920×1080! In Photoshop questa funzione la trovi in Immagine > Dimensione immagine.

Ridimensionare l'immagine

Ridimensionare l’immagine ci permette di alleggerirla notevolmente.

Non sai il formato più efficace? Di solito in un articolo di un blog, le immagini si aggirano intorno ai 750px di larghezza (con altezza variabile in base al formato dell’immagine). In home page il discorso cambia perchè possono essere richieste immagini fino a 1920px di larghezza (ad esempio negli slider).

Ulteriore aspetto è la risoluzione. Per il web è sufficiente una risoluzione di 72 pixel per pollice (ppi). Quindi, secondo un ragionamento molto semplice, se in un pollice ci stanno 72 pixel anzichè 300, il peso dell’immagine sarà notevolmente più basso!

ATTENZIONE! Per i display Retina di Apple, è consigliato offrire immagini con dimensioni doppie rispetto al normale. Data la bassa diffusione di questi dispositivi, consiglio di applicare questa regola solamente se sappiamo selezionare l’utenza e quindi offrire immagini ottimizzate per il retina display solamente a coloro che effettivamente lo utilizzano.

Passo 2: salvataggio

Per ottimizzzare le immagini è importante scegliere il formato giusto per il salvataggio. JPG è l’estensione del 90% delle immagini sul web. Ci permette di ottenere immagini di ottima qualità e molto compresse. Se ci occorre la trasparenza allora dobbiamo optare per il più pesante PNG.

Possiamo utilizzare la funzione Salva per il web di Photoshop che ci permette di effettuare già una prima compressione (consiglio di non scendere sotto l’80% di compressione per evitare una perdità di qualità).

Salve per il web di Photoshop

L’enorme differenza di un’immagine prima e dopo la compressione.

Passo 3: compressione

Eccoci alla fase più delicata: comprimere l’immagine.

Esistono 2 forme di compressione: lossless e lossy.

La prima ci permette di ottimizzare le immagini eliminando tutte le informazioni non necessarie (i famosi meta dati). Non verrà intaccata la qualità della foto. La compressione lossy, invece, va a compromettere la qualità della fotografia per rendere il file molto più leggero.

Quali strumenti utilizzare?

Se abbiamo un sito web in WordPress esistono vari plugin che comprimono le immagini. Ecco i miei consigli:

  1. ShortPixel, a parer mio il migliore. Molto limitato in versione gratuita (100 immagini/mese), offre pacchetti a pagamento per comprimere un determinato quantitativo di immagini a prezzi davvero bassi (9,99$ per 10.000 immagini!)
  2. Kraken.io, è un plugin premium sfruttato da parecchie aziende sul web, come nVidia e Microsoft. I suoi piani non variano in base alla quantità, ma al peso e partono da 5$/mese per 500MB di immagini.
  3. WP Smush è un ottimo plugin che offre in versione gratuita una perfetta compressione lossless. Direi che se non hai soldi da spendere, questa è la soluzione ideale.

Infine ci sono i tool di terze parti, ovvero siti web che permettono di ottimizzare le immagini al di fuori di WordPress. Tra questi segnalo Optimizilla.

E tu quali strumenti utilizzi per ottimizzare le immagini per il web?

Partire da un’immagine di decine di megabyte ed arrivare ad un risultato di pochi kilobyte può dare grandi soddisfazioni.

Offrire immagini leggere permette di migliorare la user experience dei nostri visitatori, sia da desktop che da mobile.

E tu come ottimizzi le tue immagini?

Leave a reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi Tweet