jAlbum 25 - a time saver for power users

Many of our users regularly update their galleries. This is for you!

Being a desktop app, supporting folder hierarchies, jAlbum lends itself well to managing huge image volumes regularly. We see many users, especially organizations, update their galleries on a weekly basis. in v25 we’ve taken several steps aiming at making your life easier:

  • Image processing time cut down to half *
  • Albums can be made and uploaded in the background while you continue using jAlbum. (jAlbum can even make and upload simultaneously).
  • Albums can be automatically updated (made and uploaded) once changes are detected

* Measured on a full rebuild of an 80 image gallery consisting of 16MPixel images, Tiger skin

Faster image processing and lower RAM usage

The first thing you’ll probably notice is that jAlbum feels snappier when processing images. It also consumes less RAM memory, meaning that you can serve it 50Mpixel images without any hickups. We've achieved these improvements by only reading every 2:nd pixel from original images prior to scaling them. We’ve actually employed this technique before, if you’ve been using the "Medium" image scaling quality, but in jAlbum 25 we combine this technique with smooth scaling and we're being careful to only use it when the source image is significantly larger than the final image. Given this, we haven’t noticed any quality degradation in the generated images, but you will notice a faster jAlbum :-).

Background processing

If you’re as picky as I am, you’re probably doing several edit-make-upload cycles until you’re satisfied with your gallery or gallery update. It’s ironic how often we don't notice errors until we view the final result, isn't it? When doing repeated make- and upload cycles, you shouldn’t have to wait for a progress dialogue. jAlbum 25 has two background engines that make and upload your changes while you continue editing any project:

jalbum 25 background processing

There are three types of "tasks" that can be submitted for background processing:

  • Make – jAlbum makes an album out of a project: CTRL+M
  • Make + upload – The album is first made, then, on success, uploaded: CTRL+SHIFT+M
  • Upload – The album is uploaded to a previously uploaded location: CTRL+SHIFT+U

These actions are available in the following locations:

  • On the Album menu
  • On the context menus of the "Make album" and "Upload" buttons
  • On the context menu of the current project
  • Within the new MultiMaker window (see below)

Once you’ve submitted a task for background processing, it can be monitored, paused or aborted through jAlbum's new Progress Manager component and its task list, which is is revealed when you click it:

Progress manager showing background tasks

The progress manager showing background tasks

The Progress Manager is located in the lower-right corner of jAlbum’s window, to the right of the status bar. It’s normally hidden, but appears whenever background tasks are being processed. The first ("oldest") started task’s progress can be monitored directly. Click the Progress Manager to reveal more details and to view any other queued or running tasks. (click outside to close it). There are buttons to pause/resume a task or to abort it. While processing a task, the tasks panel also prints the estimated time left in the lower right corner of each task.

Queuing tasks

Tasks are processed in a "first-come-first-served" fashion, moving from the top of the task list down, but upload tasks can be executed in parallel with make tasks as they don’t compete for the same computer resources (CPU vs IO). Make+upload tasks are however executed in sequence.

jalbum 25 task conveyors

You can queue another upload task while an existing upload task is in progress. This allows you to initiate a possibly lengthy gallery upload early in an editing session and have that upload followed up by final make+upload task that includes your last edits.

Aborting tasks

Project list

To abort a task, just click the "X" button. To abort all background tasks, right click the component and use the "Abort all" context menu item. If you abort a "make+upload" task, then the upload part will be aborted too.

While processing background tasks, jAlbum shows a progress spinner on the corresponding project’s item within the Recent projects list. When aborting a task, you will notice a slight delay before these progress spinners go away. This is because jAlbum tries to do a "clean" abort, i.e. let any ongoing image processing or uploading complete first.

Reporting

Notifications from tasks

Notifications displaying completed or failed tasks

To avoid interrupting your work-flow, jAlbum’s background processor will notify you on completed or failed tasks using the status bar and optionally also by displaying a Notification, which is hidden after a couple of seconds.

If you find the Notifications too intrusive, then you can make them discrete or switch them off altogether under Preferences. Discrete notifications only show when you click the Megaphone button in the top of jAlbum’s window. On top of this, jAlbum also prints information on initiated, completed, failed and aborted tasks to jAlbum’s system console (F7).

Project monitoring

jAlbum 25 can ensure that selected projects are automatically made and possibly also uploaded (in the background) as soon as changes are detected to the project. To activate project monitoring, use the Monitor changes context menu of the current project:

Monitor changes

Activating project monitoring

Monitored projects are indicated with an eye icon in the recent projects panel. jAlbum checks monitored projects for changes every 10 seconds. Once changes are detected, jAlbum will inform you using a Notification and initiate a make or make+upload task. Likewise, completed or failed task are also indicated using Notifications.

