jAlbum 24 is here, reading and writing new, better image formats than JPEG and delivering images that fits 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
"Any customer can have a car painted any colour that he wants, so long as it is black."
- Henry FordThis quote pretty well tells 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 on a 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 that it prefers.
Image credit: Jason Leung - Unsplash.com
Choice is a good thing, isn't it? In jAlbum, we call this Variants (See Settings->Images).
The model has multiple advantages:
- Provides the ability to introduce newer image formats while keeping JPEG as 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
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 of age.
WebP (read and write)
The first new image format to accompany JPEG for image generation in jAlbum is WebP. WebP provides several advantages over JPEG:- Lossy or lossless compression
- Compresses better than JPEG
- Supports alpha (transparencies)
- Supports animation
- Lossless variant compresses 26% better than PNG
WebP is supported by most browsers today, among those Chrome and Firefox. However, older Safari browsers don't support WebP, so to keep 100% compatibility, jAlbum can serve a JPEG as fallback for browsers that don't support WebP.
The following two galleries demonstrates showing transparent images the old way (PNG images) vs the new way (lossless WebP with JPEG fallback). Even though we add JPEG images as fallback, the 2:nd gallery is less than 1/3 the size of the original gallery!
HEIC/HEIF (read)
jAlbum 24 now reads this new format, commonly used by iOS devices. The format has several advantages over JPEG, among these 50% better compression and 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'll plan to support it as soon as we can. What's exiting about it is that it, apart from offering the advantages WebP has 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 a majority of viewers already. We'll likely see more formats emerging now that the brower can choose.
Variants in jAlbum
Our take on this new browser choice is called Variants. Under Settings->Images->Variants you can now specify any number of 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 for 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 for 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 that have this support added. 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 the images, and they are 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 purpose)
Tiger 3.0
Our default Tiger skin is 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 icons sets: fat and thin
- Sticky (always on-screen) Shopping cart, Feedback and Filtering boxes
Read more about the changes and on how you can play safe with upgrades in our 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:
<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.
David Ekholm 2 years ago
Thanks Michael!
Michael 2 years ago
Great job team and congratulations! Loving the improvements and skin updates. I personally use Photoblogger for its easy of use and looks. I am a solid Jalbum user for my needs.
David Ekholm 2 years ago
@André, we're happy to hear that
AndreWolff 2 years ago
The new version of the FancyBox skin supports now also Variants.