在Nginx中为SVG启用gzip压缩

SVG是无损缩放矢量图像的好方法。 与其他类型的图像(例如PNG,JPG和SVG)不同,gzip压缩后可以更好地压缩它们。 Gzip可以很好地压缩,例如,您可以压缩SQL文件,使其大小为原始大小的10%。

本教程将向您展示如何使用SVG扩展名压缩文件,允许SVG在Nginx中使用GZIP进行压缩,以及如何使用Pingdom进行GZIP压缩。

测试压缩的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 被压缩后。

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

让我们在Nginx中启用GZIP

在Nginx中启用SVG GZIP压缩

确保您的MIME类型中包含svg(默认情况下应存在)

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文件: 平度

找到您的文件,然后点击右侧的SVG向下箭头。

检查标题 content-encoding,您还可以看到标题值 content-type

Sidebar