wordpress - 未点击时的图像缩小 - 加快网站速度

Question

我是一个初学者程序员。所以我想加速一个图片密集的网站，它有很多 1000x750 的图片（当它被点击时 - 放大了），但是当网站加载并且你不点击图片时，它只有 200x150。但是，该网站会加载图像的全尺寸。

我怎样才能使网站仅加载 200x150 版本，并且仅在单击时加载大图像？

顺便说一下，网站是wordpress。

非常感谢 - 很抱歉，因为这个蹩脚的问题:(

标签： wordpressimageweb

Answer 1

通过内容编辑器插入图像时，您可以选择要使用的图像大小。可用的（默认）图像尺寸为“完整”、“大”、“中”和“缩略图”。您还可以将图像设置为链接到全尺寸图像。

您可以在主题或插件中注册自定义图像大小。这可以为您提供可供使用的替代图像尺寸。见https://developer.wordpress.org/reference/functions/add_image_size/

在模板中通过 php 输出图像时，您应该利用诸如wp_get_attachment_image或wp_get_attachment_image_src之类的函数来输出图像并选择“大小”。同样，尺寸是默认尺寸和您注册的自定义图像尺寸。

以这种方式输出图像的优势在于，它还利用了响应式图像 - WordPress 会自动将 srcset 标签添加到多个设备的各种尺寸。

如果您希望能够单击图像并让它弹出完整图像，则需要使用 javascript - 或插件 - 来添加此功能。