前端开发中,如何优化图像?图像格式的区别?
优化图像:
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页面上。
转载于:https://www.cnblogs.com/crazycode2/p/10597100.html
前端开发中,如何优化图像?图像格式的区别?相关推荐
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- 前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
- 前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
- 前端开发中icon图标使用的那些门道儿
前端开发图标使用 在日常开发,前端coder绕不开一个话题,在页面上添加各种小图标,比如 或者是这样的: 一般来说,总体上有三种方案: 位图图标,png图片,经典的使用场景--精灵图: 字体图标,比较 ...
- android treeview 树形结构,前端开发中,使用TreeView控件创建树形结构
原标题:前端开发中,使用TreeView控件创建树形结构 Wijmo是一款使用Type编写的新一代Java/HTML5控件集.它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越 ...
- 前端开发中常用图片格式
前端开发中常用图片格式 在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
- 前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
- 移动前端开发基础与优化
移动前端开发基础与优化 http://qywx.gitcafe.io/2014/11/22/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91 ...
- java backbone_[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合
[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合 0 2015-09-24 17:00:04 当我们开发含有大量Javascript的web应用程序时,首先你需要做 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
最新文章
- 眼见为实:.NET类库中的DateTimeOffset用途何在
- 记录到日志中的异常栈缺失
- C# 编程实现非自相交多边形质心
- JavaScript DOM 编程艺术 --- JavaScript语法
- java iconsolefactory_java – 如何设置IOConsole的Caret
- C#中实现对象的深拷贝
- linux u盘刻录软件,Deepin Linux下刻录Windows安装U盘:WoeUSB的介绍和应用
- 【TensorFlow】TensorFlow从浅入深系列之三 -- 教你如何对MNIST手写识别
- centOS目录结构
- JAVA无法加载此类文件,ORA-00376: 此时无法读取文件问题处理
- MATLAB 爬取配色css数据及渐变图
- 《邪不压正》里面究竟谁是真正的隐侠,蓝青峰究竟是正是邪?
- c#文件排序和文件夹排序
- AI燃到爆!中关村人工智能产业论坛十位大咖演讲干货
- 定时任务执行shell脚本中 grep -v grep 中的坑
- springCloud框架搭建,添加feign和Zuul
- kubernetes 是一个分布式的集群管理系统
- IDEA查看maven的依赖树
- python求圆柱表面积_ZZULIOJ.1011: 圆柱体表面积 —— 1021:三个整数的最大值(C语言 Vs Python)...
- 新手游戏创业如何推广游戏?
热门文章
- EventBus BackgroundPoster原理解析
- ae制h5文字动画_利用AE表达式制作文字弹跳动画
- 互联网职场红利真的不多了~
- 程序员接私活必备的 10 个开源项目!
- 在碾压中找到自己,提升自己的思考能力
- php 二进制 保存文件,PHP打开一个二进制文件,修改了内容如何再保存回去呢?...
- 如何保证战略落地_博雅视野丨大健康战略时代,全龄康养如何落地?
- c语言中void 与0,C语言中的 (void*)0 与 (void)0
- python常用网站信息收集:持续更新版本--
- linux设置系统时间