Support WEBP image format

[Sinfire]

Over the past year, I have noticed a lot of sites that are now switching over to using WEBP image format instead of JPG or whatever....   Any chance the LaunchBox will also support this format in the future?  

[mrpetenorth]

I would call for this too. Had to use an online converter for loads of backgrounds. Not a massive problem to convert but would save a lot of time.

[Sinfire]

From what I read… webp is the new improved standard for web images that makes much more efficient and versatile than the old jpg, tif, png formats.

[Fursphere]

From what little research I've done, its a new format that's better for WEB because its smaller / faster.   It produces lower quality images - which makes sense.  Its for WEB, not for local content.

[exodus_cl]

This would be a great addition.

[Fiorell]

There is already a feature request for this (Issue #5109).

Everybody with acces to the Launchbox bitbucket may vote for this.

Edited March 27, 2023 by Fiorell

[thatkookooguy]

On 1/24/2023 at 1:14 AM, Fursphere said:

From what little research I've done, its a new format that's better for WEB because its smaller / faster.   It produces lower quality images - which makes sense.  Its for WEB, not for local content.

It was designed for web because of the variety of internet speed and computers.

 

LaunchBox IMO fits the use case since it loads a lot of images at the same time. Loading all those images to memory is more performant and can contain more images with a format like webp.

[Fursphere]

On 10/29/2023 at 12:02 AM, thatkookooguy said:

It was designed for web because of the variety of internet speed and computers.

 

LaunchBox IMO fits the use case since it loads a lot of images at the same time. Loading all those images to memory is more performant and can contain more images with a format like webp.

LB / BB caches all images.   So..  the original image or only read periodically and cached to a smaller, faster size.   And since the vast majority of source images are JPG and PNG, you'd have to do an on-the-fly conversion from those formats to WEBP if you wanted to use that for caching. 

Basically, I assume its a ton of work for questionable gains. 

Some info on the subject: https://siipo.la/blog/is-webp-really-better-than-jpeg

Long story short, WEBP is better than some  JPEG codecs, but not all. 

[thatkookooguy]

On 7/1/2022 at 2:56 AM, X1pheR said:

Did you ever made any progress on this?

Caching just means "in-memory" in this case. That's exactly why this can make a difference.

Not sure about you, but most of the images my launchbox downloaded are pngs. I wouldn't mind converting that to jpg as well.

Also, if you'll check those images and videos, most of them aren't really compressed in any way.

I will send the result of compressing one of my playlist's assets to show the difference (the games in the playlist I mean)

 

Changing the image+video compression can be done via a script. I don't expect anyone to do it manually 😅

[C-Beats]

6 hours ago, thatkookooguy said:

Caching just means "in-memory" in this case. That's exactly why this can make a difference.

Not sure if you were referring to what Fursphere was talking about regarding the LaunchBox image cache, but our cache isn't "in-memory". We create an on disc cache of image that have been scaled down to the required size to make loading from disc in the future much faster. Most images are cached this way unless the theme requests the raw image. The file does sit in memory while in use though so you're not entirely wrong, just that the image we store in memory isn't the raw image you have in your image folder, but is the cached image we created.

If we supported webp realistically it'd be support for the primary image to be in that format, and then use the cache the way it is now. Otherwise I'm fairly certain we'd have to do processing logic to get the file to render in the WPF Image control which would cause a fairly significant load time increase (especially on weaker CPUs). The conversion would still have the potential to save a lot of space though depending on how big your original artwork is and what file type.

[thatkookooguy]

18 hours ago, C-Beats said:

Not sure if you were referring to what Fursphere was talking about regarding the LaunchBox image cache, but our cache isn't "in-memory". We create an on disc cache of image that have been scaled down to the required size to make loading from disc in the future much faster. Most images are cached this way unless the theme requests the raw image. The file does sit in memory while in use though so you're not entirely wrong, just that the image we store in memory isn't the raw image you have in your image folder, but is the cached image we created.

If we supported webp realistically it'd be support for the primary image to be in that format, and then use the cache the way it is now. Otherwise I'm fairly certain we'd have to do processing logic to get the file to render in the WPF Image control which would cause a fairly significant load time increase (especially on weaker CPUs). The conversion would still have the potential to save a lot of space though depending on how big your original artwork is and what file type.

Thanks for the detailed response! Good to know!

It's great that LB\BB does the image optimization like that!

Is this preprossesing done in advance or on the fly?

Yeah I meant changing the original files to webp (and maybe even webm for videos).

Usually, with web applications, the performance gain from optimizing images and videos can be the difference between the application being rendered slowly or the application feels snappy

[C-Beats]

5 hours ago, thatkookooguy said:

Is this preprossesing done in advance or on the fly?

It's done when the image is requested. The WPF control sees you want a game image, and then we check if the cache exists, if so we use it, if not we build it and then use it. It's why Big Box seems a bit sluggish when you first start using it compared to how it behaves several sessions later. It's because those cache images have been built then and so the extra step isn't required.

5 hours ago, thatkookooguy said:

Usually, with web applications, the performance gain from optimizing images and videos can be the difference between the application being rendered slowly or the application feels snappy

Yeah, same principle applies to other frameworks (such as WPF). Much faster to use a 100x300 image than a 1000x3000 one.

[thatkookooguy]

On 11/1/2023 at 3:25 PM, C-Beats said:

It's done when the image is requested. The WPF control sees you want a game image, and then we check if the cache exists, if so we use it, if not we build it and then use it. It's why Big Box seems a bit sluggish when you first start using it compared to how it behaves several sessions later. It's because those cache images have been built then and so the extra step isn't required.

Yeah, same principle applies to other frameworks (such as WPF). Much faster to use a 100x300 image than a 1000x3000 one.

Cool! I wanted to create a kind of add-on to share custom playlists with friends since currently LaunchBox only allows uploading your entire collection.

It's a work-in-progress currently but I needed to optimize the images for attract-mode to work as expected because with web I can't do it on-the-fly quickly enough.
Also, I had to add a button before attract-mode starts since on the web, I must have the user interact with the website in order to autoplay videos with sound 🙂

I would eventually announce this in its own forum post, but since it's relevant to the discussion, I'll publish the links here if you're curious.

• Collection mode - equivalent to Launch Box view. loads images on the fly if they are not already cached.
  https://thatkookooguy.github.io/arcade-playlist/game-collection?sortBy=A - Z
• Attract mode - equivalent to Big Box view (with colorful HD theme since that's what I'm using). not interactive at all currently. Loads images upfront for fast roulette spinning.
  https://thatkookooguy.github.io/arcade-playlist/attract-mode

(There's a small button in each view to change between them if you want)

I have a copy of my LaunchBox installation on my Steam deck (running Windows 11), and I get some performance issues on attract mode. not major ones, but enough to be noticeable. At least for big collections like my arcade platform. that's why I was interested in if webp will have better performance since for this website version, it looks like the performance is a bit better even with big collections. Maybe it's because I'm only loading a single collection at a time (a playlist let's say) and not the entire LaunchBox database of my installation, but it's an interesting experiment\discussion.

Hopefully, this will be released soon! I still have some performance\UI\fun-factor fixes to do and also create a UI for the website generator.
Here I converted all images to webp files first which made the collection much smaller in size so loading all the images is really fast on good network connection

EXPECT BUGS! but here are some features I tried to do to give this a polished experience (and make it performant):

1. collection-view placeholder: for bad internet connections, since images are loaded on the fly in this mode, have a placeholder for images outside of view to allow faster website loading
      
2. spinning 3d box: if untouched, 3d boxes will spin automatically. stops spinning when touched
   
3. Responsive: should work on all sorts of screen sizes
   .   
   
   
   
   
   
   
   
   

 

 

Edited November 7, 2023 by thatkookooguy

[The Mask]

this and svg opentype fonts are desired to be supported