将外部图像显示为小型化，而不需要输入全尺寸
将外部图像显示为小型化，而不需要输入全尺寸
提问于 2022-01-03 14:14:39
在我的网站(新闻聚合器)，我显示文章框与标题和图片微型链接到外部文章。
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Article Title</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>对于每一篇文章，我都会向og:图像显示相关外部文章的一个缩影。当在我的网站上做一个性能测试时，它会发现一些图片大小是2到3MB，因为我的站点显示了一个列表，比如50篇文章。我的问题是:由于我的用户不需要完整的图像，是否有一种方法可以将og:图像显示为微型，而不需要导入完整的东西大小？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-03 20:08:14
我是应OP的要求作为答复发帖的。
基本上，由于图像是外部的，所以您不能使用客户端(前端)语言(如HTML/CSS/JS )来真正控制文件属性，如维度、质量或文件大小。
选项1：在服务器上生成缩略图
因此，如果您想缩小这些外部映像之一的文件大小，您最好的选择是设置某种后端脚本来提前提取图像。后端脚本(使用类似于PHP的东西)可以提取图像并在服务器上重新保存它们，从而减少过程中的尺寸、质量或文件格式，以帮助减少文件大小。
然后，在聚合的文章页面上，您将使用您生成的缩略图，而不是来自外部源的直接图像。
但是，应该注意，这意味着在用户尝试加载任何图像/缩略图之前，您需要运行这个后端脚本，因为当用户请求页面/文章/图像时运行它仍然意味着在转换之前必须下载整个文件。
选项2：延迟加载图像
这并不能真正减少页面负载，但是延迟加载图像可以加快页面加载的关键部分，只有在加载完其他文件之后才能加载这些大型图像文件。
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />这为您提供了一个基本的延迟加载映像，它可以帮助页面更快地加载，尽管实际的外部文章图像仍然需要同样的时间来加载。浏览器只需等待并在最后加载它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70567065
复制相关文章
相似问题
腾讯云开发者