The new Multi Maker

The new background processing engine of jAlbum 25 makes it both faster and easier to update multiple projects as you can queue multiple make- and upload tasks, but jAlbum’s Multi Maker window makes this even more convenient. It now works along with the new background processing engine and acts as a "task submitter" for it. Simply select the projects you wish to process from its project list and use the relevant action buttons.

Multi maker window

The updated Multi Maker window of jAlbum 25

Once you’ve submitted tasks, you can close the Multi Maker window and continue working with jAlbum. Monitor and control the progress of any submitted tasks as described earlier here by using the Progress Manager component.

The new MultiMaker is more informative than the old, listing sortable table columns for project name, skin, style, last made and last uploaded dates. To reorder the table based on, say "last uploaded" date, click the "Last uploaded" column. To quickly remake all projects made using a certain skin (say after a skin update), click the Skin column, then select the projects using that skin and hit the relevant action button. Completed tasks will be reported using Notifications, but for clarity, they also turn turn green within the Multi Maker.

In addition to this, the updated Multi Maker also features a context menu where you can open, preview or view the project the mouse rests on as well as submitting that specific project for background processing.

It’s also worth reminding that the Multi Maker allows you to drop a file listing paths to each project you wish to reprocess.


Conclusion

jAlbum 25 aims at making life easier for you who regularly maintain one or several galleries. Image processing is significantly faster and you can have jAlbum make and upload galleries while you continue your edits. As background tasks don’t need to wait for your interaction, you also save time. Uploading a small change, like an adjusted title or rearranged images is now down to a split second! You’ll soon fall in love with the CTRL+M keyboard shortcut (CMD+M for Mac).

jAlbum 25 is a free update for anyone who is on a current support & update plan (check under About jAlbum). In any case, you can evaluate all functionality during 30 days.

Get jAlbum 25 today!

jAlbum 24 is here!

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 Ford
 
 
This 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
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 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:
 
<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.

Tiger skin reborn

Most of you have probably met Tiger skin. Meanwhile, new web design techniques appeared in other skins often quite early, I was afraid of rushing to introduce them in our most frequently used skin, Tiger. This way it got gradually left behind in terms of design and also made it harder to maintain code shared across my skins (Animatics, Lucid, Photoblogger, Projector, Story, Tiger). Finally, I bit the bullet and started to rewrite Tiger. The most important change was eliminating the previous Zurb framework, and replacing it with vanilla HTML5/CSS3 flex layout.

What are those “layouts”?

In the early days of web design, pages were created using the so-called “table” layout. You can imagine this like an Excel table. Complex graphics had to be chopped into small pieces. It was a nightmare to maintain, I can tell. Every time you wanted to change a small piece, you had to change the code in several (distant) places and the smallest error had lead to blowing up the whole layout. This meant the end of Chameleon skin, for example.

Then came the age of frameworks. Bootstrap, Zurb - they were all based on a “float” layout, implementing a column system, which was able to adapt to smaller screens by specifying different column widths to elements based on screen width. These layouts, however, required a lot of external code and were not as flexible as web designers would wish.

Finally, browser makers caught up with designer wishes. “Flex” and “Grid” layouts were implemented - first in Chrome and Firefox, later in all browsers. Probably this transition has lead to Internet Explorer and Opera browser’s death. Today, besides Firefox, all browsers are based on Chrome’s rendering motor: “WebKit” - yes, even MS Edge. Flex layout is capable of adapting to the available space both ways: horizontally and vertically. You can imagine this layout as a sack of marshmallows. In today’s web design image sizes are not carved into stone anymore. This is why many skins calculate the best thumbnail size automatically, as Tiger does too.

Tiger, for example, has started on Bootstrap (1.x), later it utilized Zurb (2.x), and finally, it has received flex layout with the latest version.

Instant preview

Quite a few other skins have already received the so-called “instant preview” feature. With the help of this users can immediately view the effect of dozens of settings. Both the index page and the lightbox panel show such a preview now.

Instant preview for the index page

Instant preview for the lightbox page

Variants support

In jAlbum 24 we have introduced image variants. These variants provide the visitors’ browsers with multiple image sizes, so they can pick the best resolution for the given device / screen resolution. This not only means different sizes, but also different image formats. For example, jAlbum can generate WEBP format too, besides the ages-old JPG files. WEBP has the advantage also of being better compressed (i.e. smaller files) and has opacity and animation support. You can read more about this new feature here.

Further news

New masonry thumbnail layout (variable width, horizontal)

New optional folder thumbnail layout: the text placed beside the image (like in Turtle)

2 icon styles: fat (legacy) and thin

“Sticky sections” - Filtering and Sort, Shopping cart, and Feedback can be made fixed to viewport

