在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