Sei un blogger o curi il sito web di un tuo cliente? Sono sicuro che in ogni articolo che scriverai, inserirai un’immagine, almeno l’immagine in evidenza, quella che insieme al titolo, darà una prima informazione al lettore di quello che leggerà nel post. Ti sei mai chiesto che caratteristiche devono avere queste immagni? Se sei finito qua googlando, immagino tu stia cercando di capire perché devi ridurre le immagini, e magari vuoi farlo online e gratis, senza scaricare sul tuo pc software freeware che installano barre di ricerca e malware vari!

Perché ridurre le immagini

In questo articolo voglio concentrarmi sulle dimensioni delle immagini e sullo spazio occupato su disco, il cosiddetto “peso”. Ridurre le immagini scaricate da Unsplash, da FlatIcon, o da altri database dove poterle reperire anche gratuitamente, significa rimpicciolirle, oppure comprimerle, ma anche tutte e due le cose. Anche le fotografie scattate personalmente richiedono un minimo di attenzione, ormai anche gli smartphone più economici riescono a scattare fotografie meravigliose ma molto pesanti e molto grandi, con una risoluzione sicuramente maggiore di quella che servirà per presentarle al meglio ai tuoi follower.

Tempo di caricamento e ottimizzazione

Ogni volta che il visitatore di un sito web chiede la visualizzazione di una pagina, digitando l’url di un sito nella barra degli indirizzi del browser, il server che ospita il sito si preoccupa di inviare i dati al browser perché possa visualizzare la pagina richiesta. Supponiamo che nella pagina ci siano due immagini, quella in evidenza e un’altra, molto carina, di un paesaggio. Ognuna di esse occupa 2 MB di spazio su disco. La quantità di dati trasmessa sarà superiore a 4 MB, poiché dovrai aggiungere altri elementi presenti, per esempio banner, widget, altre piccole immagini caricate dal plugin degli articoli più recenti, ecc.

E’ vero, WordPress crea delle miniature e delle copie a diverse risoluzioni di ogni immagine che inserisci, per cui userà quella più idonea, più piccola e più leggera, ma il tempo di caricamento sarà comunque più alto di quello trascorso caricando in WordPress delle immagini già curate.

Una pagina con questa caratteristica, non è affatto ottimizzata: innanzitutto non gode senz’altro della stima di Google che pretende pagine “leggere” e veloci da visualizzare. Già, la velocità di visualizzazione, il tempo necessario affinché il browser possa mostrare la pagina al visitatore. Una pagina con 4 MB di immagini impiegherà un tempo enorme ad arrivare a destinazione ed essere mostrata, considerando che, in media, trascorsi 3 – 4 secondi, l’utente medio si scoccia di aspettare e cerca altrove.

Ogni immagine che vedi su questo sito è accuratamente trattata. Non esistono regole ferree da rispettare, ogni sito ha le sue esigenze, e i casi sono molteplici. Sul mio sito ho deciso di mostrare immagini che non superino i 100 KB di spazio occupato, mi pare un ottimo compromesso tra la qualità dell’immagine e la necessità che sia leggera il più possibile. L’immagine in evidenza di questo articolo pesa solamente 39 KB. Per quanto riguarda il formato, ho deciso di utilizzare immagini in 4:3 e 16:9, con risoluzione prossima a 1 MPx.

Tralasciando software da installare su PC o Mac, qua ti indicherò un paio di servizi che uso per ridurre le immagini su questo sito web.

Ridurre le dimensioni di un’immagine

Approfondiamo un momento perché è importante ridurre le dimensioni di un’immagine per il tuo blog.

Stai scrivendo il tuo articolo e hai scelto l’immagine giusta. La carichi e la inserisci ad un certo punto della pagina. Quando il browser visualizzerà il tuo post, lo farà chiudendo l’immagine in uno spazio definito, ad esempio di 640 x 480 px. Se l’immagine che hai caricato ha dimensioni maggiori, sarà il server a dover ridurre le dimensioni dell’immagine per farla stare lì dentro. Questo lavoro comporta una spesa di risorse e di tempo, e curare il tempo è fondamentale per la performance del tuo sito. Allora perché non dare una mano al server caricando l’immagine con la risoluzione massima utilizzata dal tuo tema?

PS2PDF

Home page di ps2pdf

