本篇文章主要与大家分享利用`IntersectionObserver API` 和 HTML5原生 `loading="lazy"` 属性实现图片懒加载的进阶方案，最后我也会分享一个Hook函数。

作为一名五年经验的前端工程师，本文深度剖析图片优化的核心逻辑，结合实战案例总结 5 个关键技巧 —— 从格式选择、尺寸匹配到懒加载策略，帮你解决页面加载慢的痛点。

在前端开发中，网页截图是个常用功能。从前，html2canvas 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，速度慢、占资源，用户体验不尽如人意。 好在，现在有了 SnapDOM，一款

用 Vue3 + Canvas 从零打造一个在线图片水印工具！支持自定义文字、位置、透明度、旋转与平铺，还能一键下载。纯前端实现，无需后端，小白也能看懂，附完整源码，即开即用！

今天我们就来详细对比一下vue2+webpack和vue3+vite这两种环境下动态资源引入的差异，以及背后的原因。

uni-app 多文件上传：直接循环调用 uni.uploadFile 实现（并行 / 串行双模式） 在 uni-app 开发中，多文件上传是高频需求 —— 比如表单附件上传、多图上传等。很多同学会纠

单IMG标签还能玩出什么花样？大部分注重内容的图片（比如商品展示、文章配图）都推荐直接使用`img`标签

使用第三方插件 `image-conversion` 封装的图片压缩方法,对图片进行压缩，计算图片在最大宽高限制下的目标尺寸

前端图片压缩 = Canvas/Compressor 压缩 + WebP/Web Worker 优化 + 构建/部署链集成，按清单执行，体积直降 80%。