CSS image-set generation via Astro Assets #890
sahilshahpatel
started this conversation in
Proposal
Replies: 1 comment 1 reply
-
+1 for image-set support, though I was able to evade it via ---
import { Picture } from "astro:assets";
import bgHero from "@assets/bg-hero.jpeg";
type Props = {
class?: string;
};
const { class: className } = Astro.props;
---
<Picture
class:list={["NebulaHero", className]}
src={bgHero}
widths={[bgHero.width, bgHero.width / 2]}
decoding="async"
sizes="100vw"
alt=""
loading="eager"
fetchpriority="high"
formats={["avif", "webp", "jpeg"]}
/>
<style>
.NebulaHero {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style> which also has the benefit of easily being viable by the browser's preloading scanner. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Body
Summary
Astro Assets currently supports automatically generating an HTML scrset with the Image component. This proposal is to allow for similar functionality for background images using the image-set CSS syntax.
Background & Motivation
I recently started using Astro Assets and love what it offers. However, on my website background images are quite common, and I would love to be able to get similar optimizations with the same pipeline for this use case. As far as I can tell, the CSS version of srcset is image-set, and it shouldn't require any extra information for Astro. The main question is what the interface will look like to do this.
Goals
Example
This is just a rough example with little thought given to the actual interface. I'm sure there's a better way to do this.
As far as better ways to do this, from some reading of the GitHub, it seems like it's supposed to be possible to import Astro Assets directly in CSS urls or something like that. I don't currently know how to do that, so I've been using the define:vars strategy instead. Even if this example is inelegant, I hope it explains the type of thing I am hoping to achieve!
Beta Was this translation helpful? Give feedback.
All reactions