image-set() for layout background images

jsnkuhn commented 2 years ago

The current system for file type support for background images isn't very good (messy and hard to maintain). Once Chrome supports image-set() it would probably be worth implementing it on most layouts. This would allow the removal of the imgsupport.js

current layout background image css for an FFR layout:

.ffr-default .background-layer{
    background-color: #000;
    --default-fallback: url("data:image/svg+xml,%3Csvg width='1280' height='720' viewBox='0 .5 31 23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,0h5v23h-5zm-3,1h11v22h-11zm-3,1h17v22h-17zm-2,1h21v22h-21zm-1,1h23v22h-23zm-1,1h25v22h-25zm-1,2h27v22h-27zm-1,3h29v14h-29zm-1,3h31v7h-31z' fill='%233e3e3e'/%3E%3Cpath d='M13,12h5v9h-5zm-1,1h7v7h-7zm-1,2h9v3h-9z' fill='black'/%3E%3C/svg%3E");
    background-image: var(--default-fallback);
}
.notwebp.notavif .ffr-default .background-layer{background-image: url(images/4p/base-background.png), var(--default-fallback);}
.webp .ffr-default .background-layer{background-image: url(images/4p/base-background.webp), var(--default-fallback);}
/* .avif .ffr-default{background-image: url(images/4p/base-background.avif);} */

.ffr-irongol .background-layer{
    --backgroundColor2: #500;
    background-color: #000076;
}
.notwebp .ffr-irongol .background-layer{background-image: url(images/4p/base-irongol.png);}
.webp .ffr-irongol .background-layer{background-image: url(images/4p/base-irongol.webp);}

.ffr-hardcore .background-layer{
    --backgroundColor2: #2c0055;
    background-color: #000076;
}
.notwebp .ffr-hardcore .background-layer{background-image: url(images/4p/base-hardcore.png);}
.webp .ffr-hardcore .background-layer{background-image: url(images/4p/base-hardcore.webp);}

.ffr-tourney .background-layer{
    --backgroundColor2: #050;
    background-color: #291901;
}
.notwebp .ffr-tourney .background-layer{background-image: url(images/4p/base-tourney.png);}
.webp.notavif .ffr-tourney .background-layer{background-image: url(images/4p/base-tourney.webp);}
.avif .ffr-tourney .background-layer{background-image: url(images/4p/base-tourney.avif);}

.ffr-league .background-layer{
    --backgroundColor2: #500;
    --league-fallback: linear-gradient(#b1cbda, #1f2a44);
    background-image: var(--league-fallback);
}
.notwebp .ffr-league .background-layer{background-image: url(images/4p/base-league.png), var(--league-fallback);}
.webp.notavif .ffr-league .background-layer{background-image: url(images/4p/base-league.webp), var(--league-fallback);}
.avif .ffr-league .background-layer{background-image: url(images/4p/base-league.avif), var(--league-fallback);}

.ffr-rush .background-layer{
    background-color:#0094ff; 
    --rush-fallback: linear-gradient(#0094ff 58%, #9c9c9c 58%);
    background-image: var(--rush-fallback);
}
.notwebp .ffr-rush .background-layer{background-image: url(images/4p/base-rush.png), var(--rush-fallback);}
.webp .ffr-rush .background-layer{background-image: url(images/4p/base-rush.webp), var(--rush-fallback);}

.layout.ffr-rush .background-layer .player-grid {display: none;}

.ffr-dark .background-layer{
    background-color: #000;
    --darkfallback: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4,11h1v1h-1zM8,9h1v1h-1zM13,15h1v1h-1zM15,8h1v1h-1z' fill='%2300f'/%3E%3C/svg%3E");
    background-image: var(--darkfallback);
}
.notwebp .ffr-dark .background-layer{background-image: url(images/4p/base-dark.png), var(--darkfallback);}
.webp .ffr-dark .background-layer{background-image: url(images/4p/base-dark.webp), var(--darkfallback);}

.ffr-duck .background-layer{background-color: #509ede;}
.notwebp.notavif .ffr-duck .background-layer{background-image: url(images/4p/base-duck.png);}
.webp.notavif .ffr-duck .background-layer{background-image: url(images/4p/base-duck.webp);}
.avif .ffr-duck .background-layer{background-image: url(images/4p/base-duck.avif);}

jsnkuhn commented 1 year ago

image-set is finally going to be cross browser in version 113 of Chrome. Will probably be a bit until OBS version lines up with this. Current chrome version in OBS is 103 so an update is likely sometime soon (they tend to happen every 10 versions or so. maybe with v. 30 of obs?). So more waiting on this. Will be much cleaner and easier to maintain.

This is in some pages already. We probably need a check list.

.star-background{
  background-color: #150a1e;
  background-image: url(../rm2/images/stars-background-moz.jpg);
  background-image: image-set(
    "../rm2/images/stars-background.webp" type("image/webp"),
    "../rm2/images/stars-background-moz.jpg" type("image/jpeg")
  );
}

jsnkuhn commented 1 year ago

With ~95% browser support for current gen WEBP (https://caniuse.com/webp) we might be able to default to it and possibly get rid of most PNGs and JPEGs altogether (still a case by case thing).

Continue Testing for next gen formats:

AVIF (https://caniuse.com/?search=avif)
JXLs possibly (https://caniuse.com/?search=jxl)
- only Safari at the moment

jsnkuhn commented 1 year ago

comparing AVIF, WEBP, and image-set() support:

Looks like any browser that supports image-set() unprefixed also supports WEBP. So no need to test for WEBP i guess? Same deal with most browsers and AVIF (Edge is the only outlier). Seems like image-set() isn't as useful for this generation of file types as i would have been if it got added a few years ago....

jsnkuhn commented 2 months ago

appears that OBS has run into an issues with updating browser source versions. Doesn't seem likely to happen at and point in the near future: https://github.com/obsproject/obs-studio/discussions/3853#discussioncomment-7581473

Rando-Mania / RandoTracker

image-set() for layout background images #180