移动端图片压缩

‘壹’ 图片格式

图片格式种类繁多，我们日常使用最多的图片文件格式是 jpg、png 和 gif。这些格式由于与目前浏览器的兼容性，客户端的网络速度以及用户的普遍需求而成为最受欢迎的格式。

在了解这三种格式的图片之前，我们需要先了解一个概念，就是图片压缩。

有损 vs 无损

图片文件格式有可能会对图片的文件大小进行不同程度的压缩， 图片的压缩分为有损压缩和无损压缩两种。

在了解这个简单的情况后，我们详细来看看这三种图片格式的区别和特点。

JPEG 格式

JPEG（Joint Photographic Experts Group）即联合图像专家组，是用于连续色调静态图像压缩的一种标准，文件后缀名为 .jpg 或 .jpeg，是最常用的图像文件格式。

JPEG 图片格式的设计目标， 是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。 这意味着 JPEG 去掉了一部分图片的原始信息，也就是进行了有损压缩。JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

然而，JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件体积更大。

PNG 格式

PNG（Portable Network Graphics）即便携式网络图形，是一种采用无损压缩算法的位图格式，文件后缀名为 .png。PNG 使用从 LZ77 派生的无损数据压缩算法，一般应用于 JAVA 程序、网页中，它的压缩比高，生成文件体积小。

PNG 格式是我们在数字设计项目中最常使用的格式。PNG 通常具有比其他格式更大的文件大小，但是它保留了硬性边缘效果，且可以处理大量颜色。另外 PNG 有个比较有趣的特性，那就是支持透明背景，这也是大多数网站将 Logo 创建为 PNG 格式的主要原因。

GIF 格式

GIF（Graphics Interchange Format）即图像互换格式，是在 1987 年由 Compu Serve 公司为了填补跨平台图像格式的空白而发展起来的。众所周知，它最大的特点就是“能动”。因此，GIF 通常用于从图像文件创建动画。通过在压缩中合并无损质量，可以无损传输和存储这些文件，并且对图像库的存储影响较小。

GIF 是无损的，采用 GIF 格式保存图片不会降低图片质量。得益于数据的压缩，文件体积小，也是 GIF 格式的优点。此外，它还具有支持动画以及透明背景。

GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景，比如企业 Logo、线框类的图等。因其体积小的特点，现在 GIF 也已经被广泛的应用在各类网站中。

从左到右，这些文件依次是：24 位 JPG 压缩文件，8 位 GIF，8 位 PNG，全质量 24 位 JPG 和 24 位 PNG

无论是 PC 端还是移动端，评价网站性能的一个主要指标就是页面加载时间，而图片占到了页面大小的 60%-70%。那么如何保证图片质量的前提下，缩小图片体积，提升网页加载速度，成为了一件有价值的事情。

如今，JPEG、PNG 以及 GIF 这些格式的图片已经没有太大的优化空间。而 Google 推出的 WebP 图片格式给图片优化提供了另一种可能。

WebP 是一种支持无损和有损压缩的图片格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

WebP 现已成为主流网站喜欢的图片格式，淘宝、豆瓣、京东等网站皆已使用 WebP 图片以降低成本，提高网页加载速度。但目前并非所有浏览器都支持 WebP，支持的情况参见如下图所示：

‘贰’ SEO网站优化的时候，图片使用png格式好还是jpg的格式好移动端支持png格式吗

使用JPG格式好，移动端是支持PNG格式的
在优化网站的时候，jpg是容易被网络收录，并且符合用户体验和浏览；对于PNG格式的，移动端是可以展现的，优化上不建议这么做
在图片优化的同时，需要给图片一个文字标签，也就是你鼠标放上去，可以显示文字的，这样搜索引擎才会收录，也才会有排名。
需要主要的是在SEO优化过程中一定要结合用户的体验去做。

‘叁’ 移动端淘宝上在线聊天发送的图片是不是原分辨率啊

不是,是经过压缩的。
分辨率可以从显示分辨率与图像分辨率两个方向来分类。

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。

‘肆’ 纹理压缩简介 DXT PVR ETC

