前端开发中,对图片的优化技巧有哪些?
myzbx 2025-05-02 12:11 23 浏览
按照先后顺序有以下:
1. 去掉无意义的修饰。嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?
2. 不用图片。嗯,切图是一件扯淡的事情!不要隔靴搔痒了少年,直接使用CSS替代图片来实现修饰效果吧!如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后,还可以做到alpha混合、正片叠底等各种效果。
3. 使用矢量图替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
4. 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上,内容图片多为照片之类的,适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。除了这些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。你会如何取舍呢?对了,别忘了使用优秀的图片编码器及合适的参数。好的图片编码器,尤其是有损图片格式的编码器,能通过算法或手动调整,获得更高的压缩比。
以下是普遍适用各种资源而不限于图片的优化手段:
5. 使用data url。资源内嵌于CSS或HTML中,而不必单独请求。注意,多个地方都要使用的资源不一定适合用此优化方式,因为图片数据重复多了,增加流量。另外许多浏览器对data url有长度限制,注意资源的大小。
6. 按照HTTP协议设置合理的缓存。具体的缓存策略(如永久缓存+重命名)、部署策略(如反向代理、CDN等)这里就不展开了。
7. 使用支持SPDY的服务器。SPDY可认为是未来的HTTP 2.0的早期实现,Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可参考此中文演讲:
http://www.youtube.com/watch?v=r74RAcrc1ZA(请自备梯子),这里就不展开了。
8. 资源的lazyload或postpone。(lazyload:延迟到其他资源下载完成后再加载,postpone:延迟到元素可见再加载。)目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性,见:Resource Priorities。
9. 资源的prefetch。可用<link rel=prefetch>,见
http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。注意prefetch只是hint,Firefox会预取资源(如果网络空闲的话),而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制,则得用脚本。注意:Chrome支持与prefetch相近但更进一步的<link rel=prerender>,另外SPDY加入了与prefetch相近但语义不同的subresource link支持,这两个新特性我也没用过,有兴趣的可以尝试。
图片的其他优化技巧如字体图标、CSS Sprites等,不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后,CSS Sprites完全没有必要用了。
再有各种特定的图片问题,超出了一般优化的范畴。如许多手机浏览器有黑夜模式,其中有的浏览器允许定制黑夜模式;有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片(有点绕);又如许多手机浏览器有所谓云加速模式,即在服务器端对图片进行处理后再发送给客户端,应该返回怎样的图片给这些服务器有待研究和实践。
10. 最后是responsive设计所需的图片优化,可能要产生多套不同大小和分辨率的图片,配合media query、以及srcset属性、picture元素、src-N等标准提案,这个话题比较大,尚未形成普遍认可的最佳实践,这里也不多展开了。
以上。
— 完 —
相关推荐
- 大白话讲nnvm(大白话讲解什么是卷积)
-
之前工作经验中,在某大厂,开发过机器学习框架,在和业务同学的合作下,取得还可以的成绩,但是一直觉得缺少了什么,最近在刷ai-system相关的公开课,才明白计算图的重要性,以往觉得不能理解的东西,现在...
- Python之Json模块详解(python.json()用法)
-
Step1:Json是什么JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式。具有数据格式简单,读写方便易懂等很多优点。许多主流的编程语言都...
- 最新潮最流行的影音资源——MAU影视
-
MAO影视,一款完全免费的影视软件,为您带来最新潮最流行的影音资源,软件本身并不具备任何资源,只是作为一款播放器提供给大家。配合相关的接口链接,即可为您呈现丰富多彩的影音节目。软件版本支持:1.安卓2...
- Python版的迷你程序——json文件转换为csv
-
浅话C语言是过去几十年软件和硬件两个阵营之间,签署的最坚实的契约。硬件为C语言的语义提供了最能发挥其性能的基础构件,而软件虽然搞了很多的圆环套圆环般的层次,但最终都以C语言作为最后的沉淀收尾。----...
- 没硬盘、网盘也能看片自由!NAS一键部署MoonTV,随时随地爽看。
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:羊刀仙有没有一个应用服务,能满足既没有足够预算购置硬盘,也不想依托网盘的朋友的家庭观影需求?之前我介绍过LibreTV,本篇再来看看另一个更...
- 用云存储30分钟快速搭建APP,你信吗?
-
背景不管你承认与否,移动互联的时代已经到来,这是一个移动互联的时代,手机已经是当今世界上引领潮流的趋势,大型的全球化企业和中小企业都把APP程序开发纳入到他们的企业发展策略当中。但随着手机APP上传的...
- Python的dict和json区别(python中dict的特点)
-
大家有没有发现,python中的字典类型的数据结构,和我们目前比较流行的web端的json格式,非常类似,几乎有点分不清了。那么这2者的区别是什么呢?首先,从概念上,我们要理解这2者是截然不同的。py...
- 越晚搞懂 MySQL JSON 数据类型,你就越吃亏
-
作者介绍陈臣,甲骨文MySQL首席解决方案工程师,公众号《MySQL实战》作者,有大规模的MySQL,Redis,MongoDB,ES的管理和维护经验,擅长MySQL数据库的性能优化及日常操作的原理剖...
- 揭秘你不会画“信息结构图”的本质
-
编辑导语:产品信息结构图有助于清晰地展示产品信息,一定程度上可以为后台上传数据提供依据,但不少人可能觉得产品信息结构图很难,这可能是对数据库表结构不理解等因素导致的。本篇文章里,作者就产品信息结构图的...
- python之json基本操作(.json python)
-
1.概述JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,它具有简洁、清晰的层次结构,易于阅读和编写,还可以有效的提升网络传输效率。Python标准库的...
- JWT 和 JJWT 还傻傻的分不清吗(jwt jti)
-
JWTs是JSON对象的编码表示。JSON对象由零或多个名称/值对组成,其中名称为字符串,值为任意JSON值。JWT有助于在clear(例如在URL中)发送这样的信息,可以被信任为不可读(即加密的)、...
- 比json快20-100倍!protobuf原理深入剖析
-
一、protobuf语法指南1.1定义一个消息类型先来看一个非常简单的例子。假设你想定义一个“搜索请求”的消息格式,每一个请求含有一个查询字符串、你感兴趣的查询结果所在的页数,以及每一页多少条查询结...
- 了解一下ProtoBuf(了解一下相亲对象的年龄)
-
序列化与反序列化我们在进行网络通信调用的时候,总是需要将内存的数据块经过序列化,转换成为一种可以通过网络流进行传输的格式。而这种格式在经过了传输之后再经过序列化,能还原成我们预想中的数据结构。那么我们...
- JSON数据类型详细总结(json数据类型详细总结怎么写)
-
JSON详解一、JSON的概述及其使用JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它基于javascript的一个子集。JSON是的数据交换语言,易...
- 接口自动化测试之JSON Schema模式该如何使用?
-
JSONSchema模式是一个词汇表,可用于注释和验证JSON文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外,还要对其他字段的类型进行检测。对返回的字段一个个写断言显...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)