Skip to content

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

Open

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!

Activity

  1. bitspittle commented on Jul 16, 2025

    @bitspittle
    Member

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

  2. self-assigned this
    on Jul 16, 2025
  3. goransipic commented on Jul 16, 2025

    @goransipic
    Author

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

  4. added this to the 1.1 milestone on Sep 18, 2025
  5. bitspittle commented on Sep 18, 2025

    @bitspittle
    Member

    (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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions