SVG являются отличным способом, чтобы без потерь масштабировать векторные изображения. В отличие от других типов изображений, таких как PNG, JPG и SVGs, gzipped может сжать их еще лучше. Gzip хорошо сжимает, например, вы можете сжать SQL файлы, так что они будут составлять 10% от их первоначального размера.
Этот учебник покажет вам, как сжать файлы с расширением SVG, что позволяет SVG сжимать с помощью GZIP в Nginx и проверим как работает сжатие GZIP с использованием Pingdom.
Скачать пробный файл 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 в ваших 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