Skip to content

Add support for srcset and sizes attributes in Image composable #721

@goransipic

Description

@goransipic

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!

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

Status

No status

Relationships

None yet

Development

No branches or pull requests

Issue actions