La combinazione delle immagini nel minor numero di file possibile, utilizzando la tecnica degli sprite CSS, riduce il numero di round trip e ritardi nel download di altre risorse, riduce l’overhead delle richieste e può anche ridurre il numero totale di byte scaricati da una pagina Web.

GTMetrix segnala questa situazione con l’errore: Combine images using CSS sprites

Similmente a ciò che avviene con JavaScript e CSS, anche la presenza di troppe immagini comporta un sovraccarico sul server in termini di round trip. Un sito che contiene molte immagini, ad esempio, potrebbe pensare di combinarle in un minor numero di file di output per ridurre la latenza.

Pensiamo ad esempio ad un sito che carica 400 immagini nella propria home page: se possibile, sarebbe meglio che ci fosse una singola immagine caricata (in cui siano presenti le 400 immagini in questione), e che poi il CSS si occupi, mediante CSS sprite, di mostrare ogni pezzo della stessa.

I problemi in questo caso sono di due ordini di grandezza:

• questa tecnica non si può applicare troppo facilmente, in pratica, se le immagini sono dinamiche;
• l’uso di WordPress, in genere, non permette di automatizzare questa procedura;
• sulle landing page statiche, invece, un ottimo web design richiederebbe l’uso di questa tecnica, anche se (ulteriore complicazione) la grande diffusione di builder visuali alla Divi o Elementor tende a rendere improbabile che si riesca a farlo in tempi brevi.

Tanto vale, quindi, nella peggiore delle ipotesi, ripensare il sito e fargli caricare le immagini riducendole a mano o eliminando del tutto l’eventualità che ciò avvenga.