Come ottimizzare le immagini sul tuo sito (gratis)

da Figaro Digital | Ago 8, 2023 | Aziende

Come ottimizzare le immagini sul tuo sito (gratis)
prestazioni immagini

Chi controlla spesso le prestazioni del proprio sito, spesso si trova davanti ad una schermata come questa in foto.

L’ottimizzazione delle immagini è ancora uno degli aspetti più importanti quando si parla di prestazioni web. Com’è ovvio che sia, ci sono ormai decine e decine di plugin a pagamento per tentare di risolvere il problema, ma in questo articolo abbiamo pensato di fornirti anche una soluzione gratuita, che a volte abbiamo utilizzato anche noi, ma che richiede qualche piccolo sforzo in più!

Step 1. Controllare le dimensioni

dimensioni immagini

Per prima cosa bisogna sincerarsi che le dimensioni delle immagini siano quelle corrette, per evitare di avere un tempo di caricamento troppo lungo.

Il nostro consiglio è quello di usare l’estensione Chrome “Image size info”, che, in una piccola schermata simile a questa (foto su), permette di conoscere le dimensioni originarie e quelle visualizzate. Quando queste non corrispondono, bisogna intervenire. Basta andare sul tuo sito, cliccare con il tasto destro sull’immagine e selezionare “View Info”.

Mi raccomando tieni sempre in mente i numeri “displayed”, perché saranno quelli a fare da guida.

Step 2. Controllare il formato

Tra le proprietà del file o tramite il link abbinato si può risalire al formato dell’immagine caricata.

Spesso, per avere immagini di massima qualità, si tende a tenerle in PNG, senza contare l’impatto che hanno sulla velocità. In questi casi è sempre meglio usare sempre JPEG, o meglio ancora WEbP (se supportato). Non sarà della stessa qualità, ma il beneficio in termini di prestazioni sarà molto positivo.

Se non hai un programma per effettuare la conversione, si può usare lo strumento gratuito online-convert.com. Unica eccezione sono le immagini senza sfondo, quelle si possono utilizzare solo in PNG, vedremo come ottimizzare anche quelle!

N.B.

Google consiglia sempre di inserire immagini nei formati più recenti (JPEG2000, WEBP ecc.), tuttavia alcuni temi non supportano questi tipi di file, quindi se riesci ad utilizzarli ben vengano, altrimenti non è un grosso problema.

Step 3. Ritagliare o ridimensionare

 

ritagliare immagini

[Se tramite i primi 2 step hai scoperto che le immagini erano già delle dimensioni e del formato giusto, puoi saltare direttamente all’ultimo passaggio!]

Prendiamo il caso, molto diffuso, che le immagini originarie siano troppo grandi rispetto al riquadro di visualizzazione.

Si può procedere in due modi:

  • Ritagliare: se ti puoi permettere di perdere “un pezzo” dell’immagine, allora si può effettuare un ritaglio, inserendo come dimensioni quelle famose “displayed” che hai incontrato precedentemente.
  • Ridimensionare: Inserisci le dimensioni desiderate nel riquadro preposto, il resto lo farà il tool per te. Attenzione solo a controllare che l’immagine non risulti troppo sfocata.

 

Step 4. Croppare

Cosa significa croppare? Italianizzando il verbo inglese to crop, si può tradurre come “comprimere”.

Questo è un passaggio fondamentale per tutte le immagini, cerca di non saltarlo mai.

Sempre con lo strumento che abbiamo menzionato in foto sopra, carica l’immagine e clicca su “Comprimi”, avrai così una sensibile riduzione del peso, di solito almeno di un 70–80% rispetto all’originale, che non è per nulla poco!

Pro Tip:

 

alt text immagini

Dopo aver effettuato tutti gli step necessari ed aver caricato nuovamente le immagini più performanti, se non l’hai già fatto, non dimenticare di inserire l’ALT text, non aiuterà in termini prestazioni ma è utilissimo per l’ottimizzazione SEO.

Lista dei tool

Crea il tuo podcast in 5 mosse

CREA IL TUO PODCAST IN 5 MOSSE

CREA IL TUO PODCAST IN 5 MOSSEda Figaro Digital | Dec 10, 2023 | Guide Creazione account e settaggio Configurazione podcast Registrazione primo episodio Descrizioni e grafiche Pubblicazione Bonus - Strumenti utili Che i podcast stiano crescendo a dismisura negli...
Come automatizzare un freebie con Manychat

Come automatizzare un freebie con Manychat

Come automatizzare un freebie con Manychatda Figaro Digital | Dec 13, 2023 | Guide Creare un nuovo flow Aggiungere un trigger Growth Tool Scegli primo step Pubblicazione Partiamo con una domanda fondamentale: “Cos’è il freebie?” Come dice la parola stessa è un...
Tasso di conversione ecommerce: 20 consigli utili

Tasso di conversione eCommerce: 20 consigli utili

Tasso di conversione eCommerce: 20 consigli utilida Figaro Digital | 13 Giugno, 2023 | AziendeLa metrica che più di tutte fa diventare matti proprietari ed eCommerce manager è sicuramente il tasso di conversione, il perché è piuttosto semplice da intuire: più...
Report Social

Il report social: perché è utile e come si fa

Il report social: perché è utile e come si fada Figaro Digital | Dec 9, 2023 | Guide Perché fare un report social Con che frequenza Come farlo Tool esterno o tool interno? Un autore che probabilmente hai già sentito, Simon Sinek, nel suo “Start with why” ha scritto...
Guida al preventivo perfetto in 6 step

Guida al preventivo perfetto

GUIDA AL PREVENTIVO PERFETTO IN 6 STEPda Figaro Digital | Dec 12, 2023 | Guide Copertina Chi sei e come puoi essere utile Obiettivi Portfolio e Testimonianze Proposte economiche Prossimi passi Facciamo tutti lo stesso errore: non curare il preventivo, inviarne...
copertina articolo: l'importanza della thank you page

L’importanza della Thank You Page

L'importanza della thank you pageda Figaro Digital | Ago 11, 2023 | AziendeNel marketing è sicuramente molto importante focalizzarsi sull’accompagnare l’utente per tutto il suo percorso d’acquisto, fino a diventare finalmente cliente. Poi, una volta arrivati lì, è uso...
Canva: Trucchetti e segreti per conoscerlo meglio

Canva: 10 segreti e 10 trucchetti per conoscerlo meglio

Canva: Trucchetti e segreti per conoscerlo meglioda Figaro Digital | Giu 1, 2022 | Guide 10 Segreti 10 Trucchetti Non c'è bisogno di particolari presentazioni, Canva ormai è diventato uno strumento imprescindibile per tutti coloro che creano contenuti (soprattutto nel...
Spedizione gratuita - Come utilizzarla da leva di marketing

Spedizione gratuita: come utilizzarla da leva di marketing

Spedizione gratuita: come utilizzarla da leva di marketingda Figaro Digital | Giu 12, 2022 | AziendeQual è il problema che porta la maggior parte degli utenti ad abbandonare il carrello in fase di pagamento? Da uno studio molto recente, realizzato da SendCloud in...
Come leggere i dati di Insight su Instagram

Come leggere i dati di insight su Instagram

Come leggere i dati di Insight su Instagramda Figaro Digital | Dec 12, 2023 | Guide Insight Generali Insight Post Insight Reel Insight Storie Trucchetto finale Ciao, io sono Marco, Head of Content per Figaro Digital, sarò il tuo "host" per questo breve viaggio...
Ottimizzare il tuo profilo LinkedIn

Ottimizzare il tuo profilo LinkedIn

Ottimizzare il tuo profilo LinkedInda Figaro Digital | Dec 18, 2023 | Guide Perché usare LinkedIn Foto profilo Headline Sommario Esperienze Competenze Segnalazioni Trucchetti da sfruttare È arrivato il momento di parlare di un social su cui si sentono giudizi...
Non è finita qui!

C’è un posto, che forse ancora non conosci, dove puoi approfondire un argomento diverso ogni mese, attraverso dei veri e propri mini-corsi. Questo è “Deep in Marketing”, la newsletter targata Figaro Digital.