Jump to content
LaunchBox Community Forums

Support WEBP image format


Sinfire

Recommended Posts

  • 1 month later...
  • 7 months later...
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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 😅

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

(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
    attract-mode-spinning-box.thumb.gif.5eed0225af28a3973ec4bc2ce02bbb4a.gif
  3. Responsive: should work on all sorts of screen sizes
    attract-mode-pc.thumb.gif.036cbb5eb22f18c312c6a80adf4c1820.gif.   

    attract-mode-tablet.gif.a920ceefea3371f23ad67fde2520f8e6.gif

    attract-mode-small-tablet.gif.903e74c3f2a8786a6a3efb28187e9e9b.gif

    attract-mode-big-phone.gif.84145ce2f8f959786bf3795ab94fb12e.gif

    attract-mode-phone.gif.9cae34e3b23a897142fda3a65bd3cdee.gif

 

 

Edited by thatkookooguy
Link to comment
Share on other sites

  • 7 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...