I am working on a Jekyll photo blog. One page on the site shows several photos together at once. Clicking on a single photo opens it in full resolution in a new window. See an example below:

The original photographs are high resolution. The intention is to distribute the high resolution photographs on the website. However, when someone goes to the photos page where all the photos are shown together, the page loads very slowly because of the high-resolution images.

My question is, how can I compress the photographs from the source file on the photographs page, but still keep the full-resolution images available if someone clicks on an individual photo?

I have seen options for doing something like this with Jekyll. jekyll-compress-images seems to offer on-the-fly image compression, but it does not seem like the full-resolution images will go to the production site. There is also the jekyll-assets plugin (and there is one other question similar to this) but seems more specific to CSS and JavaScript compression.

Alternatively, if it is not possible to do this with a Jekyll plug-in, is there another way with JavaScript? Or could it be done as part of a continuous integration pipeline?

Thanks!