Skip to content

Width and height HTML attributes with fluid image #891

@tremby

Description

@tremby

Before you submit:

Is your feature request related to a problem? Please describe.

It's best practice to specify width and height on images, even if they are fluid, to help avoid layout shift. It tells the browser the expected size before it loads any image data, and an aspect ratio is derived from it so the browser can still know the image size even if CSS or something else is altering the image's width from its intrinsic one.

But I cannot find a way to allow width and height attributes to get through to the browser when using the react-imgix component while leaving the image fluid width. As soon as I specify width and height, react-imgix assumes I want a fixed-width image, and it gives resolution descriptors in the srcset instead of width descriptors (and then my sizes attribute is ignored by the browser, as per spec).

Describe the solution you'd like

There should be a way to let imgix know the width and height of the image so it can pass it through to the browser, without signalling that you want a fixed size image. Perhaps allowing them to be added to htmlAttributes would be simplest.

Describe alternatives you've considered

I've tried adding width and height properties to htmlAttributes but they don't make it to the browser.

The only other alternative I can think of is not to use this component.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions