jAlbum 24 is here!

jAlbum 24 is here, reading and writing new, better image formats than JPEG and delivering images that fit the client’s screen better than ever. We’re also bundling jAlbum with two major skin updates and some other improvements. It’s been a long time since we released a major version, but I hope you’ll find these improvements worth the wait.

Offering choices to the browser

This quote tells pretty well how images have been delivered over the web. The same image type and resolution have been delivered to the browser no matter its capabilities or the screen’s capabilities. This is about to change…

A few years back the HTML specification standardized a way for the browser and server to negotiate on the image type and resolution that best fits that client. The server can offer a list of image variants of various types and resolutions and let the browser pick the one it prefers.

Choice is a good thing, isn’t it? In jAlbum, we call these “Variants” (See Settings→Images).

The model has multiple advantages:

• It provides the ability to introduce newer image formats while keeping JPEG as a fallback for 100% browser compatibility
• Allows the browser to pick a higher-resolution image for high-resolution displays while serving smaller and faster versions to other devices
• Allows the browser to pick better-compressed variants for supported browsers while serving ordinary JPEG images as fallback

New image formats

As I mentioned, we can now introduce better image formats without breaking compatibility with old browsers. JPEG has been around since 1992 and has become dated.

WebP (read and write)

WebP is supported by most browsers today – like Chrome and Firefox –, however, older Safari browsers don’t support WebP. To keep 100% compatibility, jAlbum can serve JPEG as a fallback for browsers that don’t support WebP.

The following two galleries demonstrate transparent images the old way (PNG images) vs. the new way (lossless WebP with JPEG fallback). Even though we added JPEG images as a fallback, the 2:nd gallery is less than 1/3 the size of the original gallery!

Transparency test – PNG files (1.04MB)

Transparency test – WebP files with JPEG fallback (0.31MB)

HEIC/HEIF (read)

jAlbum 24 now reads this new format, commonly used by iOS devices. The format has several advantages over JPEG, like 50% better compression, support for image sequences, lossless reversible editing, alpha, and depth information.

AVIF and others (future)

This latest format isn’t supported by jAlbum yet but we plan to support it as soon as possible. What’s exciting about it is that, apart from offering the advantages WebP offers over JPEG, it compresses even better and offers 10 and 12-bit color depth and wider color gamut. It’s supported by Chrome today, meaning it works for the majority of the visitors already. We’ll likely see more formats emerging now that the browser can choose.

Variants in jAlbum

Our take on this new browser choice is called Variants. Under Settings → Images → Variants you can now specify additional image sizes and formats to be generated. These are specified as a size multiple of a typical thumbnail or closeup image. If you simply want to cater to HiDPI screens without imposing a 4x size and bandwidth penalty on all other devices, add a set of 2x variants. To reduce the additional disk space, choose WebP instead of JPEG. To cater to those having large screens and offer crisp zooming, add 3x or even 4x size variants. The choice is yours, and eventually the browser’s.

You can watch this video or play with this sample gallery to see how the browser loads different image sizes depending on the browser window size.

Skin support

Skins need to be adapted to support Variants. We currently bundle jAlbum with updated versions of Tiger and Minimal with support for variants. You will also see updated skins from our user community.

Minimal 8

Apart from Variant support, Minimal 8 offers a new mixed-color style and responsive closeup images. These images will fill as much of the browser window as possible. Navigation buttons and text are superimposed onto the images to maximize them, and they get hidden after 5 seconds of inactivity, showing ONLY your beautiful image. Minimal has become even more minimalistic.

This demo demonstrates the use of 2x and 3x-sized variants. Resize the browser window to see how the browser chooses the best-suiting variant!

(The image sizes are printed on each variant for demonstration purposes)

Tiger 3.0

Our default Tiger skin has been reborn too. Not only to support Variants but its underlying structure has also been renewed for a better responsive (a.k.a “flex”) layout. Here’s a short list of changes:

• Image variants support
• Instant preview for some 50 settings on the User Interface
• Continuous zoom (zoom slider)
• Masonry thumbnail layout
• 2 icon sets: fat and thin
• Sticky (always on-screen) Shopping cart, Feedback and Filtering boxes

Read more about the changes and how you can play safe with upgrades in the Tiger blog post.

A peek under the hood

Without getting too technical about this, here’s a short HTML code snippet that shows how WebP images are presented to browsers that support WebP while older browsers will choose the JPEG fallback:

<picture>
  <source type="image/webp" srcset="img-1600w.webp 1600w,img-800w.webp 800w"/>
  <source type="image/jpeg" srcset="img.jpg 800w"/>
    <img src="img.jpg" width="800" height="600" alt="My garden">
</picture>

Modern browsers will look through the source elements, picking the first one with a supported image type. It will then select the most suitable size variation. Older browsers simply ignore the picture and source elements and read the IMG element.

For a basic jAlbum skin to support variants, all that is needed is for the IMG element to be wrapped in a <ja:picture> element, like this (Minimal skin’s slide.htt file):

<ja:picture>
  <img src="${imagePath}" width="${imageWidth}" height="${imageHeight}" alt="${title}">
</ja:picture>

See the full list of enhancements in our release notes. I hope you’re really excited to run jAlbum 24 now. Just head to our download page.