Image dimensions are not set

[nicbou]

Description

When inserting an image with Redactor, the image does not have width and height attributes. Those are important to prevent the content from jumping around while it loads, especially with lazyloaded images.

Steps to reproduce

1. Insert an image
2. It does not have width and height attributes

[andris-sevcenko]

Is this when selecting a Craft asset?

For regular images, this could be pulled off, but if the user selects a transform, the width and height are unknown until the transform is actually created.

[nicbou]

I usually insert images as transforms, using the rich text editor's interface.

[andris-sevcenko]

@nicbou yeah, that'll be a bit problematic, because the final image size will only be known only when the transform is generated, which most of the time won't be when you are selecting that image from the modal.

I get the niceties this would offer, but I can't see how it can be pulled off with a reasonable effort.

[nicbou]

As a workaround, I created an "Image" block in my matrix field. This allows me to display image assets however I want:

• I can set the image width and height attributes
• I can have multiple images in a single
• I can use srcset to have multiple image sizes/resolutions

In hindsight, setting image dimensions would be very helpful, but would still load big images on small screens, and have other limitations.

[RickKukiela]

I disagree that we should just accept that we cant set the height and width attributes just because a transform might be set and that transform might not be created.

Why cant the redactor plugin be updated to account for this shortcoming? Transform can be created at the time the post is saved so that the dimensions can be determined.

However, I do think that a better approach would be to change the function of the plugin so that instead of the image tags "rendered" into the field content when the entry is saved, a "placeholder" string would be instead be inserted for each asset inserted into the post. This would require that a map of assets to placeholders be stored with the content (could be as part of a JSON object that contains the map and post data as properties).

Upon rendering the field, the placeholders would be replaced in real time with the HTML code that could generate the transform if needed at runtime to properly create the <img> tags with the correct height and width attributes.

Not be a "stickler" but the width and height are highly recommended for <img> tags and their omission will cause CLS issues which will cause lower lighthouse scores, which could negatively effect a site's position in the SERPs. See: https://www.aleksandrhovhannisyan.com/blog/setting-width-and-height-on-images/