Ottimizzazione delle immagini + File Media

In questo tutorial andremo a vedere come ottimizzare le immagini prima della loro pubblicazione sul web e come gestire i file media all’interno di WordPress. Nei tutorial precedenti abbiamo visto come gestire gli articoli, le categorie e i tag. Attraverso gli articoli, se vorrai, potrai creare un blog o una sezione notizie per condividere con i tuoi lettori post che conterranno testi, immagini e video.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

Come ti accennavamo, WordPress è molto più di una semplice piattaforma per fare blogging, infatti oggi viene usato per realizzare siti internet di ogni tipo come siti aziendali, siti vetrina, siti fotografici, e-commerce e molto altro. Il testo quindi non sarà l’unico modo per comunicare con chi visita il tuo sito perché anche le immagini, i video, i pdf, ecc. potrai utilizzarli per una comunicazione più efficace con il tuo pubblico.

È importante quindi conoscere bene come gestire questi formati e soprattutto come ottimizzarli per creare una migliore esperienza utente evitando rallentamenti nel caricamento delle pagine. Prima di farti vedere come inserire le immagini all’interno di un articolo devi capire come ottimizzarle.

Devi sapere che l’ottimizzazione delle immagini è una procedura che si effettua prima di caricarle online ed è efficace per snellire il peso con l’obbiettivo di velocizzare il tempo di caricamento. Infatti la maggior parte delle volte il problema principale di un “sito lento” è legato alla scarsa ottimizzazione delle immagini. Per fare in fretta e non “perdere tempo” si caricano le immagini cosi come sono state scattate ma poi ci si rende conto che il sito è troppo lento.

Abbiamo visto persone scattare foto con il proprio smartphone e caricarle direttamente sul sito. Nulla di più sbagliato. Le immagini che uno smartphone moderno effettua sono di altissima qualità e pesano diversi mega byte. Sono immagini che possono essere tranquillamente usate per la stampa tipografica ma se caricate sul web, senza un’adeguata ottimizzazione, causerebbero notevoli rallentamenti.

Una pagina che si carica lentamente porterebbe l’utente ad avere una pessima esperienza e di conseguenza Google andrebbe a penalizzare il sito. Per ottimizzare le immagini ci sono fondamentalmente due possibili strade. La prima è quella di ottimizzarle attraverso un software come Photoshop o Gimp, la seconda invece è usare un servizio online di compressione. Naturalmente Photoshop è un programma a pagamento ma puoi usarne uno gratuito oppure sfruttare una delle tante piattaforme online. Detto questo ora ti facciamo un esempio pratico per farti capire meglio. Ammettiamo il caso di voler caricare questa immagine all’interno di un articolo. Prima di tutto andiamo a vedere le sue dimensioni.

Ottimizzazione Immagine per WordPress

Cliccando con il tasto destro su Ottieni Informazioni (Mac) o Proprietà (Windows) puoi vedere le sue dimensioni in pixel e il suo peso espresso in maga byte. Ora abbiamo aperto l’immagine con Photoshop per ridimensionala, tu puoi farlo anche con Gimp o un altro software di photo editing installato sul tuo computer.

Ottimizzazione Immagine per WordPress

Vai su Modifica > Dimensione immagine per modificare la sua larghezza. Ti consigliamo di portarla ad un massimo di 900px. In automatico Photoshop ridimensionerà la sua altezza. In questo caso abbiamo scelto 900px perché si tratta dell’immagine di copertina di un articolo mentre se volessimo ottimizzare l’immagine presente in home page, che occupa tutto lo schermo, allora avremmo scelto una dimensione di 1800px. Salvando le modifiche, puoi notare che il peso dell’immagine è stata notevolmente ridotta.

Adesso per ridurne ulteriormente il peso, senza perdere la qualità, collegati al sito TinyPNG.com che è completamente gratuito e ti permette di diminuire ancor più il suo peso.

Ottimizzazione immagini con WordPress

Per procedere importa l’immagine. Dopo il processo di compressione l’immagine sarà ridotta del 79% circa mantenendo sempre una buona qualità. Dal pannello di controllo di WordPress posizionati sulla voce Articoli > Aggiungi nuovo.

Immagine in evidenza con WordPress

Se volessi caricare ad esempio l’immagine in evidenza, devi cliccare su Imposta immagine in evidenza. Si aprirà la libreria dei media dove ti compariranno tutte le immagini che il tema Astra ha caricato durante l’installazione.

Per caricare la nuova immagine, procedi cliccando su Carica File > Seleziona i file per sceglierla dal tuo computer. Dopo averla caricata, sulla destra puoi vedere una serie di informazioni come la data di caricamento, il nome del file, il testo alternativo, ecc.

Questi aspetti li affronteremo nel dettaglio più avanti durante la costruzione del sito. Fatto questo clicca su Imposta immagine in evidenza. Adesso passiamo a vedere come gestire i file media all’interno di WordPress. Sia le immagini che gli allegati saranno visibili nella sezione Media.

Libreria Media di WordPress

Come ti dicevamo qui puoi caricare anche allegati come pdf, doc, ecc. ovvero tutti quei file che deciderai di allegare agli articoli con la possibilità di scaricarli. Inizia a familiarizzare con le immagini ed esplora tu stesso la libreria media, poi quando simuleremo la costruzione di un sito da zero scenderemo nel dettaglio dei singoli argomenti.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.