页面优化小总结（图片类型）

最新推荐文章于 2021-06-01 17:45:46 发布

weixin_33834679

最新推荐文章于 2021-06-01 17:45:46 发布

阅读量338

点赞数

文章标签： java

原文链接：https://juejin.im/post/5cf5ea646fb9a07f042034b9

版权

兔兔这么可爱，拿来当首图肯定更招人喜欢

图片在网页中十分常见。高质量的图片能够使你的网站更加出色，同时也伴随着一定的性能损耗。图片文件较大，会减缓页面的加载。如果是一个带宽较低的用户，用户体验将会特别差。所以，开发一个高质量的网页，需要掌握一些图片优化的方法。

下面是对图片相关知识的整理，以及一些图片相关的优化技巧。

图片的类型（矢量图和位图）

图片的压缩方式（有损压缩和无损压缩）

常见图片格式

JPEG

有损压缩，不支持透明，不支持动画；
可以通过压缩控制图片的大小；
常用压缩比例60%~80%；
适用于存储摄影，写实图像；
不适用于有文字及线条的图片压缩；

PNG

PNG可分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

关于透明：

PNG8支持索引透明和alpha透明，体积小，用的比较多
PNG24不支持透明;
而PNG32在24位的PNG基础上增加了8位的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。

PNG的特性：

无损压缩；
存储灰度图像时，深度可多到16位；
存储彩色图像时，深度可多到48位；
并且可以存储多到16位的α通道数据；
对于复杂的图像，png图片文件较大，不适用用web网页；

JPEG和PNG的比较

色彩层次丰富，颜色较多的图像用JPEG存储；
颜色简单对比强烈的用PNG存储；
对品质要求较高的图片可以用PNG存储，如按钮，导航背景等；
要求不是太高的可以用JPG存储降低图片的大小；
特殊情况，图片颜色丰富但尺寸较小可以尝试用PNG存储；

GIF

无损压缩，支持全透明，支持动画； 8位图片格式，最多支持256色； 隔行扫描，加载较快； 适用于颜色不太复杂的图片，如Logo,icon图标；

APNG

无损压缩，支持透明度，支持动画；
24位图片格式，显示图像更清晰；
兼容较差，仅支持部分浏览器；

WebP

在之前的文章“图片的新型格式：webP的工作原理”中已经介绍过；

WebP是一种支持有损压缩和无损压缩的图片文件格式，支持动画和透明度，根据Google的测试，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积，大大减少了页面的加载时间。

GIF、APNG、WEBP比较

（截图来源：aotu.io/notes/2016/…

通过两张图片对比GIF和APNG，图一是GIF，图二是APNG

GIF：

最多支持 8 位 256 色，色阶过渡不好，图片具有颗粒感不支持 Alpha 透明通道，边缘有杂边

APNG：

支持 24 位彩色图片支持 8 位 Alpha 透明通道向下兼容 PNG（如果浏览器不支持，显示静图）

对比中发现APNG比gif和webp体积小，加载快；

SVG

概念：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） SVG 可以与 Java 技术一起运行 SVG 是开放的标准 SVG 文件是纯粹的 XML