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

Question

我是初学者。因此，我想加快图像繁重的网站的工作，它有很多1000x750的图像（单击时是如此放大），但是当该网站加载且您没有单击图像时，它只有200x150。但是，网站会加载图片的完整大小。

我该怎么做，网站仅加载200x150版本，并且仅在单击时加载大图片？

顺便说一下，该网站是wordpress。

非常感谢-由于sorry脚的问题而感到抱歉：（

Answer 1

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

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

在模板中通过php输出图像时，应利用wp_get_attachment_image或wp_get_attachment_image_src之类的功能，这些功能可让您输出图像并选择'size'。同样，尺寸是默认尺寸和您注册的自定义图像尺寸。

以这种方式输出图像的优点是，它还利用了responsive images的优势-WordPress会自动将srcset标签添加到srcset标记中，以用于多种设备。

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