Come ottimizzare le immagini per il web

Ottimizza e ridimensiona le immagini per il web

Ottimizzare le immagini per il web è fondamentale per ridurre il tempo di caricamento di tutto il sito. Scegliere il formato ed il peso giusto di un’immagine influenza drasticamente la velocità di apertura di quella pagina o di quell’articolo.

 

Ecco perchè è così importante ottimizzarle per il web prima di pubblicarle online.

 

Spesso chi gestisce il sito in autonomia, tende a tralasciare questo particolare e si trova ad aspettare interminabili minuti per vedere aprire le immagini o addirittura sui social, quando si vuole condividere un articolo al quale è associata quell’immagine troppo pesante.

In questo articolo vediamo come fare, partendo dalle basi.

 

Formati delle immagini

Esistono diversi formati per salvare le immagini, i principali sono soprattutto tre:

  1. JPG/JPEG
    È il formato più utilizzato in assoluto, creato appositamente per comprimere le immagini ed averle più leggere
  2. PNG
    Il formato PNG fornisce un’immagine con sfondo trasparente ed utilizza una compressione anche se meno ridotta rispetto al JPG; di conseguenza occupa un maggiore spazio rispetto ad un file JPG.
  3. GIF
    Anche le GIF possono avere uno sfondo trasparente, ma il formato supporta solo 256 colori per cui non sarà possibile utilizzarlo per illustrazioni o fotografie. Inoltre, le GIF possono essere animate.

 

Come ridimensionare le immagini

Per ridimensionare ed ottimizzare le immagini per il web ci sono vari modi e si possono usare diversi tool o programmi online e offline.

A me piace sempre essere consapevole e responsabile della dimensione di un’immagine che sto per caricare sul sito, per questo motivo le ottimizzo tutte con Photoshop. Se tu non hai Photoshop no problem.

Puoi usare Pixlr.com una programma online di grafica, simile a Photoshop.

Vai su Pixlr.com, apri l’immagine da rimpicciolire, vai nel menu Immagine / Dimensione immagine e lì si apre una finestra con le reali dimensioni dell’immagine. Quella che ho scelto nel mio esempio qui sotto è di 2.000×1.333 px.

Come ottimizzare le immagini per il web

Per rimpicciolirla, inserisci nel campo Larghezza un valore più basso di quello reale.

Nel mio caso inserisco il valore di 1.000px (la metà della larghezza originale) e il programma mi calcola in automatico l’altezza (se è attiva la voce Mantieni le proporzioni) e do OK. Ora non ti rimane che salvare la nuova immagine rimpicciolita.

Vai in File / Salva ed compila i 3 campi:

  1. Nome: Inserisci un nuovo nome dell’immagine ridimensionata per mantenere sempre l’immagine originale di partenza
  2. Formato: Scegli jpg, quello più usato online
  3. Qualità: Il programma ti propone di default una qualità all’80% e in basso la relativa dimensione. Puoi aumentare e diminuire la qualità e vedere anche quanto cambia la dimensione dell’immagine. Ti sconsiglio di scendere al di sotto di un 60%.

Ecco fatto! Hai creato la tua prima immagine ottimizzata per il web che puoi caricare sul sito.

Un’immagine ottimizzata per il web può variare tra i 150 Kb e i 300/400 Kb. Ti consiglio, se puoi, di rimanere in questo range per non appesantire troppo il sito.

 

Dove trovare immagini già ottimizzate

Se hai bisogno di immagini belle, di buona qualità e già ottimizzate per il web puoi usare Pixabay, un sito di foto stock free che ti da la possibilità di scaricare già l’immagine in diversi dimensioni e pesantezza.

Non tutte magari sono immagini belle o fanno al caso tuo, ma se trovi quella che fa per te sei già a buon punto.

Puoi scaricare quell’immagine cliccando sul bottone Download gratuito che si trova a destra dell’immagine e lì puoi scegliere la dimensione ed il peso dell’immagine che vuoi scaricare. Ecco un esempio.

Come ottimizzare le immagini per il web

Dove e come usarle

Ecco qualche altro consiglio su come e dove usare le immagini ottimizzate.

  • Se stai creando uno slider, scegli immagini che abbiamo una larghezza minima di 1.920px. L’altezza può variare a seconda di che imgombro vuoi dare nella pagina.
  • Se stai creando una sezione parallax sull’home page, usa immagini con una buona altezza, almeno 1.600 px perchè in questo modo l’immagine di fondo scorrerà lungo la sua altezza e si creerà l’effetto visivo di sovrapposizione tra testo e immagine.
  • Se cerchi un’immagine per l’articolo del tuo blog, scegline una con una larghezza massima di 1.000px o 1.200px, in questo modo hai un’immagine piuttosto leggera e di buona qualità.

 

Ora che hai visto come ottimizzare le immagini per il web, cosa ne pensi? Lo stai già facendo sul tuo sito?

Raccontami e se ti va, dimmi quale programmi o tool usi. Per me è sempre un piacere conoscerne di nuovi e sperimentarli.

Vuoi capire come far funzionare sul serio il sito?

Scarica la ricetta perfetta

Iscriviti alla newsletter e ricevi subito:

Separatore testo Maddalena Pisani siti in WordPress

✔️ Il corso: La ricetta perfetta per il tuo sito

Un’email al giorno per 6 giorni, molto pratica per capire cosa sta dietro un sito, per realizzarlo bene e farlo funzionare sul serio.

✔️ In più, una volta al mese, hai acceso ai miei consigli pratici per gestirlo bene, storie nuove, anticipazioni e cose belle!

Ciao! Sono Maddalena, web designer di siti belli e buoni. Li creo in WordPress per freelance e professioniste che vogliono essere online con buon gusto.

Lascia un tuo commento