Aggiungere la compressione gzip ai file SVG su nginx

I file SVG sono un modo eccezionale per avere delle immagini vettoriali senza alcuna perdita di qualità. A differenza di altre immagini compresse, come jpg o png, i file SVG sono di fatto dei file di testo (simili all’XML) che vengono interpretati come immagini contenenti forme geometriche, testi, linee. Proprio per questa loro natura, possono essere serviti dal nostro webserver usando l’algoritmo gzip con un guadagno notevole il termini di trasferimento dati (nell’ordine del 70-80%) e quindi di User Experience.

In questa guida vedremo come misurare i benefici della compressione gzip applicata ai file SVG, come abilitarla sul popolare webserver nginx e come verificare che tutto funzioni.

Un piccolo test

Per prima cosa, testiamo localmente quanto possiamo guadagnare in termini di spazio su un file SVG. Proviamo a scaricare un file di dominio pubblico ed a gzipparlo, comparando successivamente i filesize:

Abbiamo scaricato il file Artctig_big.svg usando il comando wget.  Come possiamo vedere il file ha un peso di 1468466 byte, cioè 1,46Mb. Proviamo a comprimerlo con gzip:

Verifichiamone il peso:

Il file SVG è passato da 1,46Mb a 423Kb: il nuovo file è grande il 29% dell’originale!

Configuriamo nginx

Applichiamo tutto questo ad nginx per assicurarci che tutti i file SVG vengano serviti compressi con gzip.

Per prima cosa assicuriamoci che SVG sia tra i mime types, andando a guardare nel file relativo:

Troviamo questa riga e, nel caso non ci fosse, aggiungiamola:

A questo punto apriamo il file di configurazione:

Cerchiamo la voce gzip types e aggiungiamo image/svg+xml alla fine, come in questo esempio:

Salviamo e riavviamo nginx:

Testiamo il funzionamento

Per testarne il funzionamento, possiamo usare un tool come questo. La pagina ci darà un esito come questo: