阅读本文，你能获得哪些优化图像的实用技巧和未来趋势？

先聊聊图像优化到底是个啥

说实话， 很多小伙伴一提到“图像优化”，脑子里立马浮现那堆专业名词。

累并充实着。 别怕，咱们今天就像老友叙旧，随口聊几句，帮你把这些概念拆开来。

先说最基本的——图片体积。

太大？页面卡得像蜗牛；太小？画质直接掉线。

所以压缩是第一步。

压缩技巧：有损 vs 无损

琢磨琢磨。 如果是网页上的装饰图、 背景图，用有损压缩基本没问题。

JPEG 的质量调到 75% 左右， 一般肉眼看不出差别，却能省掉 30%~50% 的体积，一言难尽。。

PNG 则可以尝试 TinyPNG 这类工具，把颜色数目降到 256 色以内，总的来说...。

GIF 小动画要是帧数多，就考虑拆成 spr 算是吧... ite 或者改用 MP4 / WebP 动画。

WebP 与 娱乐IF：新贵登场

被割韭菜了。 哈哈，这俩格式现在已经被主流浏览器广泛支持。

WebP 能在保持相似画质的前提下 比 JPEG 小 30% 左右；娱乐IF 更狠，甚至能省掉一半以上，太刺激了。。

绝绝子！ 不过别忘了回退方案，用 标签给旧浏览器准备一个 JPEG/PNG 的兜底。

尺寸与显示：别让浏览器再算一次

在 HTML 中明确写宽高属性，省去页面渲染时的回流重绘。

比如：

这样即使图片还没加载完， 布局也已经占好位子，不会出现“跳动”。

响应式图片套娃法

我懂了。 + 配合媒体查询，让不同分辨率的设备挑选合适尺寸的图片。