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

Posted 2023-03-29

【中文标题】如何在 html 中创建具有较低分辨率图像的缩略图

【英文标题】：How do I create thumbnails with lower resolution images in html

【发布时间】：2017-10-24 11:15:08

【问题描述】：

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

【参考方案1】：

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

【参考方案2】：

对您的问题的简短回答是：不，无法使用 HTML、CSS 或 javascript 更改图像分辨率。

适当的解决方案是在将图像部署到服务器之前调整它们的大小：创建一个 400 像素宽度的版本并保留源代码。

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

这样在访问画廊时无需加载这些巨大的图片，因为页面重量大大减少，点击后用户可以下载原始图片（我仍然建议在此之前放置某种警告，因为声音为 6000x4000就像一个可怕的数据，即使是一张图片）。

例子：

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

希望这会有所帮助。

【讨论】：

我忘了补充一点，我也知道 php 的基础知识。有没有办法使用 php 做到这一点？

查看 PHP 文档：php.net/manual/en/ref.image.php 有很多可能的解决方案。