How can you convert JPEG frames into animated JPEG-XL?

Help & Support
1

Basically, the whole process is using a suitable tool, JPEG frames are converted to JPEG-XL for use in creating web-based animated images. After that, the animation’s specifications are defined, it is encoded, and the browser compatibility is checked.

The processes for archiving flawless, lossless animations are to convert JPEG frames to lossless JPEG-XL, create animation details, encode the animation without loss, and finally save or share the finished file.

Here is the list of the methods you can use for turning a series of JPEG frames into an animated JPEG-XL sequence:

1. JPEG Frames to JPEG-XL Format Conversion

Using a program or library that is JPEG-XL compatible, start by converting each of your JPEG frames to the JPEG-XL format. The cjxl command-line utility from the JPEG-XL reference implementation is one example of a tool in this category.

For example,

  • Use this command to change a JPEG frame into the JPEG-XL format
    cjxl input.jpg output.jxl
  • cjxl represents the command-line utility for the conversion of images to the JPEG-XL format.
  • input.jpg is the name of the JPEG frame you wish to convert.
    * output.jxl is the designation you provide for the resulting JPEG-XL file.

The JPEG frame (input.jpg) will be converted into the JPEG-XL format and saved as output.jxl after the execution of this command. To carry out this conversion, please make sure the cjxl utility is installed and available in your command-line environment.

Additionally, you can change the input and output filenames to correspond with the names and locations of your unique files.

2. Develop an Animation Sequence

  • By defining the sequence and length of each frame, you may create an animated sequence.

    • Text files

      • To generate a text file that contains the animation details, use common text editors like Notepad, Visual Studio Code, or Sublime Text. According to the specifications listed in the JPEG-XL manual, you define the sequence and length of each frame in the text file.

    • Scripting Languages

      • Animation sequence files can be created programmatically using languages like Python, JavaScript, or Ruby. If your animation logic is complicated or you have a lot of frames, this method is really helpful.

    • Animation Software

      • You can generate and export animations along with animation sequence data using some animation applications, such as Adobe Animate or Toon Boom Harmony. Your animation can either be converted after export or exported in a JPEG-XL-compatible format.

    • Command - Line Tools

      • You can also create animation sequences using command-line tools, depending on the needs and accessible tools. The JPEG-XL encoder software might include these resources.

It’s important to refer to the JPEG-XL literature for the particular requirements as the format for defining animations in JPEG-XL may change.

3. Animated sequence encoding

  • Encode the series of frames along with the animation information using a JPEG-XL encoder that supports animations. Again, for further instructions or techniques to create an animated JPEG-XL file, refer to the encoder’s manual.

For example,

  • Command to encode an animated JPEG-XL sequence

  • jxl --animation-info animation.txt --frames frame_1.jxl frame_2.jxl frame_3.jxl -o animated_sequence.jxl

  • jxl is the command-line tool for the JPEG-XL encoder.

  • --animation-info animation.txt specifies the animation information, including the order and duration of frames. You should create the animation.txt file with the necessary animation details.

  • --frames frame_1.jxl frame_2.jxl frame_3.jxl lists the individual frames of your animation. Ensure you have these frames saved as JPEG-XL files.

  • -o animated_sequence.jxl specifies the output file where the animated JPEG-XL sequence will be saved.

4. Replay and evaluation

Test the generated animated JPEG-XL file in all programs or web browsers that allow animated JPEG-XL to play to make sure everything works as it should.

  • Manual Testing

    • Open a terminal window or command prompt to get started.
    • Next, use the ‘cd’ command to get to the directory containing your animated JPEG-XL file. Use the syntax shown below:
    • cd /path/to/your/animated_jxl_directory

  • Web Browser

    • Launch Google Chrome to take advantage of the animated JPEG-XL capability it offers with the experimental flags enabled.
    • To start Chrome playing your animated JPEG-XL file, enter the following command:
    • google-chrome --enable-blink-features=Image-JXL my_animation.jxl
    • This command will launch Chrome and start playing the my_animation.jxl animated JPEG-XL file.

This is how you can turn JPEG-XL frames into animation.

2 Likes
2

Understood! but what are the key use cases and advantages of animated JPEG-XL, I means, how does its performance and quality compare to other animation formats?

1 Like
3

Hey Sahil!

Thank you for reaching out to our community.

Well, there are many applications and benefits, as well as important comparisons to other animation formats in terms of performance and image quality:

Use scenarios and animated JPEG-XL’s benefits

1. Web animation
Animated JPEG-XL has shown to be quite successful for online animations. It skillfully strikes a balance between image quality and file size, making it an appropriate option for animations used in websites and web apps.

2. Mobile Applications
Animated JPEG-XL stands out as a potent solution in the world of mobile apps, where maximizing bandwidth and storage efficiency holds the highest importance. It provides high-quality animations with small file sizes.

3. Video Thumbnails
Animated JPEG-XL is the best option for producing dynamic video thumbnails that allow users to swiftly explore video material without compromising quality.

4. Video Thumbnails
Animated JPEG-XL is the best option for producing dynamic video thumbnails that allow users to swiftly explore video material without compromising quality.

5. Presentations
By adding aesthetically appealing animated features, it is a useful tool for enhancing presentations. Even in situations when bandwidth is tight, these animations load quickly.

6. Advertising

For advertisers looking to present high-quality animations with small file sizes, animated JPEG-XL is very helpful. The user experience is considerably improved, and data use is decreased.

Do let me know if you have more queries.

1 Like
4

If then, what compatibility factors to consider when using animated JPEG-XL across applications and web browsers?

5

As per your concern, I think checking for browser support and library and framework compatibility should come first. In order to facilitate loading quickly, optimize compression and offer fallback alternatives for unsupported situations.
You can examine performance across a range of devices and adhere to the concepts of progressive enhancement and for best practices, consult the official instructions and periodically check for browser upgrades.

Carry out comprehensive user experience testing and maintain contact with the developer community for insightful input, guaranteeing a cooperative strategy for resolving possible problems and remaining up to date with new standards.