通过 3 个简单的步骤使网站上的所有图像为响应式的
图片对网站性能至关重要，但大多数网站仍未实现响应式图片。 这不仅仅是让图像适合屏幕，还要让图像尺寸相对于设备来说比较合理。 最适合我们的 srcset 和 sizes 选项很难实现。 Cloudinary 提供了一种更简单的方法，我们将在本文中讨论。
在此文章中，我将分享一个有价值的快捷方式，可以帮助大家将所有图像变为响应式。 但首先，让我们谈谈什么是响应式图像：如果图像在不同尺寸的设备上保持其质量而不会对性能产生令人不快的影响，则该图像被认为是响应式的。
为了更好地理解这个概念，让我们看一下一些设备尺寸：
不同屏幕尺寸可能的全宽图像尺寸
- Large/X-Large commercial screens: 2000+ pixels
- Websites: 760 - 1200 pixels
- Mobile Phones: < 760 pixels
假设我们有一个移动优先策略来构建响应式应用程序。 我们可能决定始终使用 760 像素的图像，而不考虑更大的屏幕。 如果这些图像要占据呈现它们的设备的整个宽度，那么我们的内容在网站或商业屏幕上看起来会失真且不专业。
我们的下一次尝试是使用尽可能大的图像 (2000 像素) 并根据显示它的屏幕尺寸将其缩小。
缩小图像
使用 CSS 或 JavaScript 缩小图像只会使它们在尺寸上具有响应性。
在网络和移动设备上，大小仍然是 8.9MB。 请记住，我们的手机比 PC 拥有更少的资源，我们还有更多的工作要做。
仅使用缩小比例的方法并不理想，因为它没有考虑图像的大小； 只是它的尺寸。
我们已经看到放大也不起作用，因此我们需要能够同时处理维度和尺寸的东西。
大小合适
我们最好的选择是根据屏幕尺寸生成图像并渲染它们。 这个过程可能非常复杂，但有一个捷径可以帮助我们自动化大部分过程。 我们可以使用 Cloudinary 通过三个简单的步骤使所有图像变成响应式：
1. 在你的项目中包含 Cloudinary
只需使用 script 标签将 Cloudinary SDK 包含在我们的 index.html 中，即可将 Cloudinary SDK 添加到我们的项目中：
<script
src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.min.js">
</script>
2. 使用 data-src 添加图像
在 JavaScript 运行之前，我们不希望图像立即呈现。 因此，使用 data-src 属性而不是 src 包含图像：
<img
data-src="
http://www.jiyik.com/demo_source/v1501761946/pexels-photo-457044_etqwsd.jpg
"
alt=""
class="cld-responsive" />
使用这种方法，Cloudinary 首先分析我们的浏览器屏幕，调整保存在 Cloudinary 存储中的图像的大小，如 data-src 中提供的那样，然后使用 JavaScript 以适当的大小和尺寸渲染图像。
标签中需要注意两点：
- w_auto,c_scale 转换参数告诉 Cloudinary 根据检测到的包含元素中图像实际可用的宽度，动态生成缩放到正确宽度值的图像 URL。
- cld-responsive 类告诉 Cloudinary 哪些图像也应用此功能。
3. JavaScript调用
最后，在你的 JavaScript 文件中初始化一个 Cloudinary 实例并调用这个实例的响应方法：
const cl = cloudinary.Cloudinary.new({ cloud_name: 'YOUR_CLOUD_NAME' })
cl.responsive()
请记住创建一个免费的 Cloudinary 帐户，以便我们可以收到一个用于配置此实例的云名称。
这段代码将遍历 DOM，找到所有具有 cld-responsive 类的图像标签，以在其上应用大小和尺寸适合的图像。
最后的话
请始终记住，当我们像下面的代码一样使用 CSS 来使图像具有响应性时，它并不能保证良好的用户体验：
img {
width: 100%;
height: auto;
}
这些图像的大小保持不变。 移动设备上的大图像会占用资源（如分配的内存和正在运行的进程），导致用户设备上的下载缓慢或出现意外行为。 响应式图像可确保用户节省大量数据带宽，并在使用我们的图像丰富的网站或应用程序时获得出色的体验。
最后，最好记住建议的方法依赖于 JavaScript。 因此，牺牲了 srcset 和 sizes 提供的预加载功能，我们的浏览器必须启用 JavaScript 才能使用此功能。
