kobweb icon indicating copy to clipboard operation
kobweb copied to clipboard

Add support for srcset and sizes attributes in Image composable

Open goransipic opened this issue 7 months ago • 3 comments

Is your feature request related to a problem?

Yes — currently, the Image composable from com.varabyte.kobweb.silk.components.graphics.Image does not support the srcset or sizes attributes, which are essential for implementing responsive images with proper resolution switching and art-direction behavior.

Describe the solution you’d like

It would be great if the Image composable exposed optional parameters like:

srcSet: SomeType? = null,
sizes: SomeType? = null

These would be passed directly into the generated tag as srcset and sizes attributes.

Describe alternatives you’ve considered

I’m currently using the low-level Img() composable directly with attrs { attr("srcset", "...") }, but this bypasses Silk theming and variants.

Additional context

Here’s an example of what I’m trying to achieve using Img():

Img(
    src = "/images/image_split_1.webp", // fallback
    attrs = {
        attr(
            "srcset", """
                image_split_1.webp 488w,
                image_split.webp 1000w
            """.trimIndent()
        ) // this 50vw is not correct its must be 100vw
        attr(
            "sizes", """
                (max-width: 425px) 50vw,
                488px
            """.trimIndent()
        )
        attr("alt", "Responsive image using srcset")
        style {
            width(100.percent)
            height(100.percent)
            display(DisplayStyle.Block)
            objectFit(ObjectFit.Cover)
        }
    }
)

This addition would improve Silk’s support for modern responsive image techniques.

Thank you!

goransipic avatar Jul 16 '25 14:07 goransipic

Interesting. I'll try to take a look in the near future, to better understand those features.

bitspittle avatar Jul 16 '25 15:07 bitspittle

Great! I think you’ll find some of the features pretty interesting. Its not going be easy to implement this.

goransipic avatar Jul 16 '25 19:07 goransipic

(Categorizing so I don't lose track of this -- should have done this back in July. A 1.1 milestone doesn't mean I'm against adding this before 1.0 but for the moment wouldn't consider it a blocker.)

bitspittle avatar Sep 18 '25 00:09 bitspittle