My name is Guy Sopher, I’m the lead developer and co-creator of the Pro Gallery. I’ve overseen its growth from a bold idea to the fantastic feature it is today on desktop and mobile.
It was supposed to be a quick win
When we started building the Pro Gallery, the problem seemed simple. We knew we wanted to give images the respect they deserve, especially when they might represent some of our users’ life-long work - images should be presented beautifully and load fast (we’ll talk about performance later).
We soon came to discover that it ain’t that easy. Galleries are an extremely complex beast. Images and videos are quite heavy, both on the network and on the browser, which meant that performance was going to be an issue, and a big one at that. On the other hand, images are also a very delicate creature. This rule is very often ignored or poorly addressed, but images cannot be cropped, compressed or altered in any way, which meant the layout was also going to be a challenging issue.
With that in mind, we set off on a journey to create the best gallery in the world, tackling one issue at a time.
Building amazing layouts
Galleries are all about the layout. Placing images on a screen is considered by some an art form. Layouts are not just a bunch of squares on the screen, they must give the images the perfect sizes and positions to make them stand out.
We were guided by the four “golden rules: Aspect ratio, Responsiveness, Customizability and Beauty.
Aspect Ratio
The layout must never modify the images, so cropping must not be forced.
Responsiveness
The layout must adjust seamlessly to different screen sizes, keeping the images at the same target size and present them in the same order.
Customizability
As every set of images is different, every gallery should be unique. This is why we made the gallery full of customizable layout options, for every single detail in it.
Beauty
Layouts must be impressive, almost magical. Images should fit the screen perfectly no empty spaces or naughty pixels are allowed.
We quickly realised that the layouts have to be generated automatically using a new algorithm that would create a unique layout for each set of images - the pro-layouter.
The algorithm is driven by a set of parameters that define the rules of the layout. The layouter then passes over all the images in the gallery and calculates, according to these rules, the exact position of each image.
You could write a whole blog post about the exact logic behind this algorithm, and the results were indeed staggering - it created galleries so pixel-perfect that it was hard to believe it was automated. Seriously, check it out for yourself.
High Quality, Fast Loading
After building the layout, we needed to dive deeper into each media display, specifically images, but also videos and HTML items.
The issue about media, as we’ve mentioned earlier, is that quality matters - and it matters a lot. As cameras and screens are stocking up pixels, images and videos are getting heavier, but networks don’t usually keep up with the pace, so trying to download all the high-resolution images of a gallery will make it unusably slow, yet displaying low-resolution images was simply unacceptable.
That brought us to the realization that the gallery has to be dynamic. It cannot just be a static set of images on a screen, it has to “breathe”, adapt, and change as the user interacts with it. As a rule of thumb, it should show only what a user can see, and show it in the highest quality possible. This should create the feeling that the media is “always there”.
To do that, we created several mechanisms for lazy loading of media:
Blurry Placeholders
Sometimes, it’s not the real loading time that counts, but the perceived loading time. High-resolution images take time to download, so one key feature was placing a low-resolution blurry image as a placeholder until the high-resolution image is downloaded, and only then, transitioning gracefully between them. This created the illusion that the images were always there, just not focused.
CSS Lazy Loading
Showing images in the viewport is easy, transitioning the gallery as a user scrolls is the hard part. We can talk a lot about javascript and DOM manipulation, but those are a performance nightmare. So showing and hiding images as a user scrolls turned scrolling into a nightmare, the browser just couldn’t keep up with it.
The solution came unexpectedly, from CSS. We knew that styles calculation is not performed on the main thread, so we moved the logic of each image scroll position into a stylesheet and the result was unbelievable - scrolling became immediate, images were loaded effortlessly, smoothly and quickly.
Infinite Scroll
We didn’t want to limit the number of items in any gallery, but galleries can get very big, and here we went old school. On load, a gallery displays only the first 50 items, enough to fill a screen. When such a gallery is getting close to its last item, it sends a request to the DB for more items and attaches them to the end of the gallery, making it seem as if these items were always there. A no-brainer, right?
Responsive Layouts
Since the gallery is using JS layouts, being responsive on the Client-Side is almost a given. But what about SSR? The gallery needs to create pixel-perfect layouts on the server without knowing the dimensions of the target screen. The solution is amazingly simple. The gallery creates layout blueprints and translates them to CSS super fast, so all we had to do was create multiple layouts, one for each popular screen size. These layouts translate to CSS and media queries so the browser can select the one that fits best.
Going Open Source
The Pro Gallery is celebrating 3 years in production soon. Yep, 3 years. For a gallery. Looking back, it is hard to believe how much effort it took to create this top-notch product.
Wix felt the need to share this effort with the world, making sure that every website in the world will enjoy high-quality, beautiful and fast galleries without spending years on development.
So, yes, that’s right - Pro Gallery is now open-source! My team and I sincerely believe this will make the internet better, or at least prettier.
This post was written by Guy Sopher
For more engineering updates and insights:
Visit us on GitHub
Subscribe to our YouTube channel