原文链接：cloudinary.com/blog/image_...
在网页设计领域，一些你看不到的东西会伤害你。更糟糕的是，它可能会损害你的品牌声誉，更不用说伤害底线了。我正在说的是图片，它可能消耗了很多带宽，在一些网站中甚至高达70%。浏览他们会让你和你的使用者产生费用，事实上，你可能会为没有展示的图片付费因为浏览者并没有滚动足够远到能看到他们。
此外，图片加载速度会影响网站性能，包括实际的和感受到的。感知对转化的影响可能比实际加载时间更大。 这篇文章描述了加载图像的三种流行方法以及这些方法的优缺点。
有问题的用例
多年来，有三种图像一直让前端开发人员头疼：
- 首屏图片 每隔一段时间，画廊、商店和登录页面就会加载访问者从未看到或与之互动的图像请看这个示例，如果浏览者不滚动，为什么要支付这部分费用？
- 主图 这些图片位于顶部，大且重，可能需要一段时间去加载，在此期间，你的访客应该看什么？
- 图片轮播 根据轮播的图片大小，轮播图像可能会导致首屏图像和主图出现问题。
越大越受欢迎的网站，这些问题会越严重，慢连接时等待图片加载是很令人烦恼，更糟糕的是，随着加载的进行，访问者甚至可能耗尽移动流量。
三种流行的解决方案
为了避免网站快速膨胀并且快速显示相关图像，您可能会通过以下三种方式中的一种或多种加载他们。
- 图片预加载 在展示前加载图片。这有一个例子。
- 延迟加载图片 只加载需要的图片，当访客滚动的足够远，看这个完美的示例。
- 加载渐进式图像 首先加载一个小的（通常是模糊的）预览图像，然后加载一个较大的高分辨率图像。Medium 就是这样做的，Facebook 也是如此。
现在，哪种方式是"最好的"？您可能可以从引号中看出没有最好的方法：根据利弊，您选择最适合手头工作的技术，如下所述。
预加载图片
许多创意设计网站（尤其是那些带有视频背景或许多大图像（例如设计师作品集）的网站）都会预加载图像。如果您的网站具有横跨整个页面宽度和高度的大图片轮播界面，则预加载是有意义的。但是，让访问者等待预加载器完成其工作会导致用户体验不佳。
为了消除这种等待，请尝试 Mark Meyer 的建议：加载大多数访问者可能希望使用预加载器查看的图像，尤其是滑块和画廊的图像。请注意，这种方法涉及并行和顺序下载以及繁重的 JavaScript 的健康组合，这在慢速连接和设备上效果不佳。
对于某些资产，请考虑使用 Web 标准 <link rel="preload"> 而不是 JavaScript 来加载它们。由于该标准目前仅受 Chrome、Opera 和 Android 浏览器支持，因此最好仅将其用于内部项目。
底线：如果预加载图像是您的最佳选择，例如在客户端请求的情况下，请使用预加载器进行预加载。选择带有进度条而不是显示逐渐加载的loading。
延迟图片加载
对于大量图像，例如图片库、报纸网站、博客和电子商务，延迟加载它们非常经济。但是，与其他方法相比，延迟加载目前需要更多的 JavaScript，从而导致更多的复杂性、更多的开发时间和更高的错误场景可能性。最令人担忧的是，如果在连接速度较慢的情况下没有下载所有 JavaScript，或者如果执行了并非所有的 JavaScript，您的图像可能根本不会显示出来。在这种情况下，根据实现的不同，首屏下方或上方不会显示任何图像。
延迟加载对于知名的人群来说是理想的选择，他们大多使用快速网络上的中高端智能手机，或宽带上的笔记本电脑或台式机设备。如果您的受众的连接速度较慢，为了避免对 JavaScript 的依赖，请勿使用延迟加载。
注意：请考虑使用 Robin Osborne 建议的非 JavaScript 回退的解决方法。 另一个签出选项是库 lazysizes，它可以延迟加载图像并动态生成相关消息。
另外两个提示：
- 确保基本图像尽可能小，并尽可能正常地加载它们。
- 延迟加载通常适用于博客文章和摄影作品集中的非必要图像。但是，在电子商务网站上延迟加载产品图片可能会适得其反，因为潜在买家可能无法找到您的产品，尤其是当他们在连接速度较慢的移动设备上时。
加载渐进式图像
渐进式图像，又名图像预览或低质量图像占位符，越来越受欢迎，尤其是在 Medium 和 Facebook 等网站上，在这些网站上，图像与文本一样重要，并且是必须显示的。
渐进式图像完全抓住了另一个痛点：感知的性能。如前所述，网站不仅应该快，而且必须感觉快。在这个微秒级注意力跨度的时代，您必须让访问者保持足够长的时间，以便首先加载您的图像。在图像是内容主体的网站上，这意味着让访问者知道图像正在立即出现。
一种常见的方法是显示更小、更模糊的图像版本，一旦加载高分辨率版本，它就会淡入加载。与此同时，对于阅读 中篇帖子的访问者可能。俗话说第一印象就是最后印象，渐进式图像可以帮助您优化这种感知。
请注意渐进式图像提供了另外两个好处：
- 渐进式图像的处理可能发生在网站或应用程序的后端，需要最少的 JavaScript。HTML 和 CSS 足以生成低质量的图像占位符。下面是一个示例。
- 渐进式图像的预览始终以与原始图像相同的大小显示，这意味着页面布局以正确的尺寸加载所有内容，从而大大简化了操作。
同样，您加载渐进式图像以让访问者知道图像即将到来。对于电子商务网站，当一个充满产品图片的页面打开时，您希望访问者等待足够长的时间才能加载。对于社交网络，您希望受众看到他们的新闻源正在加载;如果它的某些部分看起来是空的，他们可能会感到沮丧并离开。
总结
如果您最关心的是带宽，那么延迟加载图像是最佳选择。有关实现该过程的提示，请参阅此文章。另外，请记住渐进式图像可能会给人留下更好的第一印象。此外，我建议以下几点：
- 延迟加载不必要的图像当你有后备条件，尤其是在您的受众处于快速的网络时。
- 渐进式加载图片适用于图片很重要的网站，比如，产品页，社交新闻源，上下文基于相关图片的文章和教程。
- 仅当您别无选择时才预加载图片，因为这样做可能会遇到延迟加载的潜在缺点，并且默认情况下需要更多带宽。
例如，您可以在轮播中预加载前三张图像，然后使用模糊预览延迟加载其余图像。然而，这是一个复杂的举动。另一方面，根据具体情况评估方法，同时要考虑到项目的各种元素，您可有一些令人兴奋的发现。如果您想出一些很酷的东西，请在评论中告诉我们。