aria/aria.coffee
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat(NavHeader.astro): use image-set to supply multiple file types for heder background

Browse source 
I missed image-sets in looking for a solution to this, thanks @ackwell for spotting this!
This commit is contained in:
BuyMyMojo 2024-12-20 15:29:15 +11:00
parent b42dacffdd
commit 6d1c644f2c
1 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/NavHeader.astro
View file

@ -6,10 +6,16 @@ import Partition from "./Partition.astro";
import myBackground from "../img/sites/avatar-ht-f.png"
const optimizedBackground = await getImage({src: myBackground, format: 'avif', quality: 50, width: 680})
const optimizedBackgroundLQ = await getImage({src: myBackground, format: 'jpeg', quality: 60, width: 680})
---
<style is:inline>
image-set(
url("image1.avif") type("image/avif"),
url("image2.jpg") type("image/jpeg")
);
</style>
<div
style={`width: 670px; border: 1px solid var(--border); background-image: url('${optimizedBackground.src}');`}
style={`width: 670px; border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
>
<Picture