前端开发中,如何优化图像?图像格式的区别?
优化图像:
1、不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上,内容图片多为照片之类的,适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输。
图像格式的区别:
矢量图:图标字体,如 font-awesome;svg
位图:gif,jpg(jpeg),png
区别:
1、gif:是是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;
优缺点:
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。
相关文章
- MySQL如何利用索引优化ORDER BY排序语句
- 性能优化挑战重重,鲲鹏 HPC 如何突破算力桎梏?
- 【分布式搜索引擎】Elasticsearch如何部署以及优化查询性能
- 如何使用简单 PHP 对象 POPO (Plain old PHP Object) 来优化你的代码
- C#.NET常见问题(FAQ)-abstract抽象类如何理解
- C#.NET常见问题(FAQ)-VS如何整个项目中查找字符串
- Discuz常见小问题-如何快速清除帖子
- SQL性能优化:如何定位网络性能问题
- ES 集群上,业务单点如何优化升级?
- 如何根据iframe内嵌页面调整iframe高宽
- hbase源码系列(十一)Put、Delete在服务端是如何处理?
- 如何优化Windows OS使SQL Server性能最优化
- 【secureCRT】如何在secureCRT上设置常用的快捷输出按钮栏
- MySQL性能优化(五)undo log是如何实现MVCC的?
- 面试官:给你一段有问题的SQL,如何优化?(手把手带你优化一遍)
- PostgreSQL 创建库时如何指定 Collate, Ctype
- 如何优化 Linux系统
- 云原生时代,领域驱动设计思想(DDD)如何落地?
- 【成为架构师课程系列】数据库优化方案 1:查询请求增加时,如何做主从分离?
- 一文详解jvm之-Xms -Xmx -Xmn -Xss -XX:PermSize -XX:MaxPermSize等参数的设置和优化以及如何选择垃圾回收器
- 【高并发】高并发环境下如何优化Tomcat性能?看完我懂了!
- 47 | SSD硬盘(下):如何完成性能优化的KPI?
- Win10 如何设置自动锁定屏幕
- 去除字符串中空格r语言如何去掉字符串向量里面的空格R 去除所有空格 在R中的最后一个逗号上分割字符串 以最后一个逗号为切割符 r 正则表达式 学习教程资料代码 以最后一个逗号为分隔符 r 去掉多个空格
- 如何在virtualenv环境中安装指定的python版本
- 解密Java享元模式:如何优化你的代码并减少内存占用?
- 人工智能就业方向及前景,前景如何?好就业吗?