Usare immagini per i propri contenuti può essere importante tanto quanto curare il contenuto di un articolo.
Quanto influenza il peso delle immagini nel tempo di caricamento di una pagina?
Qualità delle immagini e loro “peso” sono due parametri importanti da considerare. Quando visualizziamo una pagina su un sito la prima volta, ogni singolo componente di essa viene “letto” dal nostro browser.
Oltre al codice, al testo e ai vari componenti vengono scaricate e visualizzate anche le immagini presenti su quella pagina.
Più componenti ci sono, più lenta è questa operazione. Più immagini “pesanti” ci sono e ancora più tempo sarà necessario per visualizzare il tutto.
Quale è il peso di una immagine?
Il peso di una immagine è la dimensione ad esempio in Kilobyte o Megabyte (come i grammi e i chili) del file immagine che inseriamo nella pagina. Una immagine di qualità può arrivare a “pesare” diversi Megabyte.
Nella immagine che segue il peso del file è di 2,5 Megabyte.
Si tratta di una immagine larga 5184 pixel alta 3456 pixel il cui file “pesa” 2,5MB
L’immagine presa ad esempio è presente sul sito di Pixabay a questo indirizzo: foto di Myriam-Fotos su Pixabay
Una pagina di un sito non complesso e ben ottimizzato dovrebbe restare come peso complessivo sotto o vicino a 1MB. Se solo una immagine ha un peso di 2,5MB ovviamente già siamo lontani da un peso ideale per avere un tempo di caricamento interessante.
Quando visualizziamo una pagina internet la velocità di caricamento è fondamentale. Ovvero, il tempo che impiego a visualizzare una determinata pagina di un sito deve essere il più possibile ridotto. Pena la perdita di accessi di utenti e un pessimo posizionamento nei motori di ricerca.
Se ci pensi nemmeno tu ami aprire siti lentissimi per poter leggere un contenuto.
Quando utilizziamo immagini di alta qualità e grosse dimensioni, la resa da un punto di visualizzazione ci può apparire meravigliosa, ma questa porta al caricamento in diversi secondi della tua pagina e, senza troppi complimenti, si trasforma in uno strazio per chi vuole visualizzare il nostro contenuto web.
Ricordiamoci che non tutti possono usufruire di connessioni ultra veloci e quindi la velocità di caricamento varia per i diversi utenti.
Come posso fare per verificare il “peso” di una immagine?
Posizionati sulla immagine che vorresti caricare sul tuo sito. Controlla dall’elenco risorse la dimensione del file oppure utilizza il comando “Proprietà” con il tasto destro del mouse per visualizzare i dettagli del file.
Come posso visualizzare il peso delle immagini che ho già caricato sul mio sito?
Puoi utilizzare uno dei tanti strumenti gratuiti online che mostrano il tempo di caricamento della tua pagina con i singoli componenti. Questi strumenti sono utili per effettuare l’ottimizzazione del tuo sito.
Pingdom Tools caricamento immagini peso sito
Uno strumento semplice è pingdom tools a questo indirizzo: https://tools.pingdom.com
Inserisci l’indirizzo della pagina che vuoi controllare, seleziona il server più vicino a te, ad esempio Amsterdam e premi il bottone “start test”
Nel riquadro “Content size by content type ” visualizzi l’elenco complessivo per tipo di file e relativo peso.
In questa immagine di test, la pagina controllata con pingdom tools, pesa 1,06 MB di cui 226.12Kilobyte sono immagini
Nei risultati trovi la richiesta di caricamento dei singoli componenti della tua pagina. Puoi usare il filtro per cercare solo le immagini ad esempio jpg e vedere sia il peso sia il tempo necessario al loro caricamento.
PageSpeed Insights
PageSpeed Insights di Google è un utile strumento per visualizzare le immagini da ottimizzare (il cui peso o dimensioni larghezza per altezza sono da rielaborare) .
Qui trovi PageSpeed Insights di Google
Valuta con attenzione quanto proposto. A volte lo strumento indica di ottimizzare ulteriormente le immagini anche se già ottimizzate. Verifica che tu abbia effettivamente eseguito tutte le operazioni di ottimizzazione che portino ad un giusto equilibrio tra peso e resa sulla pagina.
GTmetrix
Valido strumento per l’analisi del proprio sito e immagini da ottimizzare.
Compressione immagine
Come ridurre il peso dell’immagine?
Non è necessario utilizzare immagini ad alta risoluzione per avere una resa di qualità sul proprio sito. Le operazioni che consentono di alleggerire e migliorare le immagini da utilizzare per il web si chiamano “Ottimizzazione delle immagini”.
Dimensione: rapporto Altezza x Larghezza
Il peso del file immagine dipende oltre che dalla sua risoluzione anche dalla dimensione stessa. Se il nostro blog prevede una larghezza degli articoli di 600 pixel è inutile inserire immagini larghe 5000 pixel.
Riducendo le misure della immagine si riduce anche il peso della stessa.
Prendendo l’immagine di esempio di prima se la riduciamo a 640 pixel il suo peso di riduce già a 180KB circa.
Qui invece abbiamo ridotto l’immagine e poi l’abbiamo ottimizzata.
A sinistra l’immagine ottimizzata con una larghezza di 320pixel, risoluzione 72×72 ha ora un peso di 7KB.
A destra la stessa immagine solo scalata a 320pixel con risoluzione 72×72 e peso 19KB. Oltre il doppio.
Alcuni parametri da considerare per ottimizzare una immagine sono:
- Risoluzione non superiore a 72×72 pixel (sono rari i casi in cui serve una risoluzione per immagini online maggiore e non ricadono nel normale uso di blog, ecommerce, siti vari)
- Altezza e Larghezza ridimensionate in base all’effettiva misura utilizzata sul sito.
Con cosa posso modificare le mie immagini?
Il modo migliore per ridurre le dimensioni di altezza e larghezza (scalare immagine) è utilizzare un programma di grafica. Ci sono molti programmi open source o gratuiti sia per Windows che per Mac e Linux.
Gimp è un ottimo programma open-source e anche gratuito sia per Windows che Mac e Linux ovviamente. Lo puoi scaricare gratuitamente da qui:
https://www.gimp.org/downloads
Puoi scalare le dimensioni delle tue immagini e ridurre la risoluzione.
L’ottimizzazione delle immagini è un lavoro che richiede altri passaggi non affrontati in questo articolo.
Ottimizzare peso delle immagini con compressione e strumenti online :
Puoi ridurre il peso delle tue immagini con diversi strumenti online. Tra questi anche TinyPNG di cui puoi leggere l’articolo qui: https://kb.t2h.it/tinypng-comprimere-immagini-online-gratis/
Supporto servizi hosting T2H
