我有一个react应用程序，它有许多图像引用(标记<img src=... />和cssbackground:url(...)(类型。
这些映像托管在Azure存储上。
为了加快我在各种设备(台式机和移动设备(上的应用程序加载时间，我需要在这些图像到达客户端(即服务器上的某个位置(之前调整它们的大小。
到目前为止，我可以想到以下选项：
-
选择每个图像，并为各种标准设备大小生成多个版本的图像。然后，拾取每个
<img src=... />标签，并使用JS更改图像名称，以便提供合适大小的图像。这将不适用于css。 -
使用Azure CDN自动调整图像大小。我希望在CDN门户从设备中检索用户代理时，能够自动调整大小。有人知道这是不是真的吗？
-
通过Azure功能提供图像，动态调整图像大小(如这里所建议的(
有人能提出他们能想到的其他选择吗，或者以上的利弊。
由于您使用的是javascript，请使用window标记。对于浏览器，窗口选项卡测量浏览器的分辨率，您可以将图像的高度和宽度设置为window.innerHeight和window.innerWidth。有多种其他方法可以做到这一点，但如果您的编码项目需要用最少的代码行来提高效率，那么这是最简单、最优化的方法。
有关窗口对象的详细信息，请单击此处：https://www.w3schools.com/js/js_window.asp
附言：这只是一个针对台式机的解决方案，对于移动设备，你可以使用screen.width，screen.height。这可能在台式机上不起作用，但在macOS Big Sur设备上它起作用，我试过了(这可能是因为macOS BigSur就像一个移动优化的界面，你甚至可以在上面运行iOS应用程序，但除非我们尝试，否则我们不知道(。这可能是一个更好的选择，因为它很可能在您的所有设备中都很常见。
有关屏幕对象的详细信息，请点击此处：https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php
如果它们在所有目标设备中都不常见，请尝试制作一个检测器程序，用它可以检测设备类型并将其存储在变量中。然后创建2个if语句，说明
if(deviceType = iOS){
<img src=..., screen.width, screen.height/>
}else if(deviceType = Windows){
<img src=..., window.innerWidth, window.innerHeight/>
}
显然，这段代码不起作用，但它只是向您展示流程，让您能够理解我的意思。你需要以自己的方式整合它，但这只是一种让它更容易的方式，因为很多时候人们提到我的答案不容易理解，只是作为一种安全措施。
这些选项中最好的部分是，这将调整图像本身的大小，而不是重新制作图像本身的副本，这节省了存储空间，并消除了用户使用诸如49〃的意外显示输出的机会；三星奥德赛G9显示器的分辨率与您的预期相去甚远，并调整了尺寸。这也意味着你不必创建一个单独的文件来生成图像大小调整代码，只需创建一个检测操作系统的文件(如果屏幕对象工作，则无需(，因为这就是我们所说的Azure，他们总是检测自己的用户群。
如果您有任何疑问，请回复。
祝你好运！