如何在html中使用较低分辨率的图像创建缩略图

Question

我有一堆高分辨率图像（比如6000x4000 jpegs），我已经用它们创建了一个3列的画廊（看起来像unsplash＆＃39的画廊）。所以我希望它是一个低分辨率缩略图的画廊，当我点击它们时，我在新标签中打开了完整的res图像。我用css将包含imgs的div的宽度设置为400px，但它只会影响它们在页面布局中的外观。我的意思是在那些400px div中加载的图像仍然是6000x4000，所以当我滚动时页面会冻结。我想在这些div中加载低分辨率图像，但不创建低分辨率的每个jpg的另一个文件夹，并加载它们。我的意思是我可以降低使用html，css，js，jquery，php加载到页面中的图像的分辨率吗？

Answer 1

如果您已经将图像加载到客户端，那么降低分辨率没有任何意义，您应该使用服务器端解决方案生成小图像，加载速度会快得多。

Answer 2

对您的问题的简短回答是：不，没有办法用HTML，CSS或JavaScript改变图像分辨率。

正确的解决方案是在将图像部署到服务器之前调整图像大小：创建一个400px宽度的版本并保留源。

之后，您可以使用您的图库的小版本（缩略图）并将其包装在指向源文件的链接中。

这样在访问图库时没有人必须加载那些巨大的图像，因为页面重量大大减少，然后点击用户可以下载原始图像（我仍然建议在此之前发出一些警告，因为6000x4000声音就像一张图片那样数据太多了。）

示例：

<figure>
    <a href="path/to/huge-source.jpg">
        <img src="path/to/thumbnail.img" alt="Some alternative text" />
    </a>
    <figcaption>Beware: the link points to a source file with a lot of data to download (resolution: 6000x4000)</figcaption>
<figure>

希望这有帮助。