解决图像加载缓慢问题的 3 个简单步骤

在网络上加载图片可能会很麻烦，尤其是在你主要为移动设备构建网站的情况下。由于在这种情况下使用无线连接，传输速度通常比有线连接慢，因此内容加载速度也会更慢。

对于文本，您可能无法察觉到差异，因为文本在网络上传输速度非常快，而且只有几 KB 大小，而图片，尤其是高分辨率图片，通常文件很大（几 MB），加载速度很慢。简单的方法是排除高分辨率图片，但在大多数情况下，我们无法减少高分辨率图片的数量，所以我们必须处理它们。别担心，我马上会教您如何在网站上掌控大图片。⏱

致胜工具🏆

首先，请确保您要添加到网页中的图片已最小化/压缩。您可以使用许多工具来完成此任务，其中一些工具还能确保图片的整体质量保持不变。话虽如此，了解图片的使用方式和位置还是很有好处的，因为您应该根据具体情况进行优化。例如，一张仅显示为小图标的图片（可能是 20px/20px）不需要 2000px/2000px 的分辨率，因为那样会太大。另一方面，一张全宽的大图片也不应该太小，以保持良好的分辨率。

为了解决此任务，我可以根据您的需求推荐以下资源：

🛰 在线图像最小化/压缩：

📦将最小化任务集成到您的构建/预处理中（推荐）：

webpack：https://web.dev/codelab-imagemin-webpack
gulp：https://github.com/sindresorhus/gulp-imagemin
包裹：https://github.com/DeMoorJasper/parcel-plugin-imagemin

确保以正确的方式加载图像🔍

其次，让加载速度更快、更流畅的一个根本要素是以正确的方式加载图片。你肯定听说过延迟加载，也就是中断浏览器立即加载内容，然后稍后再重新加载，通常使用 JavaScript。延迟加载适用于图片量很大的网站，你无法一次性加载所有图片，因为这样你的网站加载时间会非常长，甚至最终会一直加载下去（因为你无聊而取消了加载）。为了解决这个问题，延迟加载会先加载你指定的图片（最初），然后在某个操作发生后（例如图片滚动到视图中或其他交互发生后）再加载剩余部分。🕹

一些延迟加载库：

加载正确图片的另一个解决方案是为正确的视口选择正确的文件。网站上的图片在移动设备上通常可能更小，因为它们在小视口下会缩小，因此尺寸也可能更小。要根据视口/屏幕尺寸加载不同的图片，您需要监控视口并设置正确的图片来源。🖼📱

1️⃣ 标准<img>元素传统上只允许您将浏览器指向单个源文件：

<img src="nice-image-900.jpg" alt="This is a very nice image">

2️⃣ 为了设置响应式图像加载，我们可以使用两个新属性 —srcset和sizes— 来提供几个额外的源图像以及帮助浏览器选择正确图像的指令。

<img srcset="nice-image-340.jpg 340w,
             nice-image-500.jpg 500w,
             nice-image-900.jpg 900w"
     sizes="(max-width: 340px) 300px,
            (max-width: 500px) 450px,
            900px"
     src="nice-image-900.jpg" alt="This is a very nice image">

乍一看，srcset和size看起来很复杂，但理解起来并不难。深入理解一下，会srcset设置各种图片并定义它们的实际宽度（例如 340w -> wnot px）。要获取图片的实际宽度，您可以检查计算机上的图片信息。sizes属性描述了哪个图片最适合当前视口。

此时，如果支持该功能的浏览器在加载页面时，其视口宽度为 480px，则 (max-width: 480px) 媒体条件将为真，因此浏览器会选择该450px插槽。nice-image-500w.jpg将会加载，因为其固有宽度 ( 450w) 最接近500w。

设计时考虑图像加载

第三，防止图片加载缓慢或出现一般加载问题的最佳解决方案是减少网站初始加载的图片总量。加载的图片越多，网站速度就越慢，而我上面给出的建议仅适用于你不得不这么做的情况。

如今，设计师更倾向于使用矢量图形，例如 SVG，因为 SVG 文件本质上是文本，因此加载速度非常快。此外，加载 SVG 后，您还可以在代码中修改某些部分，这在某些情况下非常便捷。因此，可以说，SVG 应该尽可能使用，而图像只在必要时使用。图像加载解决方案的另一个方面是选择正确的图像格式，您可以在此处找到一篇关于此主题的优秀文章。

因此，可以说，只要有可能就应该使用 SVG，而仅在必要时才使用图像。

祝您编码愉快，图像质量提升，速度飞快！🚀💫

鏂囩珷鏉ユ簮锛�https://dev.to/felixhaeberle/3-easy-steps-to-fix-slow-image-loading-5fh6