美文网首页
Web页面图片资源优化策略

Web页面图片资源优化策略

作者: 涅槃快乐是金 | 来源:发表于2022-05-05 23:02 被阅读0次

1.tinify 压缩

这里我用了 tinify.cn 这个网站,个人认为它的质量最高,而且支持申请开发者 API,每个月有 500 张的免费份额,算了一下 COS 上一共 450 张图片,正好在额度内,没什么犹豫的直接开压。

最后的压缩成果如下:

压缩前 压缩后
111MB 75MB

综合看上去只缩减了 33% 的体积,实际上压缩比要比这个高,大概能省 60% 左右。

2.gzip 压缩

gzip压缩是基于deflate中的算法进行压缩的,gzip会产生自己的数据格式,gzip压缩对于所需要压缩的文件,首先使用LZ77算法进行压缩,再对得到的结果进行huffman编码,根据实际情况判断是要用动态huffman编码还是静态huffman编码,最后生成相应的gz压缩文件。

使用 gzip 方式进行压缩

客户端可以事先声明一系列的可以支持压缩模式,与请求一齐发送。 Accept-Encoding这个首部就是用来进行这种内容编码形式协商的:

Accept-Encoding: gzip, deflate

服务器在 Content-Encoding 响应首部提供了实际采用的压缩模式:

Content-Encoding: gzip
nginx配置压缩
  • 开启gzip
gzip on;

  • 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;

  • gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 2;

  • 进行压缩的文件类型。其中的值可以在 mime.types找到
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
web服务器处理http压缩的过程
1. Web服务器接收到浏览器的HTTP请求后,检查浏览器是否支持HTTP压缩(Accept-Encoding 信息);

2. 如果浏览器支持HTTP压缩,Web服务器检查请求文件的后缀名;

3. 如果请求文件是HTML、CSS等静态文件,Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件;

4. 如果请求文件的压缩文件不存在,Web服务器向浏览器返回未压缩的请求文件,并在压缩缓冲目录中存放请求文件的压缩文件;

5. 如果请求文件的最新压缩文件已经存在,则直接返回请求文件的压缩文件;

6. 如果请求文件是动态文件,Web服务器动态压缩内容并返回浏览器,压缩内容不存放到压缩缓存目录中。

下面是两个演示图:

未使用Gzip:

开启使用Gzip后:


4.webp 在线转换

WebP,是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。
WebP的优点

  • 压缩率高
  • 显示效果好
  • 占用空间小
  • 加载速度快
    现在主流浏览器基本都支持该格式,同时一些图床网站还支持智能转换webp的服务

CDN 加速

CDN 服务开启后,可以利用CDN的缓存功能,有效降低资源请求,同时加载速度直接提升一个数量级。之前的图片如果是从 源站请求的,每张图片响应速度大概为 200ms-300ms,开启 CDN 后直接降到 20ms-30ms,劣化情况下也能保持在 100ms 内:


相关文章

  • Web页面图片资源优化策略

    1.tinify 压缩 这里我用了 tinify.cn[https://tinify.cn/] 这个网站,个人认为...

  • 真题

    1、iOS瘦身:代码瘦身、资源优化。(安装包体积优化,图片资源优化的策略)(怎么删除无用的图片?怎么压缩图片?)2...

  • 浅谈前端js面试--运行环境(性能优化)

    优化策略 多使用内存、缓存或其他方法 减少CPU计算、减少网络 入手 加载页面和静态资源 页面渲染 加载资源优化 ...

  • 解决COR跨域发送cookie值问题

    在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,...

  • 网站优化

    网站优化 前端优化合并js,css,图片等资源,减少http请求次数开启http缓存使用CDN缓存资源和静态页面,...

  • 前端页面性能优化

    一、PC端优化策略 主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构...

  • 使用rollup打包编写图片懒加载插件

    前言 众所周知,图片的加载是前端页面加载性能的优化之一。如果一个页面在加载的时候全部加载当前页面的图片,当图片资源...

  • chrome 如何查看代码利用率?

    web性能优化的关键之处在于:减少页面首次加载时,加载资源的数量和体积。我们想要减少一些加载资源,就需要知道页面首...

  • 前端性能优化

    页面优化 1 减少 HTTP请求数 从设计层面简化页面 合理设置 HTTP缓存 资源合并与压缩 合并图片 CSS...

  • web 图片简介及优化策略

    目前H5所用的图片格式大多是JPG、png、svg、webp。 今天我们就来介绍一下这几种图片格式,和什么场景下应...

网友评论

      本文标题:Web页面图片资源优化策略

      本文链接:https://www.haomeiwen.com/subject/ahzoyrtx.html