大幅放大原始小尺寸JPG图片在现代浏览器中渲染是否存在性能风险？

核心结论 #

这种大幅放大图片作为占位图的操作会引发严重性能问题，中低端移动设备极大概率出现内存异常、页面崩溃的情况，桌面端高端设备也会出现明显的帧率下降。

具体风险说明 #

• 内存占用爆炸：浏览器渲染位图时，会先将原图解码为对应显示尺寸的RGBA原始位图，每像素占4字节。25000x25000尺寸的位图单张就占用25000 * 25000 * 4 = 2.5GB内存，远超大部分移动设备分给浏览器进程的内存配额，直接触发OOM（内存溢出）导致页面崩溃、WebView闪退。
• 渲染性能大幅下降：超大尺寸位图的每一次重绘都需要消耗大量GPU资源，叠加transform: scale缩放动画时，每帧都要重新计算、绘制整个超大图层，即使是高端桌面端也很难维持流畅帧率，移动设备基本会出现动画卡顿、页面无响应的问题。
• 兼容性风险：部分老旧移动浏览器、嵌入式WebView会对超大尺寸元素做强制裁剪，甚至直接跳过该元素的渲染，导致占位图完全不显示的异常。

优化方案（针对瓦片查看器占位场景） #

你完全不需要把占位图设置为和瓦片画布等大的尺寸，按以下方案调整即可完全规避性能问题：

• 给瓦片查看器的外层视口容器设置overflow: hidden，占位图仅需要设置为和视口同等尺寸，放大时直接等比缩放该小尺寸占位图即可，即使有模糊也不影响临时占位的作用，此时内存占用仅为视口尺寸位图的大小（常规移动端视口下仅10~20MB）。
• 可以改用背景图实现占位：给外层容器设置background-image: url(image-600.jpg)搭配background-size: cover，不需要额外插入超大尺寸的img元素。
• 若必须保留大尺寸元素设置，可给图片添加image-rendering: pixelated减少放大时的插值计算开销，同时添加will-change: transform提示浏览器提前做动画优化。

内容的提问来源于stack exchange，提问作者Marvin3