一、序言

使用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压缩的更多相关文章

  1. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  2. MVC中用 BundleCollection 压缩CSS时图片路径问题

    MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnb ...

  3. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  4. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  5. 【nginx网站性能优化篇(1)】gzip压缩与expire浏览器缓存

    gzip压缩 概述 网页在服务器端经过了gzip或者其他格式的压缩后的输出明显减少了content-length字节,当访问过百万时,这些减少的字节就会变为客观的流量给节约下来;从而减轻服务器的压力以 ...

  6. gulp打包压缩代码以及图片

    1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...

  7. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

随机推荐

  1. Python pyecharts绘制词云图

    一.pyecharts绘制词云图WordCloud.add()方法简介 WordCloud.add()方法简介 add(name,attr,value, shape="circle" ...

  2. CS5213高性价比替代AG6200芯片|兼容台湾AG6200芯片|CS5213Capstone

    CS5213是一款HDMI转VGA带音频信号转出的芯片方案,CS5213支持HDCP协议,且外围电路比台湾安格AG6200要少,且本身CS5213芯片成本比AG6200要低,整个方案设计简单性价比较高 ...

  3. CS5262设计DP转HDMI 4K60HZ +VGA 1080P方案芯片

    CS5262是一款带嵌入式MCU的4通道DisplayPort1.4到HDMI2.0/VGA转换器芯片,设计用于将DP1.4信号源连接到HDMI2.0接收器.CS5262集成了DP1.4兼容接收机和H ...

  4. 替代联阳IT6564方案|CS5262替代IT6564|设计DP转HDMI+VGA扩展坞方案

    联阳IT6564:带嵌入式MCU的单芯片4通道DisplayPort1.2到HDMI2.0/VGA转换器 联阳IT6564是一种高性能的单芯片显示端口到HDMI和VGA转换器.IT6564FN结合Di ...

  5. Eclipse+Maven+JDK+tomcat搭建java的开发环境

    由于最近有几个同事都在学习java方面的东西,所以我写个博文做下笔记,其中遇到过很多个坑,这里就不多说了 首先,我用的是Eclipse+Maven的组合,用Ecplise是周边java开发的同事用这个 ...

  6. exit hook

    之前经常改 malloc_hook , realloc_hook,free_hook 为 one_gadget 来 get shell ,最近看到一种利用是改 exit hook(winmt师傅告诉我 ...

  7. ASP.NET+MVC入门踩坑笔记 (一) 创建项目 项目配置运行 以及简单的Api搭建

    哈喽各位 我又回来了! 前段时间研究了下ASP.NET,刚开始也是随便找网上的各种教程来看,但是鉴于本人技术有限,还是走了相当长的一段弯路的.所以我写下了这篇文章.希望各位刚刚入坑的ASP.NET开发 ...

  8. Linux_yum安装时报404错误

    使用yum安装报错如下: [root@localhost ~]# yum install gcc 已加载插件:fastestmirror Loading mirror speeds from cach ...

  9. spring clould -多模块 -swagger2 配置 nginx 的正确设置

    #user nobody; worker_processes 2; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  10. Elasticsearch安装与配置

    一.下载(华为云) https://mirrors.huaweicloud.com/elasticsearch/https://mirrors.huaweicloud.com/kibana/7.6.2 ...