前端必备技术之Web图像优化

发布时间：2025-11-04 19:22:26 来源：技术快报 作者：人工智能

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

知其然，优化须知其所以然

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

原理：

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

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

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

GIF

PNG

JPEG

JPEG-XR

WebP

Bpg

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

另外如果考虑到更全的兼容性问题，还是得回归到 jpg 和 png 上，常规的的选择会用 jpg 作为背景图，png 作为小块的图片，当然都需要经过压缩，服务端可以使用 Gzip ，上传图片前还能使用工具进行一遍压缩，比如使用 ps，或者在线压缩

TinyPNG 或者客户端工具 ImageOptim。

压缩可分为有损压缩和无损压缩。

使用有损压缩处理图像，是去除某些像素数据。

使用无损压缩处理图像，企商汇是对像素数据进行压缩。

压缩的方案可以根据需求选择。

优化策略

常见的优化方案：

响应式图片

响应式图片可以结合懒加载的形式，这样可以加强网页的体验。很多网站 logo 就是一个固定宽度的图像的例子，不管浏览器视口的网站模板宽度如何，始终保持相同的宽度。

然而在移动端，往往需要不固定的图像，不同视口，不同的分辨率，需要展示不同的图像大小，图虽视口的改变而改变。

这个时候我们需要考虑使用响应式图片：

当视口不大于 360 时，图像的宽度为 100vw，当视口大于 768 时，图像显示为 90vw，以此类推。

***的 src 是作为默认图像 url 引入，是一个回退方案，当然浏览器不认 srcset 和 sizes 属性时，直接读取 src 渲染。

demo:

iphone4（320）下，图像宽度和我们设置的 100vw 一致，而浏览器选择的是 768 图像没有选择 360 图，因为 iphone4 的 dpr 是 2，浏览器智能地选择了合适的 768。

iphone6p（414）下，由于 6p 的 drp 更高，浏览器选择了 1200 质量的图像，显示了 90vw。

这时我们可以欺骗一下浏览器：

360.jpg 1200w

1200.jpg 9999w

这时浏览器把 360 的图当成了 1200 来用了。这里可能有些疑问，图像的宽度为什么不是90vw 了哪？因为浏览器被骗了但是自己却不知道，他依然按照 1200 的图像，去适配 dpr。414 * 90% *（360 / 1200）约等于 111.7。这种方式很智能，浏览器根据你的 sizes，从 w 列表中选择最合适的图像来调用显示。

如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像，可以使用 picture 元素。

当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。视口小于768，则加载默认图像。虽然不是每个浏览器都支持 picture 元素，还可以使用 Picturefill polyfill。

加载以及显示策略

多图渲染的情况下，结合懒加载，又要保证图像的渲染速度，类似知乎的渲染效果，我们可以使用 progressive-jpg。

相比 baseline-jpg 一行一行的扫描并显示图片，当然都是从弱网角度考虑，这种显示可能更合适。但还是有不足。参考了下知乎和 medium 等网站的示图效果，可以进行模拟：

medium 下的实现方式更为复杂点，是在缩略图加载完毕后，绘制到 canvas 画布，再通过一个自定义的模糊函数，类似于 StackBlur，同时请求高质量图。等到请求完，再隐藏画布。

简单的例子可参照 “https://codepen.io/SitePoint/pen/VPVEZm”。 

相关文章