fbpx
Scegliere e ottimizzare immagini siti web

Come scegliere le immagini per il sito

Le immagini non sono dei semplici file da caricare sul sito per renderlo più bello, ma un elemento fondamentale e complementare per creare un sito web davvero utile ed efficace, sia per te che per tuo cliente ideale.

Devono essere scattate o scelte con la stessa cura con cui si scrivono i testi o si scelgono i colori e lo stile di tutto il sito per rendere la tua comunicazione più semplice ed immediata possibile.

Le immagini per il sito devono essere ottimizzare per il web cioè ridimensionate sia in dimensioni (ad esempio 1920x1280px) che in termini di pesantezza (150/200 Kb), 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 e condiziona, positivamente o negativamente, tutta l’esperienza utente sul tuo sito.

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. In questo articolo ti faccio vedere come fare, partendo dalle basi.

Formati delle immagini

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

  • JPG o JPEG: è il formato più utilizzato in assoluto, creato appositamente per comprimere le immagini ed averle più leggere
  • 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.
  • 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 le immagini per il web ci sono vari modi e si possono usare diversi 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 ridimensiono tutte con Photoshop.

Se tu non hai Photoshop no problem. Puoi usare Pixlr.com, un programma online di grafica completamente gratuito, molto simile a Photoshop.

Vai ora su Pixlr.com, apri l’immagine da rimpicciolire dal menu File / Apri Immagine, vai poi 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 ha una dimensione di 3.840×2.560px e pesa 9MB. Decisamente troppo grande e pesante per il sito.

Scegliere e ottimizzare immagini siti web

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

Nel mio caso inserisco il valore di 1920px (che è la risoluzione minima dei monitor odierni) e il programma mi calcola in automatico l’altezza di 1280px (se è attiva la voce Mantieni proporzioni). Clicca su Applica per confermare la modifica.

Scegliere e ottimizzare immagini siti web

Ora non ti rimane che salvare la nuova immagine rimpicciolita. Vai in File / Salva ed compila i 3 campi:

  • Nome: inserisci un nuovo nome dell’immagine ridimensionata per mantenere sempre l’immagine originale di partenza
  • Formato: scegli jpg, quello più usato online
  • 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%.

Nel mio esempio qui sotto:

  • il nome dell’immagine che ho scelto è ragazza-alla-scrivania.jpg
  • il formato è JPG
  • la qualità dell’immagine è 80% con una pesantezza immagine di 192KB

Perfetto! 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, al massimo. Ti consiglio di rimanere in questo range, per non appesantire troppo il sito.

Scegliere e ottimizzare immagini siti web

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 ingombro 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 nuovi pareri.

Vuoi capire come far funzionare sul serio il sito?

Scarica la ricetta perfetta

Iscriviti alla newsletter e ricevi subito:

✔ Il mini corso gratuito La ricetta perfetta per il 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 accesso ai miei consigli pratici per gestirlo bene, storie nuove, anticipazioni e cose belle!

No Comments

Lascia un tuo commento