将外部图像显示为缩图而不导入全尺寸
Display external images as miniatures without import full size
在我的网站（新闻聚合器）中，我显示文章框，其中包含链接到外部文章的标题和缩略图。
<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:image 中显示一个缩影。
在对我的网站负载进行性能测试时，它显示某些图片大小为 2 或 3 mb，并且由于我的网站显示了一个列表，假设有 50 篇文章，它变得很大。
我的问题是：由于我的用户不需要完整图像，有没有办法在不导入完整图像的情况下将 og:image 显示为缩图？
谢谢
我正在按照 OP 的要求发布答案。
基本上，因为图像是外部的，所以您无法使用 HTML/CSS/JS.
等客户端（前端）语言真正控制尺寸、质量或文件大小等文件属性
选项 1：在您的服务器上生成缩略图
因此，如果您想减小其中一个外部图像的文件大小，最好的办法可能是设置某种后端脚本来提前提取图像。后端脚本（使用 PHP 之类的东西）可以拉取图像并将它们重新保存在您的服务器上，在此过程中降低尺寸、质量或文件格式以帮助减小文件大小。
然后在您的聚合文章页面上，您将使用您生成的缩略图，而不是来自外部来源的直接图像。
但是，应该注意这意味着您需要 运行 这个后端脚本 在 用户尝试加载任何 images/thumbnails 之前，因为有它 运行 当他们请求 page/article/image 仍然意味着必须在转换之前下载整个文件。
选项 2：延迟加载图像
这不会真正减少页面加载，但延迟加载图像可以加快页面加载的关键 部分，仅在其他所有内容之后加载那些大图像文件已加载。
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
这为您提供了一个基本的 惰性 加载图像，这有助于使页面看起来加载速度更快，但实际的外部文章图像仍将花费相同的时间加载。浏览器将等待并最后加载它们。
在我的网站（新闻聚合器）中，我显示文章框，其中包含链接到外部文章的标题和缩略图。
<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:image 中显示一个缩影。 在对我的网站负载进行性能测试时，它显示某些图片大小为 2 或 3 mb，并且由于我的网站显示了一个列表，假设有 50 篇文章，它变得很大。 我的问题是：由于我的用户不需要完整图像，有没有办法在不导入完整图像的情况下将 og:image 显示为缩图？
谢谢
我正在按照 OP 的要求发布答案。
基本上，因为图像是外部的，所以您无法使用 HTML/CSS/JS.
等客户端（前端）语言真正控制尺寸、质量或文件大小等文件属性选项 1：在您的服务器上生成缩略图
因此，如果您想减小其中一个外部图像的文件大小，最好的办法可能是设置某种后端脚本来提前提取图像。后端脚本（使用 PHP 之类的东西）可以拉取图像并将它们重新保存在您的服务器上，在此过程中降低尺寸、质量或文件格式以帮助减小文件大小。
然后在您的聚合文章页面上，您将使用您生成的缩略图，而不是来自外部来源的直接图像。
但是，应该注意这意味着您需要 运行 这个后端脚本 在 用户尝试加载任何 images/thumbnails 之前，因为有它 运行 当他们请求 page/article/image 仍然意味着必须在转换之前下载整个文件。
选项 2：延迟加载图像
这不会真正减少页面加载，但延迟加载图像可以加快页面加载的关键 部分，仅在其他所有内容之后加载那些大图像文件已加载。
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
这为您提供了一个基本的 惰性 加载图像，这有助于使页面看起来加载速度更快，但实际的外部文章图像仍将花费相同的时间加载。浏览器将等待并最后加载它们。