javascript - 如何在不更改源图像的情况下压缩站点上的图像？

Question

我正在开发一个Jekyll照片博客。网站上的一页同时显示多张照片。单击单张照片会在新窗口中以全分辨率打开。请参见下面的示例：

原始照片是高分辨率的。目的是在网站上分发高分辨率照片。但是，当有人转到所有照片一起显示的照片页面时，由于高分辨率图像，页面加载非常缓慢。

我的问题是，如何从照片页面上的源文件中压缩照片，但如果有人单击单张照片，仍保持全分辨率图像可用？

我已经看到了用 Jekyll 做这样的事情的选项。jekyll-compress-images似乎提供即时图像压缩，但似乎全分辨率图像不会进入生产站点。还有一个jekyll-assets插件（还有一个与此类似的问题），但似乎更特定于 CSS 和 JavaScript 压缩。

或者，如果使用 Jekyll 插件无法做到这一点，那么 JavaScript 是否有另一种方法？或者它可以作为持续集成管道的一部分来完成吗？

谢谢！

标签： javascriptrubyimagejekyllimage-compression