Colorbox question – optimized images for mobile viewing


Trying to optimize site to make it faster and am making great in-roads optimizing images/js/css etc.

However – I am wondering about Colorbox.

I have a section which is absolutely crucial to the site. It’s a gallery of parts our machines can make and contains about 150 images right now.

The gallery is great – I use exposed filters to let users pick specific parts. I also have image carousels on certain pages showing what parts a specific machine can make.

Therein lies the rub.

You have beautiful images to look at on the desktop.

But Colorbox – at least to my knowledge – does not generate viewport appropriate image sizes. (like I think WordPress core does)

So my mobile page speed score suffers because of:
1 – images size are not optimal for the viewport
2 – compression

Is there a workaround for this? Does anyone have any experience with this?

Any help is appreciated. Thanks!

Drupal version: