Aggiungere nuove misure srcset in WordPress

Con l’uscita di WordPress 4.4, la gestione delle immagini responsive in WordPress è cambiata: possiamo ora infatti affidare al sistema la gestione delle immagini sfruttando il meccanismo delle Responsive images, utilizzando direttamente le funzioni che WordPress ci permette di utilizzare nel nostro tema.

WordPress creerà quindi automaticamente diverse dimensioni delle immagini in Libreria, in modo da poter utilizzare l’attributo srcset del tag <img> permettendo al browser dell’utente di selezionare (leggasi, caricare) l’immagine nella “misura giusta” compatibilmente con la risoluzione dello schermo e la banda a disposizione – un ottimo metodo per risparmiare dati e permettere un caricamento molto più veloce – a tutto beneficio della User Experience.

In questo post darò per scontata la conoscenza delle responsive images e della loro gestione “base” in WordPress.

Le standard size di WordPress

Quali sono le misure che WordPress genererà automaticamente? Di partenza, cioè senza cambiare nulla, avremo queste misure:

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('medium_large');    // Medium Large resolution (default 768px x 0px max)
the_post_thumbnail('large');           // Large resolution (default 1024px x 1024px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

Con WordPress 4.4+, è stata aggiunta di fatto la misura medium_large da 768px di larghezza (senza limiti di altezza) e può essere utilizzata come tutte le altre già presenti in precedenza. Queste stesse misure andranno a “formare”, come sappiamo, lo srcset delle nostre immagini utilizzando la funzione wp_get_attachment_image_srcset():

<img srcset="<?php wp_get_attachment_image_srcset($id_immagine) ?>">

Otterremo un risultato come questo nel quale diverse dimensioni:

 <img srcset="https://devdev.it/wp-content/uploads/2019/01/IMG_20181016_092551.jpg 990w, https://devdev.it/wp-content/uploads/2019/01/IMG_20181016_092551-300x225.jpg 300w, https://devdev.it/wp-content/uploads/2019/01/IMG_20181016_092551-768x576.jpg 768w" sizes="(max-width: 990px) 100vw, 990px" />

Aggiungere misure allo srcset con add_image_size()

Con la funzione add_image_size() diciamo a WordPress di generare nuove thumbnails oltre a quelle elencate in precedenza. La sintassi è molto semplice:

add_image_size("nome", larghezza massima, altezza massima, crop);

Aggiungiamo, ad esempio, due nuove misure di dimensioni massime 1280x1280px e 1920x1920px:

add_image_size( 'hd', 1280, 1280 );
add_image_size( 'fhd', 1920, 1920 );

Se volessimo avere altezze “infinite” dovremmo indicare come 9999 il parametro dell’altezza massima:

add_image_size( 'hd', 1280, 9999 );
add_image_size( 'fhd', 1920, 9999 );

Volendo invece ritagliare la nuova immagine ad una larghezza ed altezza specifica, impostiamo true il quarto parametro:

add_image_size( 'hd', 1280, 1280, true );
add_image_size( 'fhd', 1920, 1920, true );

Questi sono esempi veloci, per familiarizzare meglio con la funzione add_image_size() vi consiglio di consultare il codex di WordPress.

Alzare il limite massimo di max_srcset_image_width

Come già detto in precedenza, da quando WordPress supporta le immagini responsive tutto è più semplice con le funzioni integrate. Un caso particolare, però, è quello dato dalla variabile di sistema (filter) max_srcset_image_width. Di default, infatti, è impostata a 1600px. Questo significa che non otterremo mai nell’attributo srcset versioni delle immagini più larghe di 1600px, anche se, come nel caso precedente, abbiamo indicato al sistema di generare delle anteprime chiamate “fhd” da 1920px di larghezza.

Non ci resta che annullare questo limite aggiungendo a functions.php questa funzione:

function remove_max_srcset_image_width( $max_width ) {
    return false;
}
add_filter( 'max_srcset_image_width', 'remove_max_srcset_image_width' );

Se volessimo essere più prudenti, potremmo impostare un limite definito, ad esempio 2560px:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2560;
}, 10, 2);

Otterremo così immagini responsive anche di grande larghezza, oltre i 1600px di misura massima.