The client and the challenge
Deltalab publishes its projects through large galleries of high-resolution photos, and the /galerija page brings them together. The images must be high quality and the site fast on mobile too. On top of that, the studio’s identity includes an unusual menu: items are scattered across the screen at random positions, different every time, but they must never overlap.
The solution
Media lives on its own subdomain (media.deltalab.hr) in our Backblaze B2 bucket, and local copies left the disk only after each file was confirmed in the bucket. Gutenberg gallery, cover and image blocks serve AVIF through HTML <picture>, with the original as a fallback. When a Gutenberg upgrade started showing doubled images in galleries, JPEG and AVIF stacked on top of each other, we fixed it so every slot, lightbox included, shows one image. The menu runs on our own script, which works out item positions and recalculates them when the screen size changes.
The result
The homepage scores 92 on the mobile PageSpeed test, galleries are in AVIF, and the menu looks different on every visit with no item covering another, at any screen size.
