Включаем компрессию SVG gzip в nginx

by Владимир Норцов / Tuesday, 06 November 2018 / Published in NETWORKING, NGiNX

SVGs является отличным способом, чтобы без потерь масштабировать векторные изображения на сайте. В отличие от других типов изображений, таких как PNG и JPG, SVGs можно архивно сжать еще больше. Сжатие Gzip может значительно уменьшить размер файла. Например, вы можете сократить файлы SQL, чтобы они составляли 10% от их первоначального размера.

В этом руководстве я покажу вам, как выгодно сжать SVG файлы, что позволяет SVG GZIP сжатие в Nginx и проверим как работает сжатие GZIP с использованием Pingdom.

Тестируем преимущество gzipping компрессии SVG-файлов

Загрузите тестовый svg файл для сжатия с помощью gzip

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

Упакуем svg-файл и дадим ему новое имя Arctic_big.svg.gz, чтобы мы могли легко сравнить размер

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

Возьмем список файлов из папки /tmp и отобразим только файлы, содержащие в названии Arctic.

ls -lh /tmp | grep Arctic

Размер большого файла Arctic SVG поменялся с 1.5 MB до 424 KB после его сжатия.

Это составляет чуть меньше 33% от его первоначального размера!

-rw-r--r--  1 wpbullet wpbullet 1.5M Oct  7  2013 Arctic_big.svg
-rw-r--r--  1 wpbullet wpbullet 424K Feb 13 03:08 Arctic_big.svg.gz

Чтобы просмотреть подробную статистику, вы можете использовать gzip с ключом -l

gzip -l Arctic_big.svg.gz

Вы увидите сжатые и несжатые размеры, а также степень сжатия

compressed        uncompressed  ratio uncompressed_name
    433649             1468466  70.5% Arctic_big.svg

Давайте включим gzip и в nginx.

Включаем сжатие SVG gzip в nginx

Убедитесь, что у вас в типах mime (должно быть по умолчанию) есть svg

sudo nano /etc/nginx/mime.types

Найдите следующую строку или добавьте ее, если она отсутствует.

image/svg+xml svg svgz;

Откройте файл nginx.conf

sudo nano /etc/nginx/nginx.conf

Найдите строку gzip types и добавьте image/svg+xml в конец строки, как показано ниже.

##
# 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;

или вы можете организовать типы gzip, подобно этому, для удобства чтения

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;

Тестируем конфигурацию nginx