web资源优化-图片篇（一）
目录
序言
一、压缩图片+响应式尺寸
二、图片格式选择
1. jpg、jpeg
2. png
3. webp
4. gif
5. svg
三、精灵图（雪碧图）
四、字体图标
五、base64
六、懒加载
七、渐进显示
八、图片拆分
九、CDN 加速
序言
对于web前端开发来说，都会碰到各种各样的性能问题，今天主要聊一下图片优化的见解和总结，有些语言组织不到位的地方，请大家多多担待。
随着web的发展，从之前的 From表单>文字网站>多样化的网站，网站资源所消耗的流量也变得越来越大，同时，随着图片过多，一个网站渲染图片所消耗的性能也是不小。所以我们考虑到的是合理性的优化图片，主要从性能方面考虑。
一、压缩图片+响应式尺寸
介绍：压缩图片可以说是比较常见，也是经常提起的一种方式。压缩图片虽然是一种常见的方式，但是也是一种有兼容需要的方法。压缩的前提也是尽量在不影响用户查看的情况去压缩，也就是所说的失真度要在合理范围。一般来说，压缩图片可以让ui来以基准屏（比如iphone6/7/8）的大小压缩，但是这里比较合适的还是使用文件系统来动态压缩比较好（假如有，或者是用类似阿里云oss），根据不同屏幕大小来压缩，能够合理性的提供所需要的文件。
优点：减少图片大小，提高加载速度。
缺点：单一图片压缩不好兼容多分辨率，有失真的可能。（使用文件系统动态压缩无此缺点）。
二、图片格式选择
介绍：根据曾看过的多篇博客介绍，不同的图片格式对于浏览器来说，性能差别还是比较大的。先说说通用的图片格式，有 jpg, jpeg, png, gif, webp（兼容需要考虑）, svg, base64等，但是今天就说这几种通用的（主要是我一般用这几种，手动呲牙）。可以根据不同场景选择适应的图片格式。
1. jpg、jpeg
介绍：JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。
优点：支持隔行渐进显示、尺寸小、加载快。
缺点：不支持透明、有损压缩。
2. png
介绍：png文件分为png8(8位透明png)、png24(256色png)、png32(多阶透明png)，png的有点在于使用位图实现web上的透明图片，以实现比较好的体验。
优点：
支持256色调色板技术以产生小体积文件
支持 alpha 透明
支持图像亮度的gamma校正信息。- 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息
使用无损压缩。
PNG新标准允许在一个文件内存储多幅图像。
缺点：间隔渐进显示在某些方面会影响用户体验。
3. webp
介绍：webp是一种比较新的图片格式，而新嘛，可以说肯定会有考虑其他文件格式的缺点，所以，对于webp来是就是优点了（手动狗头）。从 webp 使用的一些算法等可以知道，webp 不仅压缩率高，而且解码速度快，支持 alpha 透明，且拥有着我们肉眼几乎无法识别的图像质量差异等优点，在一些需要更大压缩比的场景下被广泛使用。但是，webp有个很大的问题，兼容度不如其他的格式如 jpg, png ，webp 目前支持的最好的是 chrome 浏览器，因为它本身就是 google 推出的图片格式。
优点：压缩率高、解码速度快、支持 alpha 透明、图像质量差异小。
缺点：兼容度有限。
4. gif
介绍：GIF(Graphics Interchange Format)的原义是“图像互换格式”，GIF文件的数据，是一种基于LZW算法(串表压缩算法)连续色调的无损压缩格式。是目前web网页中十分常用的一种动画文件格式。
优点：保证图像质量的同时体积变得很小、动画效果、有限的透明度。
缺点：不适合高质量的图片。
5. svg
介绍：SVG 是 W3C 推荐标准， 于 2003 年 1 月 14 日成为 W3C 推荐标准。什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
优点：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
缺点：兼容度有限。
三、精灵图（雪碧图）
介绍：通过资源加载分析可以看到，图片加载虽然不是阻塞式加载，但是同时加载的图片是有限的（根据不同浏览器不同），同时，加载图片是要先去访问图片，解析路径寻找到具体的图片（tcp/ip又来了？），然后拉取图片资源，最后才加载渲染。所以，我们是不是可以通过减少这种情况，从而提高体验效果呢？精灵图就根据这种情况出来的，很容易理解，多个小图片一直重复这种过程太浪费时间。
例如：出门的时候发现没带手机（手机可是半条命纳，命都不要了？），只能返回去拿手机。然后再次出门后发现，嘿！好家伙，口罩没带（记得出门一定要带口罩），然后只能再次折回去拿口罩。
那~其中是不是可以优化一下呢，一次性拿呢。
所以，我们可以出门前先把要带出门的东西都放包里，然后背着包出门。这也是精灵图的原理。
优点：通过减少http请求减少资源获取的时间、集中管理小图片。
缺点：中大图片不适合、精灵图大小需要控制（避免太大造成的资源加载慢）。
四、字体图标
介绍：可以缩放的矢量图标。你可以使用CSS对它们进行修改，如：大小，颜色，阴影等。
优点：轻量、灵活，可用css修改、兼容性强。
缺点：单色（可通过css属性改变）。
五、base64
介绍：base64不是一种图片格式，只是将图片转换为base64编码字符串插入到页面或css中，在同页面图片多的时候不适合内嵌到页面代码中，可选择后端传输然后插入到页面（好像有点本末倒置了？）。
优点：减少http的请求次数（一定场景）。
缺点：超过2KB的图片转换成base64字符串会很长。
六、懒加载
介绍：在一个页面，特别是带图片的列表页面里边，图片非常多，就会看到图片加载很慢，带有闪屏，白屏等情况，对于这种情况，我们怎么去优化呢。如果有注意到各大电商平台图片加载情况就会发现，他们运用了一种有选择性的加载方法，通常优加载看得见的范围内的图片，这种方法就叫懒加载。
优点：用户体验好、有效的分配加载资源、减低服务器的压力。
缺点：需要一定的处理逻辑，处理不好容易出现图片不加载的情况，可选择评价比较高的插件。
七、渐进显示
介绍：渐进显示，顾名思义，逐渐显示出来，从模糊的图片加载成清晰的图片。这里有两种思路。
通过特殊的方式让浏览器一部分一部分的渲染出来。通过看480p、720p、1080p图片可以看出一些问题，会发现1080p抽掉一些像素点就变成了720p，再抽掉一下像素点就变成了480p。所以，它们是不是可以先加载480p的像素点，然后再加载到720p的像素点，最后加载全部像素点呢，既然有思路了，那就可以解决了。
通过多张图片切换，一般来说有两张图片，一张模糊的压缩度高的，一张真正需要展示的图片，总共两张图片，通过技术手段让模糊的先展示，然后再等待清晰的图片加载完毕后再切换，通过这种方法产生过渡效果，从而提升用户体验。这种方法有一定的局限性，比如很多图片的场景的不建议用这种方式。
八、图片拆分
介绍： 如果大家有用类似 ps 的工具绘画过图就知道，一张设计稿是由多个图层组合在一起的，从而产生了特殊的效果。那么，思路又来了，我们可不可以把图片的图层放到页面里边再拼接起来呢？答案明显是可以的，把一张图片拆分成多张图片，按照它们的优先级加载渲染，然后按层级合并，最终形成需要的效果。
图例:
优点：通过切分得到的多张图片一起加载比一张图片加载快、用户体验好。
缺点：不适合太复杂的图片。
九、CDN 加速
介绍：CDN（Content Delivery Network/Content Distribution Network，内容分发网络）。简单来说，CDN 就是将静态的资源分发到，位于多个地理位置机房中的服务器上，因此它能很好地解决数据就近访问的问题，也就加快了静态资源的访问速度。
优点：加载快，用户体验好
缺点：费钱
参考
web前端图片极限优化策略_Bob的专栏-CSDN博客 前端性能优化之图片优化_web前端开发-CSDN博客 SVG 教程 | 菜鸟教程 几种常见图片文件格式的优缺点_woaidadaima1的博客-CSDN博客_各种图片格式的优缺点 寒江孤影：CDN：静态资源如何加速？
web资源优化-图片篇（一）相关推荐
- web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址 指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
- web资源优化之图片加载的时机
前言 图片资源是WEB项目中很重要的组成部分,也是交互设计中一个很重要的体现,往往一张图能胜过千言万语,所谓"一图胜白言"就是这个道理.然后大量的图片也会给服务器带来很大的压力,据 ...
- android性能优化透明,Android性能优化-图片篇
(1)drawable目录详解(mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi) 1.1.图片在各个目录中要如何存放?(必须理解) android的drawable目录有: drawab ...
- wro4j:Java Web资源压缩
wro4j是一个Web资源优化工具.众所周知,到服务器加载一个大的文件比加载两个小的文件快,因为会增加HTTP交互的次数并且大部分浏览器在任何时候对于同一个服务器,只保持两个连接.开发wro4j项目的 ...
- [译]Web 性能优化： 图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
- Unity项目美术资源优化篇
本着尽量不独立造车轮的态度,嘿嘿.笔者也是在一直在学习借鉴别人的经验,在没有明确的个人设计方案之前,不如先按照别人的来.个人认为在程序学习中摸着石头过河没有照葫芦画瓢理解的快些,在明白之后再加入自己的 ...
- WEB前端优化之内容篇
WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...
- 由美团技术文章整理---spark性能优化基础篇--开发调优与资源参数调优
文章地址1:Spark性能优化指南--基础篇 - 美团技术团队 文章地址2:Spark性能优化指南--高级篇 - 美团技术团队 目录 一.关于性能优化基础篇--开发调优 1.避免创建重复RDD (1) ...
- 多媒体：图片PNG、IconFont、SVG图标资源优化详解
1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和 ...
- Web 性能优化： 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
最新文章
- 如何才能在SQL查询器中使用语句查询出表的列名及数据类型（包括类型和长度）...
- kubernetes学习笔记之七:Ingress-nginx部署使用
- Spring @RequestParam批注
- Python(4)--Pycharm安装、使用小技巧
- vb 通过php连接mysql数据库连接_vb如何mysql数据库连接
- stcc52单片机时钟电路_单片机与晶振到底有什么关系？
- SAS® Model Manager功能调研
- 2021年中国以太网测试设备市场趋势报告、技术动态创新及2027年市场预测
- SQL Server创建复合索引时，复合索引列顺序对查询的性能影响
- android局域网怎么传文件,两手机同一局域网怎么传文件
- k2p刷机丢失eeprom_刷机经验分享，K2P无线路由器救砖必备，无线和MAC恢复窍门
- 三菱PLC快速实现OPC UA
- 明日之后 服务器维护,明日之后服务器爆满炸服 排队等待进不去什么梗
- 新浪微博的架构发展历程
- 你还在观望吗？Creator3D小鲜肉《小鸭快跑》新鲜出炉！
- transition详解
- 在Ubuntu中配置中文输入法
- 组长偷偷通知裁员名单有我，但HR却迟迟不找，现在没人布置工作，天天闲着好尴尬！...
- 【520521】程序员中的“芳心纵火犯”， 这就是面向对象编程吗？
- C语言入门教程第三篇