Come gestire e ottimizzare le immagini in WordPress

Nel nostro iter delle scorse settimane, abbiamo discusso di come sia possibile personalizzare il proprio sito WordPress a livello di struttura, per presentare i contenuti come desideriamo. Oggi voglio invece parlarvi di un contenuto vero e proprio e di come gestirlo sfruttando le potenzialità di WordPress: l’immagine.

Un’introduzione alle immagini

Prima di addentrarci nella gestione delle immagini in WordPress vale la pena parlare di alcune buone norme che ci permetteranno sia di ottimizzare il nostro sito sia di migliorarne le prestazioni. Senza scendere troppo nel dettaglio:

  • Specificare la larghezza (width) e l’altezza (height) delle immagini nel tag img: permetterà alla pagina di caricare più velocemente. Vi consiglio di non utilizzare questi attributi per ridurre le dimensioni delle immagini, poichè verrebbero caricati più dati del dovuto.

    Immagine ottimizzata bambina con girasole

    <img alt="Bambina con girasole" src="girasole.jpg" width="300" height="300" />
  • Specificare l’attributo alt dell’immagine: grazie al suo utilizzo il contenuto che sarebbe altrimenti invisibile ai motori di ricerca potrà essere indicizzato. Un ulteriore motivo, non di secondaria importanza, è quello di permettere agli screen-reader di sapere cosa sia rappresentato all’interno di un’immagine per gli ipovedenti.
  • Ridimensionare e comprimere le immagini: caricare immagini che non superino le dimensioni desiderate. Esistono molti tool adatti a questo scopo, tra cui anche Photoshop. Prestare attenzione anche alla compressione: non sempre comporta perdita di qualità, soprattutto per foto senza testo.
    Peso: 293kB

    Peso: 323kB

    Peso: 136kB

    Peso: 154kB

  • Scegliere il formato corretto: per il web, i formati raccomandati sono gif, png e jpg. Prediligere il primo quando lo schema dei colori è ridotto, è il formato più leggero. Utilizzare il png a scapito del jpg quando i colori del formato gif non sono sufficenti e l’immagine non abbia particolari sfumature di colore e che le dimensioni in larghezza e altezza siano piuttosto ridotte.
  • Salvare le immagini in formato progressivo: permette di caricare l’immagine a diversi livelli di qualità, partendo dal più basso.

    Progressione ottimizzata immagini

Dimensione delle immagini in WordPress

Quando carichiamo un’immagine dal pannello di amministrazione del nostro sito, WordPress la elabora per poi generare tre diverse dimensioni di default, oltre a conservarne l’originale. Per cambiarle, ci basta entrare in Impostazioni → Media ed inserire i valori desiderati.

Impostazioni media WordPress
È da notare che si tratti di valori “massimi”: questo significa che le dimensioni non sono necessariamente rispettate all’esattezza, ma che rientrano comunque nei valori specificati. Per le miniature WordPress ha messo a disposizione una spunta per effettuare un ritaglio esatto (crop), poichè sono spesso utilizzate in griglie di dimensioni predefinite.

Talvolta tre dimensioni non sono sufficienti: WordPress ha pensato anche a questo, mettendoci a disposizione del seguente codice da inserire nel file functions.php:

add_image_size(panorama, 600, 250);
add_image_size(anteprima, 400, 400, true);

La prima riga definisce un’immagine le cui dimensioni massime siano 600×250, mantenendo l’aspect ratio, la seconda cropperà invece l’immagine esattamente a 400×400 pixel. Per farne uso, scriviamo::

wp_get_attachment_image_src(23, panorama);

In cui il primo parametro si riferisce all’id dell’immagine e il secondo al nome dato alla dimensione scelta.

Immagini in evidenza (Featured Images)

Le immagini in evidenza sono un modo molto efficace per rappresentare il post o pagina di cui fanno parte. Possono essere utilizzati in tanti modi, come metterli in una lista di articoli o per mettere in evidenza una particolare immagine all’interno di un articolo rispetto alle altre. Per aggiungerla, ci basta entrare nel post a cui si desidera attribuire e cliccare su Imposta immagine in evidenza, caricare l’immagine e cliccare sul pulsante “Imposta come immagine in evidenza”.

Immagine in evidenza
Come per tutte le immagini del nostro sito, anche le immagini in evidenza prendono i valori che abbiamo specificato nei parametri dei media e le eventuali nuove dimensioni aggiunte. Per stampare l’immagine in evidenza dove desideriamo, sfruttiamo il metodo the_post_thumbnail():

the_post_thumbnail(); //Prende il valore della thumbnail

the_post_thumbnail(thumbnail); //Miniatura
the_post_thumbnail(medium); //Immagine di dimensione media
the_post_thumbnail(large); //Immagine di dimensione grande
the_post_thumbnail(full); //Immagine con dimensioni originali

the_post_thumbnail(panorama); //Immagine con dimensioni create dallutente
the_post_thumbnail(150,150); //Immagine con dimensioni specificate all'interno

Gallerie (Gallery)

Una feature un po’ poco evidente nelle versioni precedenti alla 3.5 ma particolarmente utile per visualizzare più immagini in una griglia senza l’utilizzo di plugin esterni è la creazione di gallerie per post o pagina.

Per crearne una entriamo nell’editor del post e carichiamo le immagini che vogliamo mettere in una gallery. Per le versioni più vecchie della 3.5, clicchiamo su salva le modifiche per far comparire un nuovo tab Galleria, per le versioni più recenti Clicchiamo sul link “Crea galleria”, posto sulla sinistra. Impostiamo le foto e i parametri desiderati e salviamo. Per un approfondimento, consultare questo articolo.

Conclusioni

Mano a mano che sviluppiamo siti, si presenteranno sempre nuovi casi e nuove applicazioni per le immagini. Per questa ragione è importante conoscerne i pilastri che ho cercato di riassumere in questa piccola guida. Nel prossimo intervento, chiuderemo il percorso di personalizzazione di un sito in WordPress con un ultimo componente: i widget.

Lascia un commento

Tutti i campi sono obbligatori.
L'indirizzo email non verrà pubblicato

 

Commenti

  1. avatarAlfredo

    Ciao,
    Ho trovato il tuo articolo molto interesante e volevo chiederti una cosa.
    Mi è stato chiesto di creare una mini galleria di 12 immagini con fotografie da 35×35.
    Dato l’esiguo numero di immagini, non è un gran problema, ma per ottimizzare il tutto standardizzato, c’è un modo…che ne so, magari duplicare la funzione gallery modificando le dimensioni delle anteprime

  2. avatarAlfredo

    Mi rispondo da solo.
    bisogna aggiungere size=”valore” per modificare la grandezza delle immagini

  3. avatarEmily Meroni Autore

    Ciao Alfredo,

    grazie per il tuo interessamento all’articolo! Se hai dubbi ulteriori non esitare a chiedermi.

  4. avatarEmily Meroni Autore

    Ciao Giuseppe, grazie per i complimenti e dell’approfondimento che hai scritto in merito, gli do sicuramente una lettura

  5. Pingback: Realizzare un sito web di successo: consigli pratici - blog.artera.it

  6. avatarMarco

    Ciao volevo capire meglio una cosa, io in impostazioni media ho impostato tutto a 0 perchè non voglio che vengano generate immagini in diverse dimensioni per problemi di spazio (carico già io nelle dimensioni che mi serve) e fin qui tutto ok

    ho trovato però questo nelle funzioni del tema che uso:
    add_image_size(‘excerpt-thumbnail’, 200, 140, true);

    che mi crea immagini da 240×140 anche se in impostazioni media è tutto a 0

    come faccio per disabilitare questa cosa? per ora ho fatto cosi e non mi crea la miniatura:

    add_image_size(‘excerpt-thumbnail’, 9999, 9999, true);

    ma sono andato a logica perchè vedevo che mi creava l’immagine solo se era superiore a 200 che era settato in origine.

    Grazie

  7. avatarEmily Meroni Autore

    Ciao Marco, la migliore modifica sarebbe quella di rimuovere l’istruzione che tu hai modificato “add_image_size(‘excerpt-thumbnail’, 9999, 9999, true);”. Ovviamente se questo non crea problemi alla logica del contesto in cui si trova.

  8. avatarVincenzo

    Si ma come faccio con wordpress a dare un limite in Mb o Kb all’immagine?

  9. avatarMichele

    Ciao, volevo ottenere delle immagini a dimensione fissa come le miniature ma più grandi.
    Ho aggiunto il codice al file functions.php.
    Poi per richiamarlo anzichè usare il codice della guida che da me non funzionava ho aggiunto qualcosa del genere:

    Per ottenere questo codice velocemente imposto la dimensione media dell’immagine da inserire dal menu della creazione gallery, e poi modifico il valore size con anteprima.

    L’ideale sarebbe che nelle impostazioni modifica galleria nel menu a tendina si riesca a inserire ad esempio “panoramica” o “anteprima” insieme agli altri valori impostabili: miniatura, media, grande, dimensione reale.

    E’ possibile? Grazie

  10. avatarAlessandro Carbone

    Ciao Michele, purtroppo WordPress non prevede una funzionalità di personalizzazione ulteriore per le gallerie rispetto a quanto già hai utilizzato.
    In alternativa puoi considerare l’installazione e la configurazione uno dei tanti plugin disponibili su wordpress.org.

  11. avatarMichele

    Grazie per la risposta. Leggendo nei commenti ho visto che impostando il limite massimo dei media a 0pxl si elimina il caricamento automatico dell’immagine in diverse dimensioni.
    Ho provato a impostare 0pxl sia in dimensione media che grande lasciando intatta le dimensioni delle miniature che mi interessano.
    Purtroppo anche avendo impostato cosi mi si caricano ugualmente.
    E’ un peccato perché ho caricato qualche centinaia di immagini e mi ritrovo già a quota 700 mb quando potrebbe tranquillamente essere a 300mb di spazio occupato.
    Come posso fare? Grazie

  12. avatarAntonio

    Un saluto e complimenti per l’articolo. Beh cercando in rete un modo per risolvere un problema che riscontro con le immagini mi sono trovato in questo blog interessante e anche se l’articolo non è tra i più aggiornati provo a fare la mia domanda🙂… Ho installato un tema premium wordpress non saprei se la causa del problema è dovuto a questo, ma quando imposto l’immagine di evidenza e pubblicato l’articolo, l’immagine risulta con una qualità bassa rispetto l’originale. Mi puoi dare una dritta o qualche suggerimento per risolvere il problema? Grazie!

  13. avatarClaudio

    Ciao, nel tema Magazine Plus, vorrei inserire un’immagine con una buona risoluzione ma al momento del caricamento me la sgrana perdendo in risoluzione..come posso fare? Considerando che le misure della foto sono corrette?? Grazie

  14. avatarClaudio

    Dimenticavo, la vorrei inserire nell’header right widget..