Nginx网络压缩 CSS压缩 图片压缩 JSON压缩
一、序言
使用Nginx作为web应用服务时,会代理如下常见文件:js
、css
、JSON
、图片
等,本文提供基于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;
}
如果觉得文章还不错的话就点个赞吧,另外可以微信搜索539413949的好文章,获取我为大家准备的资料
Nginx网络压缩 CSS压缩 图片压缩 JSON压缩相关推荐
- gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
- MVC中用 BundleCollection 压缩CSS时图片路径问题
MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnb ...
- 图片上传压缩android,android 图片上传压缩常见问题分析
图片的上传与压缩是android经常需要用到的步骤,那么,如何解决上传图片oom问题呢?android 图片上传压缩常见问题分析,希望可以帮助大家更加的了解android 图片方面的困惑. 下面,是我 ...
- java图片压缩质量_java图片高质量压缩
/** * 根据宽高编辑图片 * * @param outPath * 输出文件路径 * @param width * 输出文件宽 * @param hei ...
- 使用基与maven的构建插件在构建阶段压缩css,js并为压缩后的文件追加版本号
最近负责公司一个项目框架的搭建,由于我们这边是后端团队,没有专业的前端工程师支持我们,我就在这个搭建过程中遇到了一些前端问题,给大家分享一下. 主要分享点: 构建项目时自动在css,js文件名中加入版 ...
- java如何压缩解压图片_Java实现压缩文件与解压缩文件
由于工作需要,需要将zip的压缩文件进行解压,经过调查发现,存在两个开源的工具包,一个是Apache的ant工具包,另一个就是Java api自带的工具包:但是Java自带的工具包存在问题:如果压缩或 ...
- php 使用压缩css文件,PHP-使用GZIP压缩静态CSS文件
所以我有一个CSS文件style.css.在同一目录中,我有images /文件夹. 如何制作一个从另一个文件夹压缩style.css的脚本? 现在我有这个: if(isset($_GET['css' ...
- java图片不失真压缩_(转)图片等比压缩,确保不失真
importjava.awt.Image;importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.FileOutputS ...
- webpack4--提取css到单独文件并且压缩css
提取css到build/css目录下:mini-css-extract-plugin插件 压缩css:optimize-css-assets-webpack-plugin插件 Uglify是压缩js: ...
- 怎样压缩照片?分享两种压缩照片小技巧
怎样压缩照片的大小呢?不管是我们使用手机还是电脑,都会经常需要使用到图片,加上现在数码科技的进步,往往一部手机拍出来的照片就有十几兆那么大,当这些图片的数量多起来,我们存储图片会占据很大内存,发送图片 ...
最新文章
- CentOS 7镜像下载和安装教程
- 关于nsurlsession
- python在工厂中的应用_什么是工厂函数?Python 中工厂函数怎么理解?
- Python(27)-模块
- Windows平台下使用Active Directory对Subversion进行权限控制(非完美解决方案)
- Kaggle新手入门
- 当当网图书信息数据抓取V1
- 长期主义:永远做你余生中最重要的事!
- python如何计算等额本息还款_银行等额本息还款算法
- win10安装序列号
- HTML中tabIndex属性马克 tabIndex='-1'是什么意思
- nginx的快速入门
- Android音频子系统(十)------MTK Audio录音流程代码解析
- 2023年产品经理需要考的证书,NPDP含金量真高
- 推荐一个好用的免费空间
- SparkRDD算子--mapPartitionsWithIndex算子
- 【算法-Java实现】 换钱的方法数(暴力递归法)
- matlab如何找到音乐节拍,beatTrackMaster matlab实现的节拍感知音乐工具。可以 较有 规律的一小段 当做ma 238万源代码下载- www.pudn.com...
- 交错(拉丝)(Interlace) 与 反胶卷过带
- 腾讯云实现短信验证码登录