身为一个程序员 🧑‍💻 ，不会还有人手动一张张上传图片压缩吧 🌝 ？通过封装好的工具，就能实现自动压缩项目内的图片，彻底释放双手 🤲 ！

图片的优化处理汇总，包括选择合适的图片格式，图片压缩，CSS Sprites(雪碧图，CSS 精灵)，图片懒加载，CSS 替换实现，base64 格式，iconfont 字体图标，使用 CDN等等

图片是前端开发重度依赖的资源，然而图片过多过大会导致页面加载很慢，出现等待白屏现象。本文内容针对如何做自动压缩图片方案展开讲解。

预加载和懒加载的字眼总会看到 。 其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。 这里会详细介绍图片的预加载和懒加载

在华为云算法平台中，我们需要大量处理各种图片类型的文件。我们知道，在日常处理图片的操作中，实际上是一个比较复杂的过程，涉及的流程也非常复杂

图片懒加载是一个很受欢迎的优化站点的方法，因为它很容易实现，并且能明显提升性能。使用惰性加载，我们可以异步加载图片，这意味着可以只加载浏览器视口内的图片。 大约一年前，图像和iframe的原生惰性加载特性已发布，但是仅针对谷歌和其他主流浏览器。该功能的重点是使浏览器可以控制何时…

一开始是打算用TinyPNG的API实现图片压缩，但是尝试过后发现压缩速度特别慢，而且好像还要花钱，果断就放弃了。改为使用imagemin。 这里是有一个坑的： 由于imagemin不可以直接压缩图片，而是需要依赖imagemin-jpegtran和imagemin-pngqu…

在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。 我们先来看一下页面启动时加载的图片信息。 如图所示，这个页面启动时加载了几十张图…

这两天在看JavaScript的API时发现了这样一个东西IntersectionObserver(准确说它是浏览器原生提供的一个异步API)，它能够对一个元素进行监听，判断该元素是否在当前窗口中。 不用管它，简单点说，IntersectionObserver就是观察一个元素是…