How to specify width and height for images in the editor (markdown)

Support
1

Hi,
through lighthouse reports, google encourage developers and webmasters to specifically add width and height of images. The problem comes when adding an image through the admin text editor.

The image is added this way:
![my-image-alt](image-name.svg "my-image-title")

I can add the width through an attribute:
![my-image-alt](image-name.svg?attribute=width,27 "my-image-title")
This works fine

But the “height”… how can I add the height?

I tried using “&” but it is not working:
![my-image-alt](image-name.svg?attribute=width,27&attribute=height,27 "my-image-title")

Any ideas?
Thanks

2

@joordiii, You might want to take a look at the docs about Configuration. Especially the Images setting ‘cls’ or ‘Cumulative Layout Shift’.

In Markdown, you can use something like ![](image.jpg?autoSizes=true). Height and width will now be added automatically.

See https://web.dev/optimize-cls/ for more background info on cls.

1 Like
3

@pamtbaau , thank you very much for your reply and for giving a solution. It worked fine thanks.
Activating CLS (Enable Auto Sizes) through the Configuration automatically adds width and height to all images, if it is disabled then width and height can be added individually using ?autoSizes=true in the desired image. Perfect!

The only thing I noticed is that this works fine for .jpg and .png images, it doesn’t gives sizes to .svg images. Replacing .svg images will do the job.

Very grateful for your help

4

@joordiii, The size of an image is determined using the GD library function getImagesize(). However, svg is not an image but an xml file…

5

thanks for the clarification :+1:t4: