Technology

WordPress: usiamo le featured images per ottimizzare il sito

Negli anni, moltissimi temi “pronti” per wordpress (ma non solo) utilizzavano (ed utilizzano ancora) immagini non ottimizzate degli articoli oppure usando lo script php timthumb per “ridimensionarle” in tempo reale.

Niente di più sbagliato: perchè?

Le motivazione principali del perchè non bisogna utilizzare questo (o altri) script per il ridimensionamento delle immagini sono molto semplici:

  1. Velocità di risposta del server: quando richiamiamo una immagine passando per php (come timthumb), il processo che risponde (php appunto) dovrà avere un tempo per:
    1. eseguire il codice php;
    2. il codice deve cercare e aprire il file originale;
    3. il codice dovrà verificare che la dimensione dell’immagine originale non sia uguale o piu’ piccola della dimensione richiesta;
    4. ridimensionare l’immagine in “tempo reale” (usando quindi risorse CPU/RAM) e inviarla (sempre tramite PHP) al browser.
  2. Tante richieste, molto più tempo per la risposta: tenendo presente il punto precedente, ogni richiesta richiede almeno 1/1,5 secondo (in funzione alla velocità del server su cui gira) per essere processata da php. Questo vuol dire che ogni richiesta da parte degli utenti dovrà venire processata da php in modo sequenziale e quindi si allungano i tempi di risposta (consideriamo anche che una pagina, per esempio la homepage, in genere ha molte immagini).
  3. Sicurezza: in genere, una volta fatto il template, nessuno aggiorna più la versione di timthumb (o similari) lasciandoli lì a giacere per anni fin quanto qualcuno non trova un bug e lo sfrutta per quella versione per effettuare hack del sito.

Allora, come risolviamo il problema?

WordPress, ormai da diverse release, ha introdotto e migliorato una funzionalità conosciuta come “Featured Images“.

screenshot_featured_image

Nell’editor di wordpress, vediamo che c’è un box con scritto “Immagine in evidenza“. Da qui, noi possiamo impostare un’immagine di riferimento per l’articolo e usarla direttamente nel nostro tema con alcune accortezze particolari.

Se questo box non lo vediamo, vuol dire che non abbiamo abilitato il tema all’uso di questa funzionalità. Per rendere il nostro tema compatibile, editiamo il file functions.php e attivamo la funzionalità aggiungendo questo codice:

add_theme_support( 'post-thumbnails' );

Ora, sempre nel file functions.php, imposteremo le varie dimensioni che ci servono nel tema.

Se per esempio dobbiamo mettere nella homepage l’immagine nel formato 50×50 e nella pagina singola dell’articolo il formato 400×300, possiamo aggiungere al file functions.php questo codice:

add_image_size( 'homepage-thumb', 50, 50 );
add_image_size( 'single-thumb', 400, 300 );

Questo aggiunge, appunto, due formati. Cosa succede ora? WordPress, non appena viene inserita una qualsiasi immagine in “Immagine in evidenza” (ma anche tramite il pulsante “aggiungi media”) dopo l’upload dell’originale effettuerà la creazione di due nuove immagini con le dimensioni indicate nel codice nominandole come immagine_originale-50×50.jpg

Questo ha tre vantaggi:

  1. Il lavoro del ridimensionamento viene fatto una sola volta prima di pubblicare l’articolo;
  2. Le immagini ridimensionate sono già su disco fisso e quindi le richieste degli utenti non passeranno più per PHP ma andranno direttamente ad essere servite dal webserver (in pochi millisecondi);
  3. Possiamo usare una particolare funzione nel codice del tema per caricare, in qualsiasi momento, il link assoluto al file in qualsiasi formato vogliamo semplicemente richiamandolo tramite tag

Come possiamo richiamare le immagini?

Molto semplice: nel codice del tema, direttamente nel ciclo che eroga i post, aggiungiamo questo codice:

<?php
if (has_post_thumbnail($post->ID)) {
 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'homepage-thumb' );
 $srcimg = $image[0];
} else {
 $srcimg = "";
}
?>
<img src="<?php echo $srcimg; ?>">

Con questo codice abbiamo richiamato l’immagine dell’articolo semplicemente richiamando il tag homepage-thumb .

Semplice no?

In questo modo è molto più semplice anche gestire eventuali cambi strutturali del tema cambiando, quindi, risoluzioni delle immagini: basta cambiare il formato nel file functions.php o aggiungerne uno nuovo con nuovo tag. Per le vecchie immagini (quelle uploaddate “prima” del cambio formato) possiamo usare questo plugin:

Regenerate Thumbnails

Che ci permette, con un solo click, di ridimensionare tutte le immagini del nostro wordpress per tutti i formati indicati nel functions.php

Le informazioni riguardo queste procedure possono essere reperite qui:

Christian Cantinelli
Unix System Administrator, Network Admin, programmatore, webmaster. Solare, amante della musica, del cinema, dei viaggi. Questo il riassunto della mia persona.
You may also like
Monitoraggio LSI Logic/Dell SAS 5/iR RAID con mpt-status
Plesk: spam in corso? Vediamo gli script php che lo generano
Logo di MySQL
MySQL – Riparare tabelle corrotte