参考
为什么需要纹理压缩
移动端纹理压缩格式
干货：Unity游戏开发图片纹理压缩方案
Creator使用压缩纹理
常用纹理和纹理压缩格式
移动设备的纹理压缩方案
各种移动GPU压缩纹理的使用方法

在软件开发，特别是三维应用中，纹理随处可见，但受限于网络环境和硬件能力，纹理也是一大瓶颈。而且在一般的三维应用中，纹理所占大小基本都会在1/2以上，模型中往往超过2/3。或许你会说，纹理不就是一张图吗，有那么重要吗？如下两张对比图，可能你会认为前者逼格高，但对于正常人而言，后者显然要好很多。正是有了纹理，如同在骨架上赋予了皮肤，让我们的应用更加的逼真，贴近现实。

而你能想象到吗？如上的模型一共有三张纹理，其中之一效果如下：

纹理的拼接是纹理压缩的开始，采用不同的压缩方式对纹理最终的大小影响也是显着的。比如上面的这张纹理在不同压缩格式下的大小差别也是非常显着的（原始文件为tga格式，通过Photoshop转换为其他格式，默认选项）：

不同于png、jgp这种硬盘压缩方式而言，DXT,ETC等纹理压缩方式可以在游戏运行中无需CPU解压就被GPU直接采样，可以极大的减少内存和带宽的占用，提升运行效率，对移动游戏而言更是如此。

1.DXT

DXT是一种有损纹理压缩算法，微软的Direct中支持，DXT的格式包括DXT1~DXT5，其中DXT1和DXT5较为多见，后面会做详细讨论。可以说DXT是目前应用最广泛的纹理压缩格式，可以认为所有的PC端显卡都支持DXT压缩，维基网络记录，该专利有效期到2017年10月2号。

DXT算法非常容易理解，而且整体看上去效果不错，但如果对局部特写，会发现在细节上会有很多丢失，这也是算法本身导致的，毕竟每个块只有两个颜色，而其他颜色都是在这两个颜色区间的差值，如果当前区域内还有其他显着颜色则必然会有丢失。

另外一个问题就是DXT3和DXT5之间的对比，相比DXT1不支持透明度（但支持是否透明），DXT5要大一倍（多了64bit），和之前颜色保存方案一样对透明度也保存了两个16位的颜色和对应的调色板，对RGBA的效果也得到了保证，但DXT3思路不一样，它是对每一个像素保存了4bit的透明度，同样也是多了64bit，但此时毕竟只有16个透明度选项，相比DXT5，在压缩率上相当，但对透明色的处理不够细腻，因此在实用性上并不推荐DXT3。

尽管DXT在细节上有明显硬伤，在总体效果不错，而且确实是一种强大的压缩方式，所以在多数纹理压缩选择中都是最佳方案，几乎可以认为是PC下的标准压缩格式。

2.PVR&ETC
也许是出于专利和商业角度，也许确实DXT在移动端确实无法满足要求，DXT并没有在移动端得到很大的支持，相反，在iOS设备中支持的是PVR压缩，在Android中支持的是ETC压缩。

DXT在细节上缺陷明显，最重要的原因是当把纹理分为4*4像素的区域块后，每个块之间都是独立的，尽管这极大的简化了压缩算法，但却丢失了相邻块之间这种普遍的相似性。这是算法本身导致的，而PVR则会考虑该区域块对应的右侧，下侧和右下侧的三个区域块的关联性。

从现实的角度来看，受制于专利和硬件厂商，我们并没太多选择的余地，Android下就要用ETC，iOS下只能PVR，而在PC上不用DXT估计就要被嘲讽了。但这也是一个很棘手的问题，比如在WebGL下，特别是Android下差异化很大，是否支持纹理压缩，甚至在同一个设备不同的浏览器，因为驱动的不一致，可能系统自带的会支持ETC压缩，而微信等QQ浏览器下并不支持。而且华为的手机貌似在浏览器级别下都不支持ETC（硬件支持，还是驱动的问题）。而如果在移动设备上不用压缩，显存是有限的，除非你在数据量上做出牺牲，怎么解决都很矛盾，相比而言，iOS下则要舒服很多。

Unity官网对每个平台默认的纹理压缩格式以及使用建议给出了 详细描述 ，需要注意的是：在不同移动GPU平台下选择GPU支持的压缩纹理，就可以在不需要CPU解压的情况下直接被GPU采样，节省CPU内存和带宽，也可以节省存储的体积。 如果目标平台不支持设置的压缩格式，纹理将解压为RGBA32或者RGB24，浪费CPU时间和内存 。

参考 几种主流贴图压缩算法的实现原理
从IOS9(A8架构)Apple 手机开始支持ASTC压缩格式 ，如果考虑放弃Apple 6代之前的手机兼容问题了，可以直接使用了。相对于PVRTC2/4而言，ASTC(4X4)的压缩比会增加到0.25，不过显示效果也会好很多，而且不需要把图片设置为方形。

Using ASTC Texture Compression for Game Assets 说明的比较详细，也给出了一些使用上的建议，即针对不同贴图类型给出不同的压缩方案。

1. laya问答 H5游戏能使用压缩纹理（ETC，PVR等）吗？
Q:H5游戏能使用压缩纹理（ETC，PVR等）吗？
A:部分浏览器会不支持（比如safari）
Q:那laya里面能根据不同浏览器（或不同平台）使用不同压缩格式的纹理吗？
A:你自己是可以获取到当前是哪个浏览器的，自行处理即可

2. LAYA Runtme目前支持 ETC/DXT或者PVR这类格式吗?在文档中没有找到这类的说明
LayaAir目前暂时还不支持ETC/DXT/PVR这类格式！关注layaAir的版本引擎更新日志即可，支持了我们会及时告知！

3. Egret 内存分析-RES加载资源后存在双份内存无法释放的问题
支持pvr、etc已经在计划中。

‘伍’ 手机腾讯文档导入图片怎么缩小

手机腾讯文档导入图片缩小的步骤如下：
1、首先打开腾讯文档，点击插入。
2、然后点击图片。
3、接着选择要插入的图片，点击确定。
4、然后左键点击插入的图片，并点击裁剪按钮。
5、接着拖动裁剪边框，对图片进行裁剪。
6、尺寸裁剪完成后，点击空白处便完成图片裁剪。
腾讯文档是一款可多人同时编辑的在线文档，可以在电脑端（PC客户端、腾讯文档网页版）、移动端（腾讯文档App、腾讯文档微信/QQ小程序）、iPad（腾讯文档APP）等多类型设备上随时随地查看和修改文档。打开网页就能查看和编辑，云端实时保存，权限安全可控。

‘陆’ 怎么拍出来的图片不超过2048 k

拍照片的时候一般是没有办法控制图片大小的，但是可以后期通过app压缩图片的大小。压缩图片有如下几种方式：
1.如果是电脑端，电脑里有个画图工具，把图片用画图工具打开，什么都不用操作，直接另存至桌面即可;
2.如果是移动端，可以通过软件、小程序或网站，如嗨格式压缩大师，进行图片压缩。

‘柒’ 快速创建VUE移动端上传图片功能

主要功能：限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。

使用配置：使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩

npm install image-compressor.js //注意是image-compressor.js不是image-compressor

ps：从父级页面传入相应的值到props里面

‘捌’ QQ在线编辑图片很大

如果放不下的话，可以把图片进行压缩。
图片压缩是该软件能批量批量压缩图片或者照片，批量调整图片或照片的尺寸大小，可自定义图片大小和图片压缩质量，支持批量压缩和图片大小批量缩小同时处理。
腾讯文档是一款可多人同时编辑的在线文档，支持在线Word/Excel/PPT/PDF/收集表多种类型。可以在电脑端（PC客户端、腾讯文档网页版）、移动端（腾讯文档App、腾讯文档微信/QQ小程序）、iPad等多类型设备上随时随地查看和修改文档。打开网页就能查看和编辑，云端实时保存，权限安全可控。

‘玖’ 如何将图片压缩到30K以下

电脑上的画图就可以，步骤如下：

1、将电子版的图片放在桌面上，鼠标放在上面可以看见图片大小。