Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

Posted Java知识图谱

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nginx网络压缩 CSS压缩 图片压缩 JSON压缩相关的知识,希望对你有一定的参考价值。

一、序言

使用nginx作为web应用服务时,会代理如下常见文件:jscssJSON图片等,本文提供基于Nginx内置的压缩技术,提供网络请求响应速度的解决方案。

1、网络压缩原理

网络压缩的原理是消耗CPU资源,减少文件在公网传输的大小,提高响应速度。相比于CPU的计算资源,网络带宽通常较为昂贵,因此通过CPU资源置换网络带宽资源在实际生产中是可行的操作方案。

二、网络压缩

此部分所有的压缩内容在浏览器端都会还原,特别需要指出的是图片,图片在网络间是压缩状态传输的,到达浏览器后是会被还原的。

技术实现依托gzip压缩,仅仅在服务器与客户端网络传输时对静态资源进程压缩,文件的大小在压缩前与还原后保持不变。

(一)Web资源

1、静态资源

前端项目中js/css文件越来越大,对其执行压缩处理越来越有必要。

gzip on;
gzip_comp_level 5;
gzip_min_length 10K;
gzip_types application/javascript text/css;
2、动态资源

通过代理后端服务返回的JSON数据属于动态资源的一种。对于一些较大的JSON响应体,为加快响应速度,通常也需要做压缩处理。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types application/json;

(二)图片资源

1、图片文件

常见的图片文件格式有PNG、JPG、JPEG。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types image/jpeg image/gif image/png;

三、图片压缩

Nginx能够动态实现常见格式图片的压缩与裁剪,动态减小网络传输的文件大小。图片压缩分为两类:一是等比压缩;二是固定宽高压缩。根据应用场景的不同也分为两类:一是固定参数;二是动态参数。

此部分图片压缩后到达浏览器不会被还原。

(一)等比压缩

使用关键词resize实现等比压缩,指定宽度或者高度即可在原尺寸图片的基础上等比率压缩图片。如果同时指定宽度和高度,只有一个参数生效。

1、静态参数

固定宽度,高度自适应

location / 
    image_filter resize 320 -;

固定高度,宽度自适应

location / 
    image_filter resize - 320;
2、动态参数

资源uri路径与静态资源存储路径保持一致。

动态指定宽度,高度自适应

location ~* /(.+)\\.(jpg|jpeg|gif|png)!(\\d+)$ 
    image_filter resize  $3 -;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;

(二)固定宽高压缩

使用关键词crop实现等宽等高裁剪。

1、静态参数

固定裁剪

location / 
    image_filter crop 1080 1080;
2、动态参数
location ~* /(.+)\\.(jpg|jpeg|gif|png)!(\\d+)x(\\d+)$ 
    image_filter crop  $3 $4;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;

(三)默认图片

try_files指令设置默认图片资源,如果找不到对应资源,则使用默认图片。

location ~* /(.+)\\.(jpg|jpeg|gif|png)$ 
    try_files /$1.$2  /default.png;
    root   html;


原文地址

以上是关于Nginx网络压缩 CSS压缩 图片压缩 JSON压缩的主要内容,如果未能解决你的问题,请参考以下文章

nginx开启gzip

css 图片高度怎么设置才不会变形,被压缩

Nginx gzip压缩不适用于CSS或JS

在线压缩图片(TinyPNG)/ JS/CSS/HTML(YUI Compressor)

css中flex布局导致容器中图片被压缩问题

Fastdfs与nginx进行压缩图片比率随记