Ottimizzare le immagini per il WEB è un aspetto importante, e non deve essere trascurato se si vogliono creare pagine snelle e veloci.

Di questo si è già parlato negli articoli inserire immagini in un articolo dove è descritta la semplice procedura per inserire un’immagine in un articolo o pagina, e  nell’articolo immagini per il web dove vengono descritte le fasi per ottimizzare le immagini e altri aspetti importanti per una corretta gestione delle stesse.

Nell’articolo immagini per il web descrivevo l’ottimizzazione delle immagini attraverso l’uso del programma Paint, uno strumento di grafica non professionale ma sufficiente per questi semplici lavori di fotoritocco e installato nei sistemi Windows. Il suo fratello per Mac è MacPaint X, questo programma gratuito lo puoi scaricare sul sito MacPaint  oppure puoi scaricare Paintbrush, sempre un programma gratuito, fotocopia del Paint di Windows.

A volte però si ha la necessità di modificare immagini già caricate con delle piccole variazioni di dimensione o con piccoli ritagli per adattare l’immagine alle dimensioni previste dal tema grafico installato.

Per questo motivo descrivo come procedere al ritaglio e al ridimensionamento delle immagini, utilizzando gli strumenti messi a disposizione dal CMS (Content Management System), dopo che queste sono state caricate sul server e si trovano nel database di WordPress, all’interno della libreria media.

In questo modo si riesce a:

  • conoscere gli strumenti messi a disposizione dal CMS;
  • riuscire a fare piccole modifiche di ridimensionamento o ritaglio dopo l’inserimento nell’articolo o pagina;
  • modificare immagini  che non richiedono interventi grafici di correzione sui colori, luce, contrasto effetti, ecc.

Ottimizzare prima o dopo

Anche se WordPress ha strumenti adatti al ridimensionamento e al ritaglio delle immagini, è preferibile che queste siano caricate sul server già pronte; questo significa che ritaglio, ridimensionamento e compressione, devono essere fatti prima che le immagini siano caricate sul server e inserite nell’articolo o pagina che state scrivendo.

Ottimizzare le immagini prima che siano caricate sul server e inserite in un articolo o in una pagina, è una pratica che deve essere osservata scrupolosamente anche per questi motivi:

  • non si corre il rischio di dimenticare questi importanti passaggi;
  • in WordPress la compressione non è prevista come azione predefinita.

Per quanto riguarda la compressione delle immagini, bisogna rilevare che WordPress non ha una funzione nativa di compressione, e per farla bisogna installare plugin specifici che però danno il meglio delle loro capacità nelle versioni premium, vale a dire a pagamento. Nelle versioni free, gratuite, la compressione può arrivare a circa il 15%, sempre meglio che niente. Nel network Community Prever è attiva la versione gratuita dell’ottimo plugin WP-Smush.

Questo programma è configurato per svolgere il suo silenzioso lavoro di compressione in modo automatico in tutti i siti del network, così, quando un’immagine viene caricata sul server, subisce una compressione anche se minima.

La compressione ė meglio farla con i servizi web consigliati nell’articolo immagini per il web, tra cui tinypng.com ė forse il più intuitivo. Con questi strumenti, la compressione può arrivare anche al 70%.

Una piccola variabile

Gli strumenti interni a WordPress, utili per fare piccole modifiche alle immagini, sono raggiungibili da Bacheca > Media > Libreria, solo ad utenti registrati con ruoli di amministratore e editore.

Chi ha un ruolo di autore, può scrivere articoli ed inserire immagini, ma non accede a questi strumenti, passando da Bacheca > media > Libreria. Più avanti nell’articolo descrivo come raggiungere la finestra Modifica immagine anche per il ruolo di autore.

Chi ha un ruolo di collaboratore, non può inserire immagini o altri media, perché con questo ruolo il pulsante Aggiungi media, non è disponibile. Può inserire immagini dal menu Inserisci > immagine, ma deve inserire il percorso esatto della risorsa (percorso assoluto).

Ritagliare le immagini nella Libreria Media

Se sei l’amministratore o l’editore di un sito, e una volta caricata un’immagine, realizzi che questa richiede piccoli aggiustamenti, puoi ricorrere agli strumenti messi a disposizione da WordPress.

Dopo aver fatto il login, procedi in questo modo:

  1. vai alla voce Bacheca > Media > Libreria
  2. fai click sull’immagine che vuoi ritagliare.

Si apre la finestra dove potrai cambiare le dimensioni dell’immagine.

Finestra di Modifica immagine in WordPress
Fai click sull’immagine per ingrandire

Ora è possibile ridimensionare e ritagliare l’immagine con gli strumenti mostrati sulla destra della finestra di editing. Altre operazioni possibili sono la rotazione e il capovolgimento dell’immagine. Bisogna ricordare che quando si ridimensiona la larghezza di un’immagine, l’altezza potrebbe essere più alta o più bassa della dimensione definita nel tuo tema grafico, questo dipende dalle dimensioni dell’immagine originale.

Se decidi di ridimensionare l’immagine, questa manterrà la giusta proporzione con l’originale. Se invece la ritagli, l’immagine potrebbe non avere proporzioni ideali a seconda delle dimensioni definite.

Ridimensionare l’immagine

È possibile sia ridimensionare sia ritagliare l’immagine.
È preferibile ridimensionare l’immagine prima di ritagliare o ruotare l’immagine. Le immagini possono essere solo rimpicciolite e non ingrandite.

Per ridimensionare l’immagine si deve digitare il valore di larghezza nel primo campo sotto la voce Nuove dimensioni. Il valore dell’altezza è calcolato in automatico. Se le nuove dimensioni sono quelle adatte, è sufficiente fare click sul pulsante blu Ridimensiona.

WordPress - finestra di ozione modifica immagine
Opzioni di modifica immagine – Fai click sull’immagine per ingrandire

Ritagliare l’immagine

Se preferisci ritagliare l’immagine fai così:

  1. posiziona il cursore e  fai click nel punto in cui vuoi iniziare la selezione per il ritaglio;
  2. trascina il mouse fino al punto in cui vuoi interrompere la selezione;
  3. rilascia il pulsante del mouse per mostrare la selezione;
  4. fai click sull’icona della taglierina in alto a sinistra per realizzare il ritaglio.

Puoi cliccare sui punti negli angoli e sui lati della selezione per aggiustare la selezione alla larghezza e altezza desiderata.

Se preferisci, dopo aver cliccato sull’immagine, puoi inserire direttamente nei rispettivi campi, che trovi alla destra dello schermo, la larghezza e l’altezza del ritaglio.

Se hai dubbi su cosa significano alcuni termini o funzioni di questa schermata, puoi fare click sul piccolo punto interrogativo alla destra della voce che ti interessa.

Rapporto di dimensioni

È possibile anche mantenere l’aspect ratio o rapporto di dimensioni dell’immagine. L’aspect ratio è la relazione tra larghezza e altezza e puoi mantenerla tenendo premuto il tasto shift mentre procedi alla selezione trascinando il mouse. Si può anche inserire direttamente un valore nei rispettivi campi di inserimento.

Impostazioni di miniatura

Wordpress scegliere le opzioni di dimensione immagini
Fai clic per ingrandire

Ora devi scegliere a quale immagine predefinita si deve applicare la variazione. L’opzione può essere utile se vuoi variare l’immagine ma mantenere invariata la miniatura.
Terminate le variazioni, fai click sul bottone  Salva  posto sotto l’immagine.

Modificare le immagini con un ruolo di autore

In un paragrafo precedente ho scritto che chi ha un ruolo di autore, non può modificare le immagini passando da Bacheca > Media > libreria, perché questo ruolo non ha i privilegi per modificare i contenuti pubblicati da altri utenti.

Però se hai un ruolo di autore, puoi modificare le immagini pubblicate nei tuoi articoli. Ecco come fare.

Se all’interno di un tuo articolo vedi che un’immagine ha bisogno di qualche piccolo ritocco, dopo aver fatto il login e cliccato modifica articolo, clicca sull’immagine.

In seguito a questa azione, appaiono delle icone che consentono rapidi cambiamenti di allineamento del testo, un’icona a forma di x per cancellare l’immagine dall’articolo e un’icona a forma di matita che è quella che interessa a noi.

Selezionare la finestra modifica immagine

Facendo clic sull’icona della matita, si apre la finestra Dettagli immagine.  Da questa, selezionando il pulsante Modifica immagine, puoi passare alla finestra dove potrai fare le modifiche descritte nell’articolo. Come vedi in questa finestra puoi anche definire le opzioni che puoi avere tralasciato quando hai caricato l’immagine nell’articolo.

Finestra opzioni immagine
Finestra Dettagli immagine

Ora con tutte queste informazioni le tue immagini saranno perfette per il WEB e potrai creare pagine veloci e performanti, un piacere, non solo per i motori di ricerca, ma anche per gli utenti che non sono costretti ad attendere la pagina e senza dimenticare che un’immagine ben ottimizzata è anche un bel risparmio di banda.

Seguici su:
https://www.iisprever.gov.it/comprever/wp-content/uploads/2017/07/modifica-immagine-1024x337.jpghttps://www.iisprever.gov.it/comprever/wp-content/uploads/2017/07/modifica-immagine-150x150.jpgRoberto BianchiSupportoimmagini,ridimensionare,ritaglioOttimizzare le immagini per il WEB è un aspetto importante, e non deve essere trascurato se si vogliono creare pagine snelle e veloci. Di questo si è già parlato negli articoli inserire immagini in un articolo dove è descritta la semplice procedura per inserire un'immagine in un articolo o pagina,...Una comunità scolastica attiva