下载一个大型图像的小版本-客户端-没有后端功能-javascript

可以下载不同尺寸的图像吗

例如，我有3000*3000像素的图像：

所以当我的javascript代码在Android上运行时，我们只需要一个1000*1000的图像。我知道下载后可以调整此图像的大小（例如使用画布）

---

但是，是否可以在不运行后端代码的情况下下载此映像的小版本？只是客户端

调查srcset属性，该属性用于提供不同的图像源。srcset属性指定在不同情况下使用的图像的URL

So, with these attributes in place, the browser will:

Look at its device width.
Work out which media condition in the sizes list is the first one to be true.
Look at the slot size given to that media query.
Load the image referenced in the srcset list that most closely matches the slot size.

以下是来自

但是，我们可以使用两个新属性srcset和size来提供几个额外的源图像以及帮助浏览器选择正确图像的提示。您可以在Github上的responsive.html示例中看到这方面的示例（另请参阅源代码）：

srcset和sizes属性看起来很复杂，但是如果您按照上面所示的格式对它们进行格式化，并且每行上都有不同部分的属性值，那么它们就不难理解了。每个值包含一个逗号分隔的列表，列表的每个部分由三个子部分组成。现在让我们浏览一下每一篇文章的内容：

srcset定义了允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

图像文件名（elva-fairy-480w.jpg.） 空间。 图像固有的像素宽度（480w）-请注意，这使用的是w单位，而不是您可能期望的px单位。这是图像的真实大小，可以通过检查计算机上的图像文件找到（例如，在Mac电脑上，您可以在Finder中选择图像，然后按Cmd+I打开信息屏幕） 大小定义了一组媒体条件（例如屏幕宽度），并指示当某些媒体条件为真时，最佳选择的图像大小-这些是我们前面提到的提示。在这种情况下，我们在每个逗号之前

媒体条件（（最大宽度：480px））-您将在CSS主题中了解更多关于这些的信息，但现在让我们只说媒体条件描述屏幕可能处于的状态。在本例中，我们说的是“当视口宽度等于或小于480像素时”。 空间。

---

媒体条件为真时图像将填充的插槽宽度（440px）。

如果没有后端代码，我认为这是不可能的。我想可以只加载部分渐进式JPEG，在局部缩小时看起来还可以。通常，将后端代码添加到特定于服务器的映像大小并不困难。这可能是这样的：

我在这里发现了一些有趣的想法：

---

存储器中不能有多种格式的图像。这只是一张高质量的图片，我想知道是否有可能下载低质量的版本。谢谢JeremiahBarrar。我们在后端使用Firebase和node.js。您对npm提供不同尺寸的图片有什么建议吗？似乎很好，夏普使用C++快速调整大小

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">