Linux

Habilitar compresión SVG gzip en nginx

By 8 octubre, 2017 No Comments

Los SVG son una excelente forma de tener imágenes vectoriales escalables sin pérdidas. A diferencia de otros tipos de imágenes como png y jpg, svgs puede comprimirse para comprimirlos aún más. La compresión Gzip puede reducir drásticamente el tamaño del archivo. Por ejemplo, puede reducir los archivos SQL por lo que son el 10% de su tamaño original.

Este tutorial le mostrará cómo medir los beneficios de comprimir archivos SVG, lo que permite la compresión gzip SVG en nginx y verificar la compresión gzip  con pingdom.

Pruebas de compresión gzip con archivos SVG

cd /tmp
wget https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg

Cambiare el nombre del archivo a Arctic_big.svg.gz para que podamos comparar fácilmente el tamaño

cat Arctic_big.svg | gzip > Arctic_big.svg.gz

Ahora al listar el directorio /tmp vemos que el SVG pasó de 1.5 MB a 424 KB. Un cambio genial verdad ?

Habilitar la compresión SVG gzip en nginx

Primero nos aseguraremos de que esta el svg en los mime.types de nginx

sudo nano /etc/nginx/mime.types

Buscar la siguiente línea  o añadirla si falta

image/svg+xml svg svgz;

Abrir su archivo de configuracion de nginx

sudo nano /etc/nginx/nginx.conf

Encuentre gzip types y agregue image/svg+xmlal final de la línea como se muestra a continuación

 ##
    # Gzip Settings
    ##
    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied expired no-cache no-store private auth;
    #compression level
    gzip_comp_level 6;
    gzip_min_length 1000;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    # files to gzip
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

O si prefiere puede organizar de la siguiente manera para facilitar la lectura

gzip_types text/plain
           text/css
           text/javascript
           text/xml
           application/json
           application/javascript
           application/x-font-ttf
           application/xml
           application/xml+rss 
           # add svg
           image/svg+xml;

Prueba de la configuración nginx

sudo nginx -t

Si va bien, entonces recargar nginx

sudo service nginx reload

Puede verificar que gzip está funcionando para archivos svg usando pingdom.

Encuentre su archivo svg y haga clic en la flecha hacia abajo a la derecha.

Compruebe el content-encoding, también puede ver el content-type

Habilitar compresión SVG gzip en nginx

Articulo de: wp-bullet.com

Leave a Reply