ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE)

Включить компресию gzip для SVG в Nginx

Включить компресию SVG gzip в Nginx

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

Этот учебник покажет вам, как сжать файлы с расширением SVG, что позволяет SVG сжимать с помощью GZIP в Nginx и проверим как работает сжатие GZIP с использованием Pingdom.

Тест преимущества сжатого файла формата SVG

Скачать пробный файл SVG для сжатия с помощью Gzip

cd /tmp
wget https://...../Anderyex_big.svg

 

Сожмем файл с расширением SVG и дадим ему новое имя Andreyex_big.svg.gz, чтобы мы могли легко сравнить размер

cat Andreyex_big.svg | gzip > Andreyex_big.svg.gz

 

Список каталога /tmp и показывать только файлы, которые содержат Arctic.

ls -lh /tmp | grep Andreyex

 

Оригинальный файл SVG с размером 1.5 MB стал весить 424 KB после того, как его сжали GZIP.

То есть 33% от своего первоначального размера!

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

 

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

gzip -l Andreyex_big.svg.gz

 

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

compressed        uncompressed  ratio uncompressed_name
    435659             1458456  70.12% Andreyex_big.svg

 

Давайте включим GZIP в Nginx

Включить SVG GZIP сжатие в Nginx

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

sudo nano /etc/nginx/mime.types

 

Найдите строку изображения или добавьте его, если она отсутствует

image/svg+xml svg svgz;

 

Откройте файл конфигурации Nginx

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

sudo nginx -t

 

Если это сработало, то перезапустите Nginx

sudo service nginx reload

 

Вы можете проверить работу GZIP для файлов SVG с помощью Pingdom.

Найдите свой файл и нажмите SVG стрелку вниз справа.

Проверьте заголовок content-encoding, вы также можете увидеть значение заголовка content-type

Exit mobile version