Il primo portale che ti presento si chiama ps2pdf. Questo permette di svolgere numerose operazione in maniera totalmente gratuita, dal ridimensionamento delle immagini alla compressione. In esso è possibile lavorare JPG e PNG, ma anche il recente WebP, un formato ancora poco conosciuto che vorrebbe diventare uno standard per le immagini su web.

ps2pdf – accedere alle funzioni di riduzione delle dimensioni dell’immagine

Dalla home potrai scegliere il tipo di lavoro che devi fare, cliccando sul menu subito al di sotto della barra di ricerca. Clicca su Resize per ridimensionare la tua immagine, e poi scegli il formato dell’immagine che vuoi ridimensionare, ad esempio un PNG. Seleziona il file cliccando sulla barra trasversale di colore blu, e vedrai un’intuitiva schermata che sarà utile per scegliere in dettaglio che cosa modificare. Un’anteprima ti aiuterà mostrandoti come sta venendo il lavoro. Premi su Apply, per salvare i cambiamenti e su Scarica per scaricare la tua immagine.

Ridurre e ottimizzare le immagini per il tuo blog, gratis e online. Condividi il Tweet

Ottimizzare un’immagine

Supponiamo che la tua immagine sia stata scattata con una risoluzione idonea, oppure sia un’immagine scaricata da uno dei tanti servizi disponibili in rete, per cui ritieni di non aver bisogno di ridimensionarla. Il primo servizio che ti ho mostrato, ps2pdf, permette anche di comprimere le immagini, quindi mantenendone le dimensioni, andrà ad eliminare informazioni non necessarie per una soddisfacente visualizzazione. Quanto sia soddisfacente dovrai deciderlo tu, facendo diversi tentativi. Il risultato sarà un’immagine ottimizzata, quindi più leggera di quella originale ma comunque di buona qualità.

Oh, non deve diventare un’ossessione, se invece di 90 KB ottieni 105 KB per me va bene! Non va bene se ottieni 300 KB da 2 MB: è ancora troppo pesante.

COMPRESSJPEG

Home page di compressjpeg

Ti presento un secondo portale, più specifico, si chiama compressjpg, e come dice il nome si tratta di un compressore di immagini in formato JPEG. In realtà lavora anche con i PNG.

Il suo funzionamento è molto semplice e veloce, dato che si occupa solamente di compressione. Con pochi click sarai in grado di visualizzare un’anteprima, decidendo quanto ridurre il peso dell’immagine.

Compressjpeg – upload delle immagini e ottimizzazione auto

La home page ti suggerisce come caricare la tua immagine. E’ possibile caricarne fino a 20. Potrai cliccare su un pulsante Carica oppure trascinare l’immagine da ridurre in uno spazio molto evidente. Successivamente, il software procede in autonomia, mostrandoti una piccola anteprima e il grado di compressione. Se sei contento del risultato puoi scaricare l’immagine cliccando sul pulsante Scarica, altrimenti puoi cliccare sull’anteprima per aprire una finestra e cambiare il grado di compressione.

Compressjpeg – Ottimizzazione personalizzata delle immagini

Vedrai due immagini, la prima è un ingrandimento di quella originale e la seconda è lo stesso ingrandimento dell’anteprima di quella elaborata.

Un cursore verticale a destra ti servirà per cambiare la percentuale della compressione.

Noterai subito il risultato ottenibile in termini di spazio occupato su disco, guardando al di sopra delle immagini. Quando avrai trovato il giusto compromesso, pigia su OK in basso a destra e scarica l’immagine come ti ho indicato poco sopra.

Conclusioni

Ti ho fornito due strumenti per poter ridurre le immagini che userai sul tuo blog, ma soprattutto ti ho indicato come renderlo più performante dall’inizio. Molte persone non si preoccupano di ottimizzare le immagini e corrono ai ripari quando si rendono conto che qualcosa non va, che il sito è molto lento e le pagine si caricano a fatica.

Se vuoi analizzare il tuo lavoro, puoi inserire l’url della home page del tuo sito, o quella di qualsiasi altra pagina che ti interessa analizzare, su Page Speed Insight di Google. Ti indicherà che cosa funziona e che cosa è da migliorare, indicandoti quindi anche se ci sono problemi relativi alle immagini.

Conoscevi già l’importanza di ottimizzare le immagini? Quali tool utilizzi per ridurre le immagini che inserisci nel sito web?

Pin It on Pinterest

1
Ciao! 👋🏻
Come posso aiutarti?
Powered by