Continuous zoom - which not only plays with variants, but it’s also capable of showing the full-resolution originals (if included).

Playing safe with skin updates

Although I tried to make the skin upgrade from 2.x to 3.x as smooth as possible, the devil never sleeps, as they say. Tiger skin saves the old settings file in the Project folder (Ctrl-Shift-I) as jalbum-settings-old.jap. Still, I’d suggest playing around with the new version first on a small test album. You can import the settings from your production album with File → Import → Settings from project.

It's also advisable to keep backups of your precious albums with File → Duplicate project.

If you can’t make friends with the new version you can still revert to v2, but keep Tiger 3 for later experiments:

  1. Open skin directory (go one level up to “skins”) and quit jAlbum
  2. Rename “Tiger” to “Tiger3” for example
  3. Install the latest major version from here (left column below): 2.14.5 Mar 24, 2021 (previous main version)

This way both versions will remain.


Comments are welcome as usual,
Laza

Albums are now faster when hosted at jalbum.net

A few weeks ago we enabled HTTP/2 for all albums hosted here that are using https. This is done automatically, so there is no need to upload your albums again. Just make sure you access your albums using https.

Using HTTP/2 makes the albums load much faster, especially over long distances. We have checked what HTTP/2 makes to the load times of an album with 500 images in a folder. The album in this example had to travel across the globe (between Stockholm and Australia) and using HTTP/2 clearly makes a difference:

A looping video when fetching the same album from half across the globe using HTTP/1.1 vs HTTP/2.

Previously HTTP/1.1 was used which has been around since 1997. The new version called HTTP/2 makes better use of the TCP connections between the browser and server so multiple resources can be fetched simultaneously by each connection instead of only one at a time which HTTP/1.1 could do. The browser could open multiple connections when using HTTP/1.1 to load resources more efficiently, but having to handle multiple connections puts a strain on all the network resources from the client computer, via routers to the web server, so browsers usually open at the most just a few connections to each domain. Tricks to spread the resources on a web page to different domains can be used. But this can't be done for albums, since all the resources (except maybe JavaScript libraries and fonts) have to be loaded from the one domain the album is hosted on.

When using HTTP/2 this is no longer an issue, since each connection can be shared among many resources. This also means that HTTP/2 lowers the effect of high latency ("long ping times"). The jAlbum servers are located in Sweden, so within Europe the latency is quite low (usually less than 40ms). But when viewing an album from another continent, the latency can be several 100ms. As seen in the example above HTTP/2 minimizes the effect of this so albums fetched over long distances are a lot faster. This is important for our users in America and Asia. Tests run by users in the US have shown that load times for a typical album went from 4.5 seconds to 2.4 seconds. A dramatic difference!

So, all you have to do is to make sure the URLs you use for your albums hosted here start with https, and then your albums will be quicker too. If you are using an old account profile in the jAlbum desktop software at Tools->Upload/Manage... it might say that the "Web address" starts with http. Then just Remove that account profile and Add it again.

Which jAlbum skin?

While jAlbum comes with 8 preinstalled skins, you can find dozens more in our skins section. As shown on the chart below, most users simply stick with the default skin, or whatever the default was when they first installed jAlbum. Turtle still holds second place, even though we retired it years ago and released Tiger to replace it. And then there’s Chameleon, which was deprecated over 10 years ago – an eon in web design – but still sits peculiarly in 4th place. We’d like to encourage you to try out other skins; hence this blog post.


What’s wrong with old skins?

I know it’s a pain changing the skin when you are building a large gallery and want to add new albums every now and then. It looks odd when the older albums use a different skin. However, times are changing, new devices appear with different screens and different capabilities, there are new standards, new browsers emerge, and those old albums become almost unusable on these new devices. The single most important change of the past decade in web design is the rapid spread of mobile devices. Today more than 50 percent of site visitors use a mobile device. These not only have smaller screens, but also don’t have a pointing device (i.e., a mouse), which might render old albums a pain to navigate. That’s why all new skins are based on responsive web design, which allows the album to adapt to the visitor’s device. This is what sets Turtle apart from Tiger, for example.

Using a modern skin is not only important for the visitors’ sake, but Google and other search engines give a higher rank to web pages that embrace modern standards.

Historically, there were also some Flash-based skins in our skin repository, like the once very popular Fotoplayer skin. But Flash no longer works in any current browser, so we’ve removed all of the Flash skins.

Naturally, if you don’t care about mobile visitors, there’s nothing wrong with old skins. But even on desktops and laptops, you might have problems with integrations. PayPal, Google Maps, and Facebook might no longer work; these external services retire their old interfaces (API’s) regularly. This happened with Google Maps in 2017, for example, and with Facebook sharing after the 2016 US election.

Desktop Mobile

Once a skin gets to the point where its underlying technology gets hopelessly dated, we can either choose to rewrite the skin from the ground up, or to bring out a new skin that mimics the old one. Tiger inherited most of the features, styles, and layout from Turtle. Development of the hugely popular Chameleon skin was halted a decade ago with no descendant. I know this disappointed quite a few users. The good news is that we are planning on renewing Chameleon this year.


Which skin is good for me?

It boils down to what type of content you usually create. For complex, multi-level albums it’s wise to choose a robust skin with strong navigation support and search. For single events it might be better to choose a lightbox-first skin that's built around the slideshow, although not as useful for navigating deeper folder structures.

If you’re after the simplest presentation, and the extra features are not important, you can choose a “minimalistic skin”, like Minimal or Atom. Athough they look similar, Atom features a fully-responsive layout, and has more options. These skins are also the easiest to tweak, or to use as a base for creating a new skin.

In the middle ground stands the Projector skin. It appears in the second table here because it’s a “lightbox first” skin, but it uses a database, which allows functions like Search and Tag cloud work. So, it also works well for large albums.

 

Index page first skins

  Fancybox Mars Tiger Photoblogger Pluto Story
Sample album
Created 2018 2019 2017 2014 2018 2020
Number of styles 7 15 26 12 11 10
Deep (collapsible) navigation menu    
Search within album      
Tag cloud (keywords)      
Thumbnail layout Masonry Grid, Masonry Grid Vertical, Grid, Masonry Grid, Masonry Masonry
(alternating size)
Background music    
Full screen
Slideshow  
Theme image support
Displays "New" tag    
Custom web pages    
Web locations
Plays video files
Audio files    
Other file types (e.g. PDF)    
Animated GIF's      
Swipe support
Displays map    
Panorama support    
360° panorama    
Displays metadata    
Face tags      
Shopping cart      
Feedback / Kiosk      
Social sharing    
 
 

Lightbox-first skins

  Animatics Comet Lucid Projector
Sample album
Created 2019 2018 2019 2018
Styles 7 1 9 27
Transition effect(s) Ken Burns, Cross-fade,
Zoom, Stack
Cross-fade Slider carousel Zoom, Ken Burns,
Stack, Slide, Swap,
Flip, Book, Cube
Slideshow
Swipe support  
Background music  
Search      
Tag cloud      
Displays metadata  
Displays map
Displays videos  
Social sharing  
Custom pages  

Special skins

 

Responsive is the only one which can create a whole album inside a web page on-the-fly by utilizing Javascript. This is useful when you just want to display a handful of pictures in an already-made web page.

 
 

Mercury is special because it is capable of displaying lengthy text around images, not just below.

 
 

Story is the first skin capable of playing with thumbnail sizes (thumbnail / wide / full), in order to create an intriguing blog-like experience. This skin was also the first that allowed embedding custom pages (or any custom content) into the index page, which strenghtens the blog-like experience even further.

 
 

Zigzag is another example of an unusual layout. It alternates the left/right positions of the pictures and their captions.


Embedding albums in other pages

Unfortunately, on mobile devices you can easily end up with an unusable album when you use the traditional “IFRAME” method. As the IFRAME element has to be a fixed pixel size, the album area often stretches beyond smaller screens, effectively making it impossible to scroll through the page, or to reach navigation elements. The “responsive embed code” utilized by a few skins still can only match the width of the screen. The album can still stretch beyond the screen when the mobile is held horizontally.

The only user-friendly way is to run the album in its own tab or window, i.e., linking to the album from your site instead of embedding it. I know this way your site’s menu or header is not included, but it’s still better than showing a broken page. Our skins are usually easy to tweak to match your site’s theme, and many provide ways to include custom elements (e.g. header, footer) in the album.

The other possibility for WordPress users is to use our jAlbum bridge component, which pulls images from an uploaded album, and displays them in a “projector” box within the post.

Finally, the Responsive skin – mentioned above – is also capable of creating a little album inside another web page by utilizing only Javascript. This skin generates a call code you have to insert in your page.


General advice using skins

If you’d like to experiment with different skins don’t do this on your production project! The skin settings usually do not survive switching back and forth between skins. Create a small sample album, and experiment on that. You can also create a duplicate of a project by choosing File → Duplicate project.

Before you run a skin update make sure to save the current project. It is rare for jAlbum to lose the settings during a skin update, but you might end up with zeroed settings (first option, false, empty, black color). If this happens, do not save the project! Simply close the project without saving it, then reopen it. You might lose the latest changes, but at least not all. It is safest to install a skin update without an open project.

To discover more skins follow this link to our Skins section. jAlbum’s skin chooser box also has a link at the bottom of the list; read “Download more skins...”, where you can find skins by features too.

Comments are welcome,
Laza