Looking for a Self-Hosted “Adaptive Bitrate” Photo Gallery Solution

Question

I have a personal Wordpress website I use as a blog. Recently, I decided to create a few photo galleries using the NextGEN gallery plugin. I naively uploaded the original images, and since they're all 2592x1944 and at least 1MB, loading pictures is really slow.

The simplest solution would be to run a script to resize all the images to something more reasonable, maybe 1280x1024 or something. Of course, this is too large for some mobile users, and too small for some desktop users. There isn't a one size fits all resolution.

A similar problem exists for streaming video, and the industry standard solution is adaptive bitrate streaming. Basically, content distributors transcode a video several times, perhaps at 3 HD bitrates and at 3 SD bitrates. The client knows what resolution display it has, and it can pretty easily determine the speed of its connection, so it can choose the best stream for the given display and connection.

I want a self-hosted photo gallery solution that does the same thing. I want to be able to upload a bunch of high-resolution images, at which point in time the backend will convert those images into a number of different formats. The frontend should have logic that automatically fetches the "right" image from the server.

Does something like this exist? Or is this something I would have to build myself? I've done a bit of research, but it's difficult to find what I'm looking for since I'm not sure what this feature is called in the photo-sharing world.

Thanks!

Answer 1

Smaller versions of static images are usually called thumbnails. Modern browsers allow you to specify multiple image sources, the first matching one being used:

<picture>
  <source media="(max-width: 720px)" srcset="tree-sd.jpg">
  <source media="(max-width: 1920px)" srcset="tree-hd.jpg">
  <img src="tree-uhd.jpg" alt="A tree.">
</picture>

or

<img src="tree-sd.jpg" srcset="tree-hd.jpg 1920w, tree-uhd.jpg 3840w" alt="A tree.">

It looks like WordPress already does this.

If you don't want to waste space and bandwidth on alternative photo copies, use progressive JPEG and partial loading as I doubt browsers do that by themselves.