Re: [csswg-drafts] [css-images] @image rule for manipulating images (#6807)

@booluw wrote:

> Great stuff, but won't this increase the overall parse time of the styles. How is the performance metrics?

As I understand it, the parse time doesn't increase much. It's the generation of the image that slows down its display a bit. I'm not an implementer but I assume the effect to be comparable to applying the existing properties to the element the image is used on.

What I mean by that is that a `filter: blur(10px);` in an `@image` rule would have a similar effect on the performance as a `filter: blur(10px);` on an element.

The difference is that it's just the image that's affected and not a whole element. And the generated image can be cached and reused in different places.

-----

Thinking a bit more about this, I think it makes sense to split the manipulations from the image itself. So we'd have an `@image-manipulation` rule and a corresponding `manipulate-image()` function we put the images through.

Taking @LeaVerou's example this would then look like:

```css
@image-manipulation --foo {
  aspect-ratio: 1 / 1;
  width: 100vw;
  object-fit: cover;
  filter: blur(10px);
  opacity: .5;
  transform: rotate(5deg);
}
```

```
background: manipulate-image(url("foo.png"), --foo);
```

This has the advantage, that authors can easily apply the same manipulations to different images and that existing logic for loading/generating the images can be reused.

So instead of

```css
@image --foo {
  src: url("foo.png") 1x
       url("foo-2x.png") 2x,
       url("foo-print.png") 600dpi;
}

background-image: image(--foo);
```

for providing different image sources you'd write

```css
@image-manipulation --foo {
   ...
}

background-image: manipulate-image(
  image-set( "foo.png" 1x,
             "foo-2x.png" 2x,
             "foo-print.png" 600dpi
  ),
  --foo
);
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1061619899 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 8 March 2022 10:18:57 UTC