网站图像优化技巧（一）

发布时间：2022-05-14 10:22:08 作者：来源：浏览量（1282 ）

摘要：网页图像的要求是在尽可能短的传输时间里，发布尽可能高质量的图像。因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。为此，必须对图像进行优化。前端优...

网页图像的要求是在尽可能短的传输时间里，发布尽可能高质量的图像。因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。为此，必须对图像进行优化。

前端优化有很多，图像优化也是其中的一部分。无论是渐进增强还是优雅降级，图像优化成为了开发上不可忽视的一部分。

知其然，须知其所以然

图像优化的前提是需要了解图像的基本原理。常规的图像格式分为矢量图和位图。

原理：

矢量图形使用线、点和多边形来表示图像。

光栅图形，也可以成为位图，通过对矩形格栅内的每个像素的值进行编码表示图像。

矢量格式适用于简单形状图形，并且变换颜色方便，仅通过 CSS 中的 fill 属性便可以改变颜色。并且在多大的缩放下都能保证清晰，矢量格式不能满足复杂的图像，例如照片，高清图。这时候我们就需要位图，位图的格式有很多：

GIF

PNG

JPEG

JPEG-XR

WebP

Bpg

其中 Webp 是比较流行的图像格式方案，目前移动端 Android 4.0 以上、PC 端 chrome 10+(14 ~ 16 有渲染 bug )、opera 11+ 均支持 webp 格式图片，相比 jpg 体积减少了 65%，但编码解码速度慢了很多，虽然 webp 会额外增加解码时间，但由于体积小了，缩短了加载时间，实际上文件的渲染速度反而快了。

以上就是网站图像的优化技巧。