Ottimizza le immagini e aumenta le performance del tuo sito

Per aumentare le performance del tuo sito web devi ridurre il peso delle tue pagine web. Risorse come video e immagini (aggiunti senza controllarne il peso, oltre che la risoluzione) possono rallentare il caricamento. E un sito lento non fa che spazientire i tuoi utenti. Certo per ottimizzare le immagini e ridurre le dimensioni dei tuoi file puoi usare plugin di terze parti (ad esempio Smush it, se usi WordPress),  ma la cosa migliore è sempre caricare immagini ben ottimizzate sin da subito. Questa operazione, se condotta puntualmente ti porterà ad avere un sito sempre veloce e con buone performance.

Ottimizzare le immagini per il web

Mettiti nei panni di un utente del tuo sito, o di un cliente del tuo e-commerce. Ad un primo sguardo cosa ti colpisce di più delle pagine? Pensa anche ai siti dei tuoi competitors.

Sono le immagini. Delle belle immagini colpiscono e catturano subito l’attenzione e riescono a veicolare il tuo messaggio in modo efficace e d’impatto.

Questa premessa è valida sia per la stampa che per il web, ma online è ancora più importante perché la comunicazione è più rapida e immediata. Non hai tanto tempo per provare a impressionare il tuo utente!

È ancora più importante quindi curare la comunicazione, sia nel messaggio che nella scelta delle immagini. Per questo è opportuno sceglierle accuratamente.

Solitamente per la realizzazione di una brochure o di un sito web ci si affida a fotografi specializzati che, oltre a fornire foto di qualità, normalmente consegnano due tipologie di immagini, quelle per la stampa e quelle per il web. Si esatto, hai capito bene, due tipologie di immagini, ma perché?

La risposta è molto semplice: le immagini per il web devono avere una risoluzione più bassa rispetto a quelle utilizzate per la stampa. Devono essere leggere e non è necessaria una risoluzione altissima.

Perché ottimizzare?

È bene ottimizzare le immagini per consentire una facile visualizzazione dei contenuti e anche per garantire una buona qualità del sito in termini di performance e di velocità di caricamento. Può capitare infatti di imbattersi in siti lenti, e una delle cause può essere proprio il peso delle immagini, che spesso non vengono ottimizzate nel modo corretto.

È vero che un sito visivamente gradevole incentiva la navigazione rispetto ad uno privo di immagini ed elementi grafici, ma è bene fare una selezione delle immagini da inserire e focalizzare la nostra attenzione su messaggi precisi, avvalendoci di fotografie per rafforzare un concetto.

Cosa vuol dire ottimizzare?

Ottimizzare le immagini per il web prevede due fasi:

La prima è fare una valutazione a monte del numero di immagini da mettere su un sito o su una pagina. Potresti scegliere di inserire qualche immagine in meno, eliminando quelle superflue, in modo tale da facilitare il caricamento di tutti i contenuti.

La seconda è strettamente collegata alla prima, si tratta della qualità delle immagini. Per permettere un caricamento rapido della pagina si devono ridurre dimensioni e il peso delle immagini. In realtà non esistono degli standard o delle regole guida, ci sono però una serie di accortezze che è utile seguire in queste situazioni, in modo da non caricare contenuti troppo pesanti.

Ottimizzare significa dunque:

• ridurre il peso dell’immagine (in termini di byte e dpi). L’immagine ideale per il web deve avere una risoluzione di 72 dpi (punti per pollice) ed essere in modalità colore RGB. Un’immagine a 300 dpi ad esempio, ha una risoluzione eccessivamente alta per il web, può essere visibile ed apprezzata solamente su stampa.
• ridurre la dimensione (pixel). Anche qui è bene individuare la giusta dimensione, solitamente le immagini sono sovradimensionate rispetto alle reali necessità, per cui è meglio cercare di ottimizzare anche questo parametro. Generalmente, online si tendono ad utilizzare immagini che hanno una larghezza di circa 1200 pixel (con altezza proporzionata soprattutto per i post), o al massimo si usa il formato full HD che arriva ad una larghezza di 1980 pixel. E’ buona norma ridimensionare le immagini, ma è fondamentale che le loro proporzioni non vengano alterate.
• formato del file (estensione/compressione). Esistono diversi formati adatti al web, ma quelli più utilizzati sono jpeg e png. Ma ti spiego meglio nel prossimo paragrafo.

Scegli il formato file giusto

Prima di iniziare a modificare le immagini, assicurati di aver scelto il tipo di file più adatto. Esistono diversi tipi di file che è possibile utilizzare:

PNG – è un formato compresso che si usa per elementi grafici ben definiti e permette di conservare la trasparenza, meglio se con tavolozze di colori limitate. Meglio riservarlo ad immagini medio-piccole, perché è comunque più pesante di un jpg.

JPEG – è il formato ideale per le fotografie, anche se c’è da considerare una piccola perdita di qualità dovuta alla compressione

GIF – è il formato per eccellenza per le immagini animate

Ci sono molti altri formati, come JPEG XR e WebP.

Strumenti di ottimizzazione delle immagini

Non ti preoccupare, non occorre acquistare e installare dei super-programmi di grafica per ottimizzare le immagini per il tuo sito. Sul web ci sono a disposizione tanti strumenti e programmi, anche gratuiti.

Eccone alcuni che vi consiglio:

Kraken.io

Si tratta di uno strumento davvero utile per ridurre le immagini che devi caricare sul tuo sito. Ti basta registrarti al sito per ridurre subito le dimensioni di tutti i tuoi files. Clicca sul menù che trovi a sinistra sulla voce Web Interface PRO. Ti basterà trascinare nel riquadro che trovi sulla pagina i singoli files, ma anche in blocco.

Il software non modificherà il file name ma andrà ad ottimizzarle. Infine puoi scaricare un file .zip contenente tutte le immagini ridimensionate. Leggere loro, veloci le tue pagine web. Ti suggerisco di fare sempre questa operazione prima di pubblicare nuovi contenuti.

Caesium

Caesium è un’applicazione da scaricare molto versatile che consente di preservare il formato e la qualità dell’immagine originale, pur comprimendola al massimo. Il livello di compressione può essere liberamente impostato dall’utente su una comoda barra di scorrimento e per ciascuna immagine presa in esame si può scegliere un livello di compressione “ad hoc“.

Caesium offre anche la possibilità, molto comoda, di lavorare su più immagini contemporaneamente

Image Optimizer

Un altro strumento interessante, da usare invece online, è Image Optimizer. È molto semplice: vai sulla pagina web e seleziona dal tuo PC l’immagine da ottimizzare. Quindi, imposta la qualità che vuoi mantenere, altezza e larghezza massima. Infine, clicca Optimize Now! Potrai quindi scaricare sul tuo PC la tua immagine ottimizzata.

Di ImageOptimizer esiste anche una versione desktop, perciò, se ti piace, puoi installarlo sul tuo PC. Il vantaggio è che puoi ottimizzare più immagini contemporaneamente, direttamente cliccando col tasto destro del mouse sulla cartella nel tuo PC.

Parola d’ordine: velocità

L’abbiamo ripetuto tante volte: un sito bello da vedere non è tutto!

Un sito di successo deve essere anche facilmente navigabile e veloce. L’utente medio aspetta solo pochi secondi per il caricamento della pagina, dopodiché passa oltre. Adesso che sai come ridurre in modo efficace le dimensioni delle tue immagini corri a ottimizzare il tuo sito!

Se non ne hai ancora uno prova One Minute Site 2.0, è facile e veloce!