图片拖慢页面，能立刻做的五件事
我把简笔画画板那批线稿导进项目之后，页面第一次打开明显顿了一下。图片资源拖慢页面怎么办，其实有五个改动是当天就能做完的，而且不需要动业务代码。下面按我自己动手的顺序写。
顺序的原则是先做不改变任何显示效果的，再做需要取舍的。
一、给图片加上明确尺寸，图片资源拖慢页面先解决这一半
给图片写上宽高，浏览器就能提前把位置留出来。
不加尺寸的后果是：图片没下载完之前，浏览器不知道该留多大位置，等图片到了再重新排布一次，页面会跳一下。这个跳动比单纯慢更让人烦躁。
动作：把缺失尺寸的图片找出来补上，这是纯体力活，收益立竿见影。
二、按显示尺寸选资源，别一把梭大的
一张要在小卡片里显示的小图，没必要用大尺寸原图。
最常见的情况是，素材给的是最大那张，页面里只用了很小一块。浪费的流量全部由用户承担。
动作：对着页面上图片实际占用的位置，检查素材是不是明显超出。超出的换小一档。
三、换更省体积的格式
照片类图片用新格式通常能省下可观体积，带透明通道的图标类另说。
这里没有万能答案，要看内容。判断方法很简单：用同一张图分别导出几种格式，比大小，再肉眼看一次有没有明显变差。
动作：挑页面上体积最大的几张先换，其余的以后再说。
四、首屏看不到的图片延后加载
屏幕外的图片，用户不滚动就不会看到，没必要跟着首屏一起下。
这里有个坑：延后加载会让滚动时出现空白，所以要给位置留白。尺寸那一步如果做好了，这一步就顺理成章。
动作：给非首屏图片加上延后加载，然后自己滚一遍页面看有没有明显闪动。
五、合并小图标
页面上如果有一堆零碎的小图标，每个都单独发一次请求，请求数量本身就成了负担。
把常用小图标合并成一张或几张，能砍掉一大截请求数。注意别把偶尔用到的图标也塞进来，那样反而让每次都要多下一份。
动作：数一下页面上小图标的请求数量，超过一屏能数完还嫌多，就值得合并。
优先级和一件容易忽略的事
从前往后做。加尺寸和换资源这两件最安全，改完不会有副作用；换格式需要肉眼把关；延后加载要处理留白；合并图标改动面最大，放最后。
这五件事做完，通常就已经够用了。再往下就要动构建和拆包，那是另一个层面的工作了。
上面五件都是「减」，其实还有一种是「不给」：页面上有些图，本来就不需要那么多张。
我那个画板项目导线稿的时候，一次放进去的数量比实际用到的多。后来发现，用户真正会画的就那几张，剩下的只是让选择看起来更丰富。
少放几张，收益是双份的：体积下来了，用户的选择负担也轻了。不是所有图都必须保留，问问它到底有没有人用。
这一类判断不需要技术，需要你去看真实的使用情况。我现在的习惯是隔一段时间回看一次，把没人碰的图撤掉。
图片资源拖慢页面怎么办，走到这一步已经不是技术问题了，是取舍问题。少放一张图，比把一张图压到极致更有效。
常见问题
Q：图片资源拖慢页面怎么办，最快的改法是哪个？
A：先给图片补上宽高。这个改动不涉及内容取舍，能直接减少页面跳动，做完立刻能感觉到差别。
Q：图片一定要换成新格式吗？
A：不一定。要看图片内容，照片类收益通常明显，简单图标类可能差别不大，用同一张图导出几种格式对比一次再决定。
Q：延后加载会不会让页面看起来更卡？
A：位置没留白的话会。先给图片定好尺寸再延后加载，滚动时就不会出现明显跳动。
相关阅读
本文作者西米，37 岁程序员，一个人加五个 AI 员工在跑一家公司。踩过的坑和真实账本都写在公众号「西米分享」。
完整代码、踩坑清单与最新进展，都在公众号。
📱 关注公众号「西米分享」