web性能优化---图片优化
先来看一道易错题
```
let a = {a: 1}
let b = a // 相当于把b的地址 指向a的内容
a.x = a = {n: 2}
//由于a.x = a把a的地址指向了a.x 然而由于b本来就是指向a 所以b会多一个x属性
console.log(a.x)
console.log(b.x)
```
打印结果
// undefined
// {n: 2}
web性能优化------图片优化
前言
为什么要进行图片优化?
在前端输入url到页面加载完成这个过程,有一个很重要的就是网络请求的环节,着这个环节中,浏览器会向服务器请求静态资源,图片就在其中,而且在当今的各大页面中,都会有大量的图片资源,那就需要很多http请求,而从http优化的角度来讲,减少请求的次数是很有必要的,优化图片的大小也是可以缩短传输的数据大小,进而减少单词请求所花费的时间,也可以有效的对http层面进行优化。
思考一个问题,一定要用图片吗?
其实这个思考也是基于我前言所说的图片造成的http请求层面的弊端而产生的。
备选技术
- 在使用图片之前,可以考虑一些这两种方式
- CSS效果、CSS动画
- 网络字体
图片格式的选择
如果真的需要图片来表现,不妨从图片的格式上进行一些取舍,首先说一下各大图片格式的区别吧!
图片格式 | 压缩方式 | 透明度 | 动画 | 浏览器兼容 | 使用场景 |
---|---|---|---|---|---|
JPEG、JPG | 有损压缩 | 不支持 | 不支持 | 所有 | 复杂颜色及形状、尤其是照片 |
GIF | 无损压缩 | 支持 | 支持 | 所有 | 简单颜色, 动画 |
PNG | 无损压缩 | 支持 | 不支持 | 所有 | 需要透明时 |
APNG(不做讨论) | 无损压缩 | 支持 | 支持 | Safari Firefox | 需要半透明效果的动画 |
WebP(不做讨论) | 有损压缩 | 支持 | 支持 | chrome opera | 复杂颜色及形状浏览器平台可预知 |
SVG | 无损压缩 | 支持 | 支持 | 所有(IE8 以上) | 简单图形,需要良好的放缩体验需要动态控制图片特效 |
jpg和jpeg是没有区别的,只是对同一个专业名称的缩写程度不同而已!!!
有损压缩和无损压缩(来自百度百科)
无损压缩:
定义: 所谓无损压缩格式,是利用数据的统计冗余进行压缩,可完全恢复原始数据而不引起任何失真,但压缩率是受到数据统计冗余度的理论限制,一般为2:1到5:1.这类方法广泛用于文本数据,程序和特殊应用场合的图像数据(如指纹图像,医学图像等)的压缩。
优点:
100%的保存、没有任何信号丢失;
音质高,不受信号源的影响;
转换方便
缺点:
占用空间大,压缩比不高;
缺乏硬件支持,市场上很少有人追求无损格式的需求。(比如音乐这方面的)
有损压缩:
有损压缩是利用了人类对图像或声波中的某些频率成分不敏感的特性,允许压缩过程中损失一定的信息;虽然不能完全恢复原始数据,但是所损失的部分对理解原始图像的影响缩小,却换来了大得多的压缩比。
有损压缩广泛应用于语音,图像和视频数据的压缩。
优点:
- 有些情况下,能够获得比任何已知无损方法小得多的文件大小,同时满足系统的需求;
- 保持颜色的逐渐变化,删除图像中颜色的突然变化。这一特点主要是由于生物学方面,人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。
缺点:
- 影响图像质量
颜色丰富的照片,JPG是通用的选择
它能轻松处理16.8M颜色,可以很好的再现全彩色的图像
它支持极高的压缩率,所以JPEG图像的下载速度大大加快,有利于在带宽不富裕的情况下传输
缺点:
- 压缩时,可能使图像的质量收到损失,因此不适宜用这个格式来显示高清晰度的图像。
需要较通用的动画,GIP是唯一可用的选择
如果图片由标准的几何图形组成,或需要使用程序动态控制其显示样式,可以考虑svg格式
如果需要清晰的显示颜色丰富的图片,png比较好
图片优化重心
选择了正确的图片格式,我们还需要进一步优化,一般分为两步:
- 有损优化,删除没有出现或极少出现过的颜色,合并相邻的相近颜色。(这一步并不需要,如PNG格式就直接进入下一步)
- 无损优化,压缩数据,删除不必要的信息
优化JPG和png
JPG和PNG格式的图片生成后,一般还有进一步优化的空间,例如JPG格式的照片中,可能携带有相机的Exif信息,PNG格式的图片中可能带有Fireworks等软件的图层信息等。去除这些额外信息后,还可以通过减小图片的调色板,去除没有出现过的颜色,以及合并相邻的相同颜色等手段来进行优化。
常见的几种调节工具:
工具 | 用途 |
---|---|
jpegtran | 优化JPG图片 |
OptiPNG | 无损PNG优化 |
AdV**G | 无损PNG优化 |
PNGQuant | 有损PNG优化 |
如果你真的需要追求各种图片的极限压缩,可以参阅这些工具的文档,但是对于一般的Web应用,面对的图片种类多样,几乎不可能在工程中实现对每种工具的独立配置,因此推荐使用以下工具来进行优化。这些工具往往使用了上表中的一种或几种优化工具。
ImageOption (Mac) https://imageoptim.com/
Mac平台下非常赞的图片优化工具,只需要把需要优化的图片拖拽进ImageOptim,就能够完成对图片的优化。设置选择的也很丰富,目前支持JPG和PNG的优化。
Kraken (Web)https://kraken.io/
在免费模式下可以上传图片,优化后打包下载,很多国外企业也选择了它的收费服务。亲自测试Kraken的图片优化结果比ImageOptim一般要小3%左右,效果不错,当然价格也不错。适合偶尔有图片优化需求,或者不在开发机上没有优化软件可以使用的情况。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XHewPN2z-1619769324778)(C:\Users\gyp\AppData\Roaming\Typora\typora-user-images\image-20210430111105253.png)]
智图 (Web)https://zhitu.isux.us/
腾讯的智图工具推出不久,但实测效果很好,而且提供了Gulp的自动化支持,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBHRBs0Z-1619769324780)(C:\Users\gyp\AppData\Roaming\Typora\typora-user-images\image-20210430111757012.png)]
优化svg
启用GZip压缩
自动优化CDN、Grunt/Gulp、Google PageSpeed三种方式。
(https://cloud.tencent.com/developer/article/1114261)
web性能优化---图片优化相关推荐
- 前端性能优化——图片优化
一.图片优化措施 优化图片是 Web 前端优化的重要一环,因为图片是 Web 页面中最耗费带宽和加载时间的资源之一.以下是一些通过优化图片来优化 Web 前端的方法: 压缩图片:压缩图片可以减少图片的 ...
- 提高Web性能的前端优化技巧总结
转载于:https://www.cnblogs.com/wangyayun/p/6472253.html
- iOS包体积优化-图片优化
文中提到的优化措施,编写了python自动化脚本,适用于iOS项目. 地址:GitHub - dongzhixuanyuan/imagesOptimize: Optimize images to de ...
- 前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化?
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
- 前端性能优化(图片优化)
从输入URL到页面加载完成的过程:首先通过DNS(域名解析)把URL解析为对应的IP地址,然后与该IP地址确定的服务器建立起TCP网络连接.随后向服务器发送HTTP请求,服务器处理完HTTP请求后把目 ...
- Android:最全面详细的性能优化攻略(含内存优化、内存泄漏、绘制优化、布局优化、图片优化、APK优化、多线程优化、列表优化等)
前言:佛教中有一句话:初学者的心态,拥有初学者心态是件了不起的事情.真正的大师永远怀有一颗学徒的心. 一.概述 在Android中,性能优化是细分领域中最难且也是知识面涉及最深和最广的方向之一. 更快 ...
- 图片较多的网站,如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示?
作者:秦墨鱼 链接:https://www.zhihu.com/question/33309032/answer/95570832 来源:知乎 秦墨鱼是我的好基友,今天转他的文章来讲讲前端图片优化 前 ...
- [译]Web 性能优化: 图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
- Web 性能优化: 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
最新文章
- zuul 启动 threw exception_SpringCloud-Zuul-网关路由过滤器
- 人脸检测识别文献阅读总结
- 基于SAP的中国式数据分析浅谈
- __clone class php_PHP 对象克隆 clone 关键字与 __clone() 方法
- 5.中文问题(自身,操作系统级别,应用软件的本身),mysql数据库备份
- oracle12c复制bdf,Oracle 备份与恢复学习笔记(12)
- node webkit(nw.js) 设置自动更新
- C++PrimerPlus学习——第七章编程练习
- Spring Cloud微服务之Nacos服务注册(九)
- 10. VMware Tools 安裝
- MinIO Server config.json (v18) 指南
- 【Python-3.3】函数中的可变参数和关键字参数
- [转载] su和sudo
- 语言学句法分析树形图怎么画_教你如何画语言学树型图
- html5rpg游戏策划案,HTML 5开发RPG游戏之一(地图人物实现)
- ARKit入门到精通 1.0 - 实战案例 AR打地鼠-史小川-专题视频课程
- arm架构安装rxtx_Ubuntu下安装和配置RXTX实现串口通讯
- 不浪漫爱情--等你来--等你来
- JavaScript原生实现广告栏滑动
- Appium自动化测试(五)——PO模式(一):短